# Examples

Source: https://signy.dev/examples/

Whole apps built with Signy and Iris CSS. Each one is a single HTML file you can save and open.

Every example loads Signy with one script tag and uses the `html` template, so there is no build step. New to Signy? Start with the [quick start](https://signy.dev/documentation/1/overview/quick-start/index.html.md). To see how fast it runs, try the [benchmarks](https://signy.dev/benchmarks/index.html.md).

## Forms and state

Forms, lists and state that changes in many places.

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

## Router

Apps with pages, links, guards and nested layouts.

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

## Async

Loading data, lazy components and optimistic updates.

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

## Components and the DOM

Contexts, composables, Shadow DOM, drag and drop and animation.

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