DISCLAIMER

Origami is currently very very work in progress, the template rendering engine with directives is coming and there are working versions of the rendering engine, but other parts of the framework takes priority.

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

Directory structure

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)

Single File Components

Origami components live in .ori files with three sections:

<script lang="php" setup>
// Logic and data bindings
return [ 'subject' => 'John Doe' ];
</script>

<template>
<h1>Hello, {{ subject }}!</h1>
</template>

<style scoped>
h1 {
  color: hotpink;
}
</style>

Sections:

• <script lang="php" setup>: Top-level PHP, with access to services, DI, etc.
• <template>: HTML with Twig-like interpolation ()
• <style scoped>: Scoped styles auto-prefixed with component IDs

Rendering a Template

You can render Origami templates from anywhere:

use Sugoi\Http\Origami;

return Origami::render('pages/hello', [
    'subject' => 'Jane Doe',
]);

When using the Sugoi WebControllers Origami rendering is implicitly enabled for pages.

#[WebController('apps')]
class AppsController
{
    #[Page(template: 'apps/apps-index')]
    public function list(): array
    {
        return [
            'apps' => [
                ['title' => 'kohai.dev'],
            ],
        ];
    }
}