# Signy

> Signy is a UI framework for the browser built on signals. Components are classes, render() runs once, and only the functions bound in a template update when a signal changes. No virtual DOM, no build step needed.

- Templates use the `html` tagged template and run without a build step. JSX works with babel-plugin-jsx-dom-expressions.
- State lives in `Signal` and `Computed`. Read with `.value`, write with `.value = x` or `.set(prev => next)`.
- Only functions update: `${() => count.value}` is live, `${count.value}` is frozen at render time.
- Do not write React. There is no `useState`, `useEffect`, re-render or virtual DOM.
- Conditionals and lists go through `Show`, `For`, `Index`, `Switch` and `Match`.
- These docs are for Signy 1.x. [Every docs version](https://signy.dev/documentation/version/index.html.md) lists the docs for other majors.
- Each docs page has a Markdown copy at its URL plus `index.html.md`. [llms-full.txt](https://signy.dev/documentation/1/llms-full.txt) has all of them in one file.

## Start here

- [Usage rules for AI assistants](https://signy.dev/documentation/1/ai/signy-usage.md): how to write Signy components, the patterns to use and the mistakes to avoid
- [Releases](https://signy.dev/documentation/1/version/index.html.md): what each 1.x release added and fixed

## Overview

- [Installation](https://signy.dev/documentation/1/overview/installation/index.html.md): Install Signy from npm or load it from a CDN with one script tag.
- [Quick start](https://signy.dev/documentation/1/overview/quick-start/index.html.md): Write a Signy component with a signal, render it and mount the app.
- [How Signy works](https://signy.dev/documentation/1/overview/how-signy-works/index.html.md): Signals, components that render once and fine grained DOM updates.
- [JSX and TypeScript](https://signy.dev/documentation/1/overview/jsx-and-typescript/index.html.md): Use Signy with TypeScript and compile JSX with babel-plugin-jsx-dom-expressions.
- [AI assistants](https://signy.dev/documentation/1/overview/ai-assistants/index.html.md): Point AI coding assistants at the Signy usage rules, llms.txt and the Markdown docs.

## Reactivity

- [Signals](https://signy.dev/documentation/1/reactivity/signals/index.html.md): Signal holds a reactive value. Read it with .value and write it with .value or .set().
- [Computed](https://signy.dev/documentation/1/reactivity/computed/index.html.md): Computed derives a cached value from signals and recomputes only when they change.
- [Selectors](https://signy.dev/documentation/1/reactivity/selectors/index.html.md): createSelector() turns one selected key into a boolean per item, so a selection change updates two rows, not all of them.
- [Effects](https://signy.dev/documentation/1/reactivity/effects/index.html.md): effect() runs side effects when the signals it reads change, with onCleanup and on().
- [Batching](https://signy.dev/documentation/1/reactivity/batching/index.html.md): Signal writes apply in a microtask. batch() groups writes, flushAll() applies them at once.
- [Transitions](https://signy.dev/documentation/1/reactivity/transitions/index.html.md): createDeferred() gives a lagging copy of a value for slow work, and useTransition() runs updates with a pending flag.
- [Store](https://signy.dev/documentation/1/reactivity/store/index.html.md): store() makes deep reactive state. Read through .state and write with a path in .set().
- [Resource](https://signy.dev/documentation/1/reactivity/resource/index.html.md): resource() loads async data with reactive value, loading and error, and refetches when its source changes.

## Components

- [Components](https://signy.dev/documentation/1/components/components/index.html.md): A component is a class that extends Component. render() runs once and returns the DOM.
- [Props and children](https://signy.dev/documentation/1/components/props-and-children/index.html.md): Pass props to a component as attributes, functions for values that change, and content as children.
- [Lifecycle](https://signy.dev/documentation/1/components/lifecycle/index.html.md): setup(), onMount() with cleanup and onUnmount() in Signy components.
- [Refs and forms](https://signy.dev/documentation/1/components/refs-and-forms/index.html.md): Handle form input with events and signals, and reach DOM elements with createRef().
- [DOM helpers](https://signy.dev/documentation/1/components/dom-helpers/index.html.md): DOM.on, DOM.onKeydown and DOM.onClickOutside add listeners that the component removes on unmount.
- [Context](https://signy.dev/documentation/1/components/context/index.html.md): createContext() shares a value down the component tree. Provide it in setup(), inject it in a descendant.
- [Shadow DOM](https://signy.dev/documentation/1/components/shadow-dom/index.html.md): Render a component into a shadow root with scoped styles.
- [Custom events and slots](https://signy.dev/documentation/1/components/events-and-slots/index.html.md): emit() sends a custom event out of a Shadow DOM component, and slots show content from the host page inside it.

## Templates

- [html templates](https://signy.dev/documentation/1/templates/html-templates/index.html.md): The html tagged template builds DOM nodes without a build step, with bindings, events and components.
- [Show](https://signy.dev/documentation/1/templates/show/index.html.md): Show renders content while a condition is truthy and a fallback otherwise.
- [For and Index](https://signy.dev/documentation/1/templates/for-and-index/index.html.md): For renders a keyed list that reuses rows. Index renders a list by position.
- [Switch and Match](https://signy.dev/documentation/1/templates/switch-and-match/index.html.md): Switch renders the first Match whose condition is truthy, or a fallback.
- [Portal and ErrorBoundary](https://signy.dev/documentation/1/templates/portal-and-error-boundary/index.html.md): Portal renders content elsewhere in the document. ErrorBoundary shows a fallback when rendering throws.
- [Lazy and Suspense](https://signy.dev/documentation/1/templates/lazy-and-suspense/index.html.md): lazy() loads a component on first render, Suspense shows a fallback until it is ready, preloadAll() loads ahead of time.

## Router

- [Routes](https://signy.dev/documentation/1/router/routes/index.html.md): Define routes, install the router with app.use() and render the matched page in an Outlet.
- [Navigation](https://signy.dev/documentation/1/router/navigation/index.html.md): Navigate with Link and NavLink, or from code with useRouter(), and guard routes.
- [Params and query](https://signy.dev/documentation/1/router/params-and-query/index.html.md): Read route params, query and loader data as signals with useParams(), useQuery() and useRouteData().
- [Nested and lazy routes](https://signy.dev/documentation/1/router/nested-and-lazy-routes/index.html.md): Nest routes with children and an Outlet in the parent, and split routes with lazyRoute().

## Application

- [Application](https://signy.dev/documentation/1/application/application/index.html.md): application() creates the app, installs plugins with use() and mounts the root component.
- [Testing](https://signy.dev/documentation/1/application/testing/index.html.md): Test Signy components with flushAll() after writes and a memory router.

## Examples: Forms and state

- [Todo list](https://signy.dev/examples/todo-list/index.html.md): A todo list with filters, a remaining count and storage in localStorage.
- [Shopping cart](https://signy.dev/examples/shopping-cart/index.html.md): A shopping cart in a deep reactive store, with quantities, a coupon and computed totals.
- [Sign up form](https://signy.dev/examples/sign-up-form/index.html.md): A sign up form with validation per field, a password strength meter and server errors.
- [Form builder](https://signy.dev/examples/form-builder/index.html.md): A form generated from a config, with repeatable sections, conditional fields and a live JSON preview.
- [Checkout wizard](https://signy.dev/examples/checkout-wizard/index.html.md): A four step checkout as a finite state machine, with steps that validate before moving on.
- [Drawing editor](https://signy.dev/examples/undo-redo/index.html.md): Place and move shapes on a canvas, with undo and redo from buttons and the keyboard.

## Examples: Router

- [Router app](https://signy.dev/examples/router-app/index.html.md): A small app with a navbar, a list page, a detail page with a route param and a not found page.
- [Protected routes](https://signy.dev/examples/protected-routes/index.html.md): A login page and routes guarded by session and role, with a redirect back after login.
- [Settings app](https://signy.dev/examples/settings-app/index.html.md): Nested routes with a sidebar of NavLinks, a tab in the query string and a route loader.

## Examples: Async

- [Data loading](https://signy.dev/examples/data-loading/index.html.md): Load data with resource(): loading state, errors, refetch and a source that changes.
- [Search](https://signy.dev/examples/search/index.html.md): Search 5,000 items while typing stays fast, with a deferred query and a pending indicator.
- [Lazy dashboard](https://signy.dev/examples/lazy-dashboard/index.html.md): Dashboard widgets loaded on demand behind Suspense boundaries, with preloading.
- [Optimistic comments](https://signy.dev/examples/optimistic-comments/index.html.md): Comments that show at once and roll back when the server fails, with a toast and a retry.

## Examples: Components and the DOM

- [App shell](https://signy.dev/examples/app-shell/index.html.md): An app shell with session, theme and notification contexts provided once at the root.
- [Composables](https://signy.dev/examples/composables/index.html.md): Reusable functions that return signals and clean up after themselves: storage, debounce, media queries, mouse and intervals.
- [Embeddable widgets](https://signy.dev/examples/widgets/index.html.md): A star rating, a countdown and a color picker as Shadow DOM components with scoped styles and custom events.
- [Kanban board](https://signy.dev/examples/kanban/index.html.md): A kanban board with drag and drop, keyboard moves, a card editor and storage in localStorage.
- [Animated list](https://signy.dev/examples/animated-list/index.html.md): A list that animates items in and out and moves them smoothly on shuffle, with reduced motion respected.

## Benchmarks

- [Rows benchmark](https://signy.dev/benchmarks/rows/index.html.md): The js-framework-benchmark operations on a table of rows: create, replace, update, select, swap, remove and clear.
- [Signals benchmark](https://signy.dev/benchmarks/signals/index.html.md): Raw reactivity throughput with no DOM: creating signals, reads, writes, computed chains, effects and batching.
- [Stress benchmark](https://signy.dev/benchmarks/stress/index.html.md): A live grid of 500 cells updating every frame, plus create and dispose cycles to watch memory.
- [Comparison benchmark](https://signy.dev/benchmarks/compare/index.html.md): The rows benchmark in Signy, React, Preact, Vue and Alpine.js, run one after the other in your browser.

## Optional

- [Full docs in one file](https://signy.dev/documentation/1/llms-full.txt): the usage rules and every docs page