Origami Templating ​
Sugoi’s Modern Templating System
Vue-style Single File Components (SFCs) for modern PHP. SSR-first. Developer-happy. 🚀
What is Origami? ​
Origami is Sugoi Cloud’s server-side rendering (SSR) templating system, built around the concept of Vue-style single file components, but for PHP.
- Clean syntax, single-file structure
- Scoped styles and template logic
- Integrated with Sugoi’s WebController + Page system
- Aggregated and optimized CSS output
Key Features ​
Expression-Based Rendering ​
Origami supports embedded expressions like {{ $data->something }}
within:
- Text nodes.
- Attribute values (e.g.,
value="{{ $user->name }}"
). This makes creating dynamic content simple and intuitive.
Custom Directives ​
Use powerful s:
directives for advanced rendering flows:
- Conditionals:
s:if
,s:elseif
, ands:else
. - Loops:
s:for
ands:forelse
. - Control Flow:
s:break
,s:continue
. - Attributes:
s:class
,s:style
,s:attr
.
Example:
html
<ul>
<li s:for="$users as $user">
<span>{{ $user->name }}</span>
<small s:if="$user->isActive">Active</small>
</li>
</ul>
Getting started ​
Directory structure ​
All Origami templates use the
.ori
file extension.
resources/
└── templates/
├── index.html # Main HTML injection point
├── layouts/ # Reusable layout wrappers for pages
├── views/ # Full-page Origami templates (routed via Page attributes)
└── components/ # Shared building blocks (planned for imports)
Rendering a Template ​
You can render Origami templates from anywhere:
php
use Sugoi\Origami\Origami;
return Origami::render('admin/user-details', [
'subject' => 'Jane Doe',
]);
Rendering a Page ​
When using the Sugoi WebControllers, Origami rendering is implicitly enabled for pages. The return value of your controllers will be provided in the $data
scope in the Origami templates.
php
#[WebController('apps')]
class AppsController
{
#[Page(template: 'apps/apps-index')]
public function list(): array
{
return [
'apps' => [
['title' => 'kohai.dev'],
],
];
}
}