Gyral documentation

Install Gyral, write your first Model-View-Intent component, use it in a page, and test it without a browser.

Complete components to copy, with their tests. A todo list with filters, a signup form with native validation, and fixes for common bugs.

Connect Claude Code, VS Code or any MCP client to the Gyral MCP server, hosted or local, install the agent skill, and give agents llms-small.txt.

How define() turns a spec into a custom element, and how components pass data to each other with props and outputs.

How Gyral turns clicks, input, form submissions and keys into typed messages, and why the view never holds event handlers.

State as plain data, one pure reducer per message, commands returned as data, and the framework messages Gyral sends you.

Views are pure functions from state to html templates. Name intents, render keyed lists, bind form state, and let the compiler check markup.

Style Gyral components with Shadow DOM, cascade layers, custom properties and custom states, and make a whole site themeable from CSS alone.

A complete validated form to copy, then the browser's own checks or one Standard Schema for client and server. Works with or without JavaScript.

Make a Gyral component participate in native forms, with reset, disabled state, validity and a server-rendered fallback.

Reducers return commands, side effects described as data. Drivers run them, with built-in concurrency, retries and cancellation, and answer with messages.

How Gyral reports each failure once, lets a parent catch a child's failure, shows a component's fallback and keeps a server-rendered page going.

Typed localStorage and IndexedDB drivers: persist values, watch settings, query records and run atomic transactions.

Native EventSource and WebSocket drivers: receive validated streams, send messages and handle connection lifecycles.

Share state between distant components with stores, read like props from the side and written with messages, on the client and per request on the server.

Read signals, Redux-style stores, XState actors and WebSocket feeds with subscription(), write to them with plain drivers, and test both.

Typed route tables that work on the server and in the browser, navigation as commands, and the current URL streamed into your model.

Choose how each page renders - in the browser only, once at build time, or on every request - and mix all three in one app.

Render pages on the server with Declarative Shadow DOM, hydrate them in place, keep a strict CSP, and ship a production build.

Render pages to HTML files at build time with @gyral/ssr/static, ship zero JavaScript where nothing is interactive, and host them anywhere.

Load each component's code only on the pages that use it, delay hydration until it's needed, and see what each page downloads.

Ship a Gyral app to a static host, a Node server, Bun, Deno or Cloudflare Workers, with the right cache headers and a strict Content Security Policy.

Serve Gyral from a Rust backend with build-time pages, with Askama pages and browser-rendered components, or with embedded server rendering through gyral-rs.

Test models without a DOM, components in a real browser with fake drivers and virtual time, and server-rendered pages through hydration.

Watch every message, state change and command in your app with an in-page panel that costs nothing in production builds.

Gyral components are standard custom elements. Use them in plain HTML, React, Vue or Svelte - set their props and listen to their outputs.

Use Web Awesome, Shoelace, Material Web or any other custom element inside a Gyral view - turn its events into intents and style it through parts.

Escape template data, protect form requests, keep secrets out of hydration seeds, and serve Gyral with a strict Content Security Policy.

Build Gyral views with native controls, useful labels, announced errors, predictable focus, and browser tests that cover keyboard interaction.

Measure Gyral's production payload, rendering work and hydration cost, then use keyed rows, structural sharing and islands where they help.

Every @gyral package, what it's for, how to install it, and the optional build tools Gyral works with.

The public API of every Gyral package, generated from the type declarations at build time so it always matches the code.

Gyral targets Baseline widely available browser features, with explicit fallbacks and progressive enhancement for newer platform APIs.

Understand Gyral's 0.x API policy, package versions, how to upgrade and which entry points are internal.

Every code a production build of Gyral prints, such as G0010: what the message says, what it means and how to fix it.

Gyral core: Model-View-Intent web components on the web platform, with their own view layer.

Gyral HTTP driver: fetch requests as data, typed errors, Standard Schema decoding.

Gyral router: typed route tables, navigation as commands, History API baseline with Navigation API enhancement.

Gyral time: delays, debounces and wall-clock ticks (every) as commands.

Gyral server rendering: Declarative Shadow DOM pages with hydration seeds.

Gyral test helpers: pure update stepping, command helpers, fake drivers, virtual time, SSR page mounting, server rendering in Vitest browser tests.

Gyral devtools: an in-page timeline of messages, state, commands and stores (development builds).

What Gyral keeps from Cycle.js, what it changes and why, the counter side by side, and how Cycle.js concepts map to Gyral.

The beliefs behind Gyral, from "the platform is the framework" to "parse at boundaries", and what each one means for your code.

Move a Lit component to Gyral's Model-View-Intent loop: explicit props, pure views, typed messages, keyed rows, drivers, stores and native hydration.