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. To see how fast it runs, try the benchmarks.

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. Shopping cart A shopping cart in a deep reactive store, with quantities, a coupon and computed totals. Sign up form A sign up form with validation per field, a password strength meter and server errors. Form builder A form generated from a config, with repeatable sections, conditional fields and a live JSON preview. Checkout wizard A four step checkout as a finite state machine, with steps that validate before moving on. Drawing editor Place and move shapes on a canvas, with undo and redo from buttons and the keyboard.

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. Protected routes A login page and routes guarded by session and role, with a redirect back after login. Settings app Nested routes with a sidebar of NavLinks, a tab in the query string and a route loader.

Async

Loading data, lazy components and optimistic updates.

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

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. Composables Reusable functions that return signals and clean up after themselves: storage, debounce, media queries, mouse and intervals. Embeddable widgets A star rating, a countdown and a color picker as Shadow DOM components with scoped styles and custom events. Kanban board A kanban board with drag and drop, keyboard moves, a card editor and storage in localStorage. Animated list A list that animates items in and out and moves them smoothly on shuffle, with reduced motion respected.