Examples

Practical, self-contained examples showing how to build common UI patterns with @studiometa/js-toolkit.

Each example includes the HTML markup, JavaScript component code, and app setup so you can follow along in your own project.

Basics

• Counter component — A simple reactive counter to learn refs and event handling
• Accordion — Expandable/collapsible content sections with ARIA support

Patterns

• Tabs — Tabbed interface with keyboard navigation and ARIA roles
• Modal / Dialog — Modal with backdrop, focus trapping, and Escape to close
• Form validation — Real-time field validation with error messages

Advanced

• Scroll-linked animation — Parallax and skew effects driven by scroll position
• Lazy image — Defer image loading with the withMountWhenInView decorator
• Teleport refs — Move DOM elements outside the component tree while keeping ref access