Serixa

A PHP-first component system that renders widget trees into semantic HTML with reusable layouts, themes, and server-side rendering. The experience is similar to Flutter or React component composition, but the tree is rendered on the server in PHP. Serixa owns the UI layer. Applications still own routing, persistence, and authentication.

Serixa is not a full-stack framework. It has no router, ORM, auth system, sessions, or job queue in core. You can render widgets inside an existing PHP app, or scaffold a small app and bring your own routing and backend.

1. 1

   Developer

   Compose UI in PHP only

2. 2

   PHP widgets

   Button, Card, Column, Row, …

3. 3

   Widget tree

   WidgetTree from the root widget

4. 4

   Render pipeline

   BuildTree → ResolveContext → Lifecycle → Theme → Accessibility → Render

5. 5

   Semantic HTML

   Fragments or full Document pages

6. 6

   Theme Compiler

   Tokens and recipes → /assets/serixa.css

7. 7

   Browser

   HTML + CSS; optional ~21 KB serixa.js runtime

App widgets enter Renderer. Full pages go through DocumentRenderer. Fragments run the ordered RenderPipeline, then HtmlWriter emits the HTML string. Themes resolve class maps before render. Accessibility passes run before the final HTML write.

Developers build UI without manually writing HTML for the common cases. Layout and content widgets nest like Flutter widgets or React components, then render to real HTML elements.

use Serixa\Component\Button;
use Serixa\Component\Card;
use Serixa\Component\Center;
use Serixa\Component\Column;
use Serixa\Component\Container;
use Serixa\Component\SizedBox;
use Serixa\Component\Text;
use Serixa\Rendering\Renderer;

$ui = Container::make(
    Center::make(
        Column::make([
            Card::make()
                ->title('SERIXA')
                ->child(
                    Text::make('Write PHP. Get semantic HTML.')
                        ->tone('muted'),
                )
                ->child(SizedBox::height(4))
                ->child(
                    Button::make('Get started')
                        ->primary()
                        ->large(),
                ),
        ])->alignCenter()->gap(4),
    ),
)->maxWidth('md');

echo (new Renderer())->render($ui);

Button::render() emits a real <button> with theme classes and escaped label text. Card renders an <article> with an optional header. Layout widgets wrap children in flex/structure containers via the active theme. Exact class strings come from DefaultTheme / ThemeCompiler recipes such as .sx-btn-primary.

<!-- Shape produced by the widget renderers (theme classes abbreviated) -->
<div class="…container…">
  <div class="…center…">
    <div class="…column…">
      <article class="…card…">
        <header><h2>SERIXA</h2></header>
        <p class="…muted…">Write PHP. Get semantic HTML.</p>
        <button type="button" class="… sx-btn-primary …">Get started</button>
      </article>
    </div>
  </div>
</div>

Source example: framework/examples/basic.php in the Serixa monorepo.

SERIXA/
  framework/          # serixa/framework (production package)
  packages/           # Optional packages (icons, charts, forms, admin, cli, …)
  starters/           # Starter kits
  playground/         # Local demos
  docs/               # Architecture, ADRs, guides
  website/            # SSR documentation website
  tools/              # Build / release helpers
  validation/         # Real-app validation fixtures

• serixa/framework — production UI engine
• serixa/cli — scaffolding, build, doctor, inspect, profile
• serixa/icons, charts, calendar, forms, admin, auth-ui, devtools — official UI kits

CLI commands documented for local DX include new, make:page / make:component / make:theme, build, doctor, inspect, profile, and related helpers. The CLI is a development tool, not part of the request path.

• Documented local benches (PHP 8.2, machine-variant): ThemeCompiler on the order of milliseconds for small rule sets; Renderer averages tens of milliseconds over small widget trees in the v1 performance notes.
• Client runtime file size is about 21 KB on disk for serixa.js.
• These numbers are local measurements, not guarantees for every host.

1. M1–M2Rendering engine, core widgets, layout engine, theme maps
2. M3–M5Widget tree, lifecycle, render pipeline, document/asset engine, ADRs
3. M6–M9UI foundation, data display, progressive enhancement, interactive widgets
4. v1 lineOffline Theme Compiler CSS path, CLI DX, docs website app, ecosystem packages

• Keeping Serixa a UI engine (not a full-stack framework) makes the product easier to explain and safer to embed in existing PHP apps.
• Offline CSS compile belongs in the default path so production does not depend on a CDN play build.
• ADRs and an explicit public API surface help a framework-shaped project stay coherent as the monorepo grows.
• Progressive enhancement should stay optional: static widget pages must work with zero JavaScript.

• Official documentation website at serixa.yasaboy.com (reserved; shown as Coming Soon until live).
• Roadmap items still ahead of core include deeper form validation adapters, focus-trap hardening, optional community templates, and marketplace-style adapters that stay out of the core engine.
• Specialized starter kits beyond the current set are planned as later ecosystem work, not claimed as shipped products here.

• Not a Laravel or Symfony replacement — no router, ORM, auth, or queue in core.
• Not React — no virtual DOM, hydration, or client widget re-render loop.
• auth-ui and similar packages are presentation-oriented; applications still own real sessions and security.
• Optional ecosystem packages vary in maturity; the portfolio leads with the framework, CLI, docs, and core UI story.