Getting started
This page is the entry point for new SERIXA users. It explains what SERIXA is, what it is not, and where to go next.
For a full walkthrough of Composer install, first page, rendering, widgets, themes, and layouts, see the Installation Guide.
SERIXA is a PHP UI framework. You write widgets in PHP; SERIXA renders clean HTML with Tailwind classes applied through a theme. Rendering is server-side (SSR) — there is no virtual DOM and no client-side hydration.
use Serixa\Component\Button;
use Serixa\Component\Text;
use Serixa\Component\Column;
use Serixa\Rendering\Renderer;
$html = (new Renderer())->render(
Column::make([
Text::make('Hello, SERIXA')->as('h1')->size('xl')->weight('bold'),
Button::make('Continue')->primary(),
]),
);Every widget lives under the Serixa\Component\ namespace (with a Serixa\Widget\Widget base class underneath). Rendering goes through Serixa\Rendering\Renderer. Full HTML pages go through Serixa\Document\Document.
Be clear about scope before you start:
match() example).serixa/charts, serixa/calendar), not core framework widgets. Install them when you need those surfaces.assets/runtime/serixa.js) is a small progressive-enhancement script, not a framework runtime.If you keep this in mind, the rest of the framework is straightforward.
From a clone of this monorepo, install and run the CLI package:
cd packages/cli
composer install
php bin/serixa new blog
cd blog
composer install
php -S localhost:8000 -t publicOr from an app that already requires serixa/cli:
vendor/bin/serixa new blogPrefer generating apps outside framework/ (sibling folders like starters/ or a directory outside the clone). See Path-repository recursion.
Open http://localhost:8000. You now have a runnable SSR app with a home page, layout, and a few sample pages.
For the full 30-minute walkthrough (pages, layout, a card list, a contact form), read first-blog.md.
Monorepo overview: monorepo.md. CLI reference: cli.md.
::make() entry point and chained modifiers, e.g. Button::make('Save')->primary()->large().Serixa\Rendering\Renderer turns a widget tree (or a Document) into an HTML string.Serixa\Theme\DefaultTheme maps a widget + its state (props) to a list of Tailwind classes. Widgets don't hardcode CSS classes; the theme decides.Serixa\Document\Document builds a full HTML page: <title>, meta tags, registered CSS/JS assets, and a body of widgets.Serixa\Runtime\ClientRuntime::register() wires up the small serixa.js script for progressive enhancement (modals, dropdowns, tabs, toasts, etc.). Optional; skip it if you don't use interactive widgets.serixa new, serixa make:page, serixa make:component, serixa make:layout scaffold an application around the framework. The CLI is a developer tool; it never runs at request time.use Serixa\Component\Button;
use Serixa\Component\Text;
use Serixa\Document\Document;
use Serixa\Rendering\Renderer;
$document = Document::make()
->title('Hello')
->description('My first SERIXA page')
->body(
Text::make('Hello, SERIXA')->as('h1')->size('xl')->weight('bold'),
Button::make('Continue')->primary(),
);
echo (new Renderer())->render($document);| Goal | Doc |
|---|---|
| Install and render a first page | installation.md |
| Build a full blog end-to-end | first-blog.md |
| Build an admin dashboard shell | first-dashboard.md |
| Understand the generated folder layout | project-structure.md |
| Put an app on a real server | deployment.md |
| Common questions | faq.md |
| Something broke | troubleshooting.md |
| Full CLI reference | cli.md |
| Widget-by-widget reference | ui-foundation.md, data-display.md, interactive-components.md, layout-engine.md |
serixa help
serixa help new
serixa listserixa with no arguments prints a quick-start banner with the same three commands shown above.