Examples

Explore these examples to learn how to build UIs with Constela.

Counter

A basic counter example demonstrating state management with increment, decrement, and reset actions.

Number stateActions with stepsClick event handlers+1

Todo List

A todo list example demonstrating list state management, input binding, and iteration with the each loop.

List stateString stateInput binding+3

Fetch List

An example demonstrating how to fetch data from an API with loading states and error handling.

Fetch stepLoading stateonSuccess/onError+3

Router

A multi-page routing example demonstrating navigation, nested routes, and dynamic parameters.

@constela/routerRoute definitionsLink component+3

Portals, Timers, Observers & Validity

Demo of Portals, Timers (auto-close modal), Intersection Observer, and Form Validity.

PortalTimerIntersection Observer+2

Call & Lambda

Filter and transform data using call expressions with lambda functions. Demonstrates array filtering, string methods, and computed values.

Call expressionsLambda expressionsArray filter/map+3

Array Expression

Demonstrates dynamic array construction using the array expression feature.

Array expressionCall/lambda expressionssetPath action+1

Theme System

Theme system with light/dark/system mode switching, CSS variables, and persistent storage.

Theme configurationStyles with variantsDOM manipulation+1

Accessible Form

A form demonstrating a11y best practices with proper headings, aria-labels, input validation, and CSS transitions.

a11y attributesHeading hierarchyCSS transitions+1