Skip to content

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, and s:else.
  • Loops: s:for and s: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'],
            ],
        ];
    }
}