A gallery of less common Tutuca use cases. Each playground is editable — press Ctrl/Cmd + Enter to run your changes. For the core features, see the tutorial; for the showcase apps, see the home page.
Iteration
@loop-with runs once per render and returns
{ iterData, start, end }. The start/end
keys slice the iteration with
Array.prototype.slice semantics, so @each
skips the off-page prefix and suffix instead of walking and
discarding them. Slicing keeps each item's original key.
Pagination
A paged list: @loop-with turns the current page into a
slice range. Off-page items are never iterated, and the index badges
show that keys stay original across pages.
Conditionals
Traffic Light
A port of a common React exercise: a button cycles a light through
red, orange, and green. The current color is derived from a single
lightIndex field by a light method, and
per-color visibility uses the built-in equals? predicate
(@show="equals? $light 'red'") in place of React's inline
&& expressions.
SVG
A tutuca template renders SVG directly: the <svg>
subtree keeps its namespace, so the usual directives
(@each, :attr bindings,
@on.click, @if, macros) all work on real SVG
elements.
Reactive Bar Chart
A bar chart driven by a list field. @loop-with computes
the shared layout once, @enrich-with derives each bar's
geometry, and the buttons mutate the data — the
<rect> and <text> elements
re-render in response.
Interactive SVG
Clickable <circle> swatches. Each uses
@on.click to set the selected color, :fill
binds the preview, and @if / @then /
@else draws a ring around the active swatch.
SVG Icon Macro
Macros can expand to an <svg> subtree, so an icon
set is just a few parametrized macros. ^size and
^color are macro parameters; passing them dynamically
makes every icon react to state.
MathML
Reactive Formula
MathML renders from a template just like SVG. The
<math> subtree keeps its namespace, so
<msup>, <mfrac>, and
<mn> become real MathML elements — and
@text on an <mn> makes the displayed
number reactive.
Macros & Dynamic Bindings
Advanced composition patterns. The tutorial introduces macros and dynamic bindings step by step; these playgrounds put them to work in larger examples.
To-Do with Macros
The to-do app rebuilt with macros for its repeated markup — checkbox, input, and button fragments factored into reusable templates.
Dynamic Bindings
A producer publishes a value and any descendant reads it as
*name, skipping the components in between.
Dynamic Variable in a Path
A dynamic var used as a render target: editing the rendered component teleports the mutation back to where the value actually lives.
Dynamic Selected Entry — Edit in a Child
A producer exposes a single selected entry; a distant child renders and edits it through a dynamic binding.