Tutuca: Zero-dependency SPA framework

Try It

Edit an example below. Press Ctrl/Cmd + Enter to run your changes.

Hello, Tutuca

With MargaUI Components

Get Started

Tutuca ships as three builds. Each build includes everything in the builds before it. Select the build that you need:

Build	Size	What it adds
tutuca	28.2 KB	Core: components, Immer state, virtual DOM, macros, and native collections
tutuca-extra	28.6 KB	Adds CSS class utilities (Tailwind / MargaUI compilation)
tutuca-dev	68.3 KB	Adds component linting and testing utilities for development

You can download all builds as .js, .min.js, and .min.js.br. Get them from the releases page or from 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

These examples show what you can make with Tutuca. Edit any playground. Press Ctrl/Cmd + Enter to run your changes. To learn the features step by step, see the tutorial.

Basics

Counter

To-Do List

Testing Components

This example shows methods, receive handlers, and iteration logic under test. The Test tab runs automatically.

Interaction Patterns

Tree Navigation

Click a folder to open or close it. Click a file to trigger a selected event.

Drag and Drop

Drag an entry to change its position. Use the input to filter the list.

Filter and Paginate

The search input narrows the list. The pager shows one page of matches at a time. Editing or deleting a row works on the correct item, even on page 2 of a filtered view. @loop-with returns the original keys of the matching rows. So the rows keep their identity.

Web Component & Custom Event

Add a third-party web component. React to its custom events.

Full Applications

JSON Editor

Personal Site

Visual WebAssembly

Composability

Composing Examples

Each example above exports its components and root alone. It knows nothing about composition. The example below imports them all. It renders each one in its own tab. The glue code is small.

Storybook

This storybook collects examples from this page. Each example file exports a getExamples() function. It describes the components in a few states. The storybook imports these functions and shows the results under a sidebar navigation. See the full storybook feature reference for every feature: sections, views, macros, request mocks, lifecycle on hooks, and drive tests.

More Examples

For SVG, MathML, advanced macro, and dynamic binding examples, see the More Examples page.

Tutuca

A small SPA framework that is easy to learn