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 CSS class utilities (Tailwind / MargaUI compilation) |
| tutuca-dev | ~31 KB | Adds component linting and testing utilities for development |
All builds are available as .js, .min.js,
and .min.js.br from the
releases page
or directly via jsDelivr:
import { component } from "https://cdn.jsdelivr.net/npm/tutuca/+esm";
// or https://cdn.jsdelivr.net/npm/tutuca/dist/tutuca-extra.js/+esm
// or https://cdn.jsdelivr.net/npm/tutuca/dist/tutuca-dev.js
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
Testing Components
Methods, input handlers, and iteration logic under unit test — the Test tab runs automatically.
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.
Web Component & Custom Event
Embed a third-party web component and react to its custom events.
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.
Storybook
A storybook that aggregates examples from this page. Each example file
exports a getExamples() describing its components in a
few states; the storybook imports them and renders them under a
sidebar navigation.
Advanced: Macros
To-Do with Macros
Dynamic Bindings
What's Next
Learn More
- Tutorial — learn features with interactive examples
- Source code
Roadmap
- Dev tools for inspecting component state and updates