Serixa

Composition feels familiar if you have used Flutter or React components, but the tree is rendered on the server in PHP. Serixa owns the UI layer - widgets, HTML, themes, and optional progressive enhancement. Applications still own routing, persistence, and authentication.

Serixa is not a full-stack application framework. Core has no router, ORM, auth system, sessions, or job queue. Embed widgets in an existing PHP app, or scaffold a thin shell and bring your own backend.

1. 1

   Developer

   Describe UI in PHP only

2. 2

   PHP widgets

   Button, Card, Column, Row, ...

3. 3

   Widget tree

   WidgetTree materialised from the root

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 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 PHP UI framework package
• 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 core, widgets, layout primitives, 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.0.0Public GitHub release; Packagist package serixa/framework; documentation site at serixa.yasaboy.com

• Keeping Serixa a UI layer - not a full-stack application 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 monorepo stay coherent as packages grow.
• Progressive enhancement should stay optional: static widget pages must work with zero JavaScript.

• Public documentation is live at https://serixa.yasaboy.com.
• Work still ahead of core includes deeper form-validation adapters, focus-trap hardening, optional community templates, and marketplace-style adapters that stay out of the core package.
• Additional 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.

Source, Packagist install, and documentation links. No separate PDF packaging is published on this portfolio for Serixa.