Sygnal

Why Sygnal?

MVI Architecture

Model-View-Intent separates what happens, when it happens, and how it looks. Clear data flow makes components easy to reason about and debug.

Reactive Streams

Built on xstream and Cycle.js patterns. Every interaction is a stream, giving you powerful composition and transformation with minimal code.

Zero Boilerplate

No hooks, no selectors, no dispatchers. Define initialState, intent, and model as static properties and Sygnal wires everything together.

Pure Components

View functions are pure — they receive state, return JSX. No side effects, no lifecycle methods, no this. Simple to test and simple to compose.

Full TypeScript Support

Written in TypeScript with comprehensive type declarations. Get autocompletion, type checking, and inline documentation for components, state, intent, model, and all framework APIs.

Diagnostics Built In

Silent wiring mistakes (a selector typo, an action with no handler, an event nobody hears) become coded messages with a fix, in the dev server, in tests, and from the sygnal-check static checker.

AI Built In

sygnal/ai streams LLM chat through a driver like HTTP (local models with Ollama, any provider through an AI SDK server), asks decision models typed questions, and runs an in-app assistant. Declare what agents may do with the agent static, and they can operate your app, in the page or through WebMCP. See AI Chat, Decisions and Agents.

Built for Agents

A single llms.txt reference, canonical forms enforced by strict mode, an app graph from inspect(), an MCP server, and a dev MCP endpoint (sygnal({ mcp: true })) with the running app’s state, so coding agents can write and debug Sygnal code without guessing.

Collections

Render dynamic lists of components with automatic isolation, keyed reconciliation, and built-in parent/child communication.

Astro Integration

First-class Astro support with server-side rendering and client hydration. Drop Sygnal components into any Astro page with a single directive.

Vike Integration

File-based routing with SSR, client-side navigation, and automatic hydration via Vike. Layouts, data fetching, and SPA mode included.

A component

A component is a function that renders its state, with the rest as statics: intent says when something happens, model says what happens. Press Edit to change it and see the result update.

function Counter({ state }) {
  return (
    <div>
      <p>Count: {state.count}</p>
      <button className="increment">+1</button>
      <button className="reset">Reset</button>
    </div>
  )
}

Counter.initialState = { count: 0 }

Counter.intent = ({ DOM }) => ({
  INCREMENT: DOM.click('.increment'),
  RESET: DOM.click('.reset'),
})

Counter.model = {
  INCREMENT: (state) => ({ ...state, count: state.count + 1 }),
  RESET: (state) => ({ ...state, count: 0 }),
}

The Quick Start builds one step by step.

Coming from React or Vue? Sygnal for React developers and Sygnal for Vue developers map what you know onto Sygnal, with live examples.