This page shows less common uses of Tutuca. Edit any playground. 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. It returns
{ iterData, start, end }. The start/end
keys cut the iteration with Array.prototype.slice rules.
So @each does not walk the items outside the page. A cut
keeps the original key of each item.
Pagination
This example shows a paged list. @loop-with converts the
current page into a slice range. The loop never iterates items
outside the page. The index badges show that keys stay original
across pages.
Conditionals
Traffic Light
This is a version of a common React exercise. A button moves a light
through red, orange, and green. A light method computes
the current color from one lightIndex field. Per-color
visibility uses the built-in equals? predicate
(@show="equals? $light 'red'") instead of React inline
&& expressions.
SVG
A tutuca template can render 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
This bar chart reads a list field. @loop-with computes
the shared layout once. @enrich-with derives the
geometry of each bar. The buttons update the data. Then the
<rect> and <text> elements
re-render.
Interactive SVG
Each <circle> swatch answers clicks.
@on.click sets the selected color. :fill
binds the preview color. @if / @then /
@else draws a ring around the active swatch.
SVG Icon Macro
A macro can expand to an <svg> subtree. So a few
parametrized macros can give you a full icon set. ^size
and ^color are macro parameters. When you pass them
dynamically, every icon reacts to state.
Timers & Inbound Events
Snake
The game is one state machine inside the component. The board, the
snake, the food, the score, and the status
(idle/running/paused/over) are fields. Every rule is a method on SnakeGame. So
step() is a pure function of the state. The tests call
it directly.
The only host code is the setInterval in
getIntentHandlers(). It owns the timer. It pushes a
tick message to the root component. This is the same as
app.sendAtRoot("tick") in an app that has the
app handle. All other decisions belong to the component.
Pause requests stopTicking. The framework then
cancels the interval. Resume requests
startTicking again. A change to the speed slider
schedules the interval again at the new rate. A fatal tick cancels
the interval in receive.tick. Food placement uses a
seeded PRNG in a seed field. So no handler calls
Math.random().
MathML
Reactive Formula
MathML renders from a template in the same way as SVG. The
<math> subtree keeps its namespace. So
<msup>, <mfrac>, and
<mn> become real MathML elements.
@text on an <mn> makes the displayed
number reactive.
Forms & Input
File Picker
This example wires an <input type="file"> with
@on.change="onPickFile e.target". The handler reads the
chosen File from event.target.files. It
copies the file metadata into fields. The name, formatted size, MIME
type, and last-modified date then render reactively.
@show/@hide on the hasFile
flag swap between the summary table and the empty state.
Macros & Dynamic Bindings
This section shows advanced composition patterns. The tutorial introduces macros and dynamic bindings step by step. These playgrounds show them in larger examples.
To-Do with Macros
This is the to-do app again. Its repeated markup — checkbox, input, and button fragments — now lives in reusable macro templates.
Dynamic Bindings
A producer publishes a value. Any descendant reads it as
*name. The components in between do not pass the value.
Dynamic Variable in a Path
This example uses a dynamic var as a render target. When you edit the rendered component, the mutation goes directly to the component that owns the value.
Dynamic Selected Entry — Edit in a Child
A producer exposes one selected entry. A child far down the tree renders and edits it through a dynamic binding.