VSN.js examples

Seventeen small, runnable pages show VSN in real markup. Each one focuses on a few ideas rather than prescribing an application architecture. Open a demo, inspect its behavior, and borrow the part you need.

Start here

• Counter and toggle: root state, click handlers, one-way display bindings, and vsn-show
• Bindings: automatic bindings, :from, :to, two-way controls, checkboxes, and selects
• Tabs: nested behaviors and reactive ARIA attributes
• Todo list: forms, two-way state, arrays, persistence, and repeated templates

New to CFS? Read Get started first, then keep the reference nearby.

Interaction patterns

• Modal: state-driven visibility, Escape handling, backdrop clicks, and focus restoration
• Tooltip: hover and focus events, inherited state, and aria-describedby
• Dropdown: outside events, keyboard flags, nested scopes, and selection
• Form validation: two-way inputs, validation functions, and error attributes
• Toast notifications: temporary state, timers, callbacks, and class maps

These examples connect semantic markup to behavior. Keep labels, keyboard access, focus, and ARIA state together when adapting them. See events and actions.

Lists and richer UI

• Kanban: drag events, dynamic HTML, templates, and root scope access
• Product filters: derived display state, filters, HTML, and plugins
• Nested list: item/index scopes, immutable array updates, and root functions
• Accessible table: selection state, reactive checked/ARIA attributes, and row scopes

For lists you plan to reorder, use a unique, stable vsn-key to preserve identity. See lists and row identity.

Data and dynamic content

• Server request: partial HTML swaps, async CFS functions, and request state
• Async search: debounced input, async functions, await, and list helpers
• Fragment lifecycle: dynamic HTML, templates, construction, and destruction
• Templates: the templates plugin and sanitizing interpolated HTML

The gallery loads templates and sanitize plugins before mounting VSN. For a standalone page, include the required plugin modules or register them through the Engine API.

Details worth noticing

• vsn-if mounts and unmounts; vsn-show keeps elements mounted and toggles hidden
• Repeated rows are reused when a unique vsn-key is supplied and recreated otherwise
• Binding paths use dots, including item.0; bracket indexing belongs in CFS expressions
• Requests can submit forms, expose loading/error/data state, and perform inner, outer, or no swap
• Dynamic VSN behavior activates only inside explicitly trusted fragments
• Conditional transitions are opt-in through vsn-transition, with vsn-enter and vsn-leave hooks

The Guide explains the shared model behind these patterns. The Reference gives the directives and signatures without the sightseeing.