Quick Start

Getting started

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.

What SERIXA is

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.

What SERIXA is not

Be clear about scope before you start:

  • No router. SERIXA does not decide which page to show for a URL. Your app does that (see first-blog.md for a small match() example).
  • No auth / sessions. Login and profile pages are HTML only. Wire your own session/auth logic in your app.
  • No ORM or database layer. SERIXA renders widgets; where the data comes from is up to you.
  • Charts & Calendar ship as optional packages (serixa/charts, serixa/calendar), not core framework widgets. Install them when you need those surfaces.
  • No virtual DOM / SPA state. The client runtime (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.

Requirements

  • PHP 8.2+
  • Composer

The fastest path to a running app

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 public

Or from an app that already requires serixa/cli:

vendor/bin/serixa new blog

Prefer 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.

Core concepts, in order

  1. Widgets — PHP objects that render HTML. Built with a fluent ::make() entry point and chained modifiers, e.g. Button::make('Save')->primary()->large().
  2. RendererSerixa\Rendering\Renderer turns a widget tree (or a Document) into an HTML string.
  3. ThemeSerixa\Theme\DefaultTheme maps a widget + its state (props) to a list of Tailwind classes. Widgets don't hardcode CSS classes; the theme decides.
  4. DocumentSerixa\Document\Document builds a full HTML page: <title>, meta tags, registered CSS/JS assets, and a body of widgets.
  5. ClientRuntimeSerixa\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.
  6. CLIserixa 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.

A minimal full page

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);

Where to go next

GoalDoc
Install and render a first pageinstallation.md
Build a full blog end-to-endfirst-blog.md
Build an admin dashboard shellfirst-dashboard.md
Understand the generated folder layoutproject-structure.md
Put an app on a real serverdeployment.md
Common questionsfaq.md
Something broketroubleshooting.md
Full CLI referencecli.md
Widget-by-widget referenceui-foundation.md, data-display.md, interactive-components.md, layout-engine.md

Getting help from the CLI itself

serixa help
serixa help new
serixa list

serixa with no arguments prints a quick-start banner with the same three commands shown above.