Try It
Edit any example below and press Ctrl/Cmd + Enter to see your changes instantly.
Hello, Tutuca
With MargaUI Components
Get Started
Tutuca ships as three builds, each a superset of the previous one. Pick the one that fits your needs:
| Build | Size | What it adds |
|---|---|---|
| tutuca | ~29 KB | Core: components, state, virtual DOM, macros, and immutable data structures |
| tutuca-extra | ~30 KB | Adds KList (keyed ordered collection) and CSS class utilities |
| tutuca-dev | ~31 KB | Adds component linting and validation for development |
All builds are available as .js, .min.js,
and .min.js.br from the
releases page
or directly via esm.sh:
import { component } from "https://esm.sh/tutuca";
// or https://esm.sh/tutuca/extra
// or https://esm.sh/tutuca/dev
Examples
Explore what you can build with Tutuca. Each playground is editable — press Ctrl/Cmd + Enter to run your changes. For a structured walkthrough, see the tutorial.
Basics
Counter
To-Do List
Interaction Patterns
Tree Navigation
Click folders to toggle them open or closed, and click files to trigger a selected event.
Drag and Drop
Drag entries to reorder them, and use the input to filter the list.
Full Applications
JSON Editor
Personal Site
Visual WebAssembly
Composability
All Together Now
Each example above exports its components and root independently, with no knowledge of being composed. The component below imports them all and renders each one in its own tab — the glue code is minimal.
Advanced: Macros
To-Do with Macros
What's Next
Learn More
- Tutorial — learn features with interactive examples
- Source code
Roadmap
- Dev tools for inspecting component state and updates
- Built-in testing utilities for component behavior
- CLI tools for LLM-assisted development