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.
Timers & Inbound Events
Snake
A whole game as one state machine inside the components: the board,
the snake, the food, the score, and the status
(idle/running/paused/over) are fields, and every rule is a method on
SnakeGame — so step() is a pure
function of the state and the tests call it directly.
The only host code is the setInterval in
getRequestHandlers(): it owns the timer and pushes a
tick message at the root component, exactly what
app.sendAtRoot("tick") does in an app that has the
app handle. Everything else is a decision the component
makes — Pause requests stopTicking and the
interval is cancelled, Resume requests
startTicking again, changing the speed slider
reschedules it at the new rate, and a fatal tick cancels it from
receive.tick. Food placement runs off a seeded PRNG in a
seed field, so no handler needs
Math.random().
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.
Forms & Input
File Picker
A <input type="file"> wired with
@on.change="onPickFile event". The handler reads the
chosen File off event.target.files and
copies its metadata into fields, so the name, formatted size, MIME
type, and last-modified date render reactively —
@show/@hide on the hasFile flag
swap between the summary table and the empty state.
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.