Tutuca

Zero-dependency, batteries-included SPA framework

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

Roadmap

  1. Dev tools for inspecting component state and updates