Tutuca

Five examples, one learning path

Edit the source and try the result. These same components appear in the tutorial, playgrounds, documentation and Storybook. Card examples need no MoonBit compiler download. The contact directory also shows the MoonBit code that filters and paginates its data.

1. Quantity picker

Choose a quantity within limits and see the total. Fields, events, derived values and invariants.

Open card playground · Inspect in Storybook

2. Notification preferences

Edit, validate and apply notification settings. Bindings, conditional fields and draft state.

Open card playground · Inspect in Storybook

3. Task list

Add, complete and filter tasks with stable identities. Child components, messages and keyed collections.

Open card playground · Inspect in Storybook

4. Contact directory

Find a contact and edit their details. Search, pagination, selection and owner-held state.

Open card playground · Inspect in Storybook

5. Document workspace

Edit Markdown documents and save through a host service. Composition, alternate views and asynchronous intents.

Open card playground · Inspect in Storybook

Use Tutuca in your project

Start with a portable card, or add Tutuca to a MoonBit project and generate compiled components from the same file format.

moon add marianoguerra/tutuca

Follow the tutorial · Read the integration guide

Explore a specific feature

The Storybook Reference sections cover recursion, graphics, drag and drop, host integrations and diagnostics. Both playgrounds keep focused examples under Reference. Use them when you need that feature.