REEEL documentation

REEEL is a platform where the interface is described as text and reaches an app and a site without a new release.

Where to start

• Project — a directory with a project.json manifest: configurations, builds, publishing, domains.
• Format — the markup language: elements, parameters, expressions, data.
• Editor — where all of it is written, previewed and published.
• Articles — worked examples and what did not fit the other sections.

What markup looks like

Every line is an element, nesting is indentation, parameters are written with a colon. Two short examples show what a screen is put together from. Both can be changed right here and run: click the code, edit it and press Run.

A running wave: four lines

// A loop gives the clock, an expression computes the points, a primitive draws the line.
Animated loop:true duration:4000 value:@t
  SizedBox height:160
    *Points values:{map(range(48), (i){sin(i / 5 + t * 6.2832)})} mode:line color:0xFF6938EF strokeWidth:3 cap:round join:round

• Animated loop:true is a clock: t runs from 0 to 1 in four seconds and starts again.
• value:@t declares a variable; everything below it can see it.
• Braces hold an expression: map(range(48), …) computes 48 points of a sine, and the line follows the clock by itself.
• An element with a star draws straight onto a canvas.

A ring with a slider: answering an action

// The slider changes a value; the ring and the number follow it.
State @p:0.4
  Column crossAxisAlignment:center spacing:12
    SizedBox width:160 height:160
      *Animated of:$p value:@v duration:400 curve:easeOutCubic
        *Arc cx:0.5 cy:0.5 r:0.42 startAngle:-90 value:$v strokeWidth:14 cap:round color:0xFF6938EF
    Text $"${round(p * 100)} %"
      #style fontSize:28 fontWeight:w800
    Slider value:$p onChanged:(next){p = next}

• State @p:0.4 declares a variable; everything below it can see it.
• The slider keeps nothing: it hands the new value to the onChanged handler.
• *Animated takes the ring to the new value smoothly instead of jumping.
• $"…" is a template string, #style is a nested object with the style.

A larger example is the function plot . How running works and what an example cannot reach is in Live examples .

The language itself is in Format .