Examples

Apps built with Lumen

The repository ships a set of runnable example apps under apps/. Each is a real program — scaffold nothing, just lumenc run apps/<name>. Here are a few, with the code that makes them tick.

apps/todo

Todo list

A signal-backed array drives a virtualized <for>. Filter tabs recompute a derived visible list; Enter commits a new task; per-row ids route clicks.

signal_array<for> virtualizedderiveper-id routing
main.lmn
<scroll class="list" grow="1" sensitivity="0.6">
  <for each="visible" key="id"
       virtualized="true" row-height="56">
    <row class="task-row" id="row-{id}" align="center">
      <label class="checkbox {check_class}" text="{check_glyph}" />
      <label class="task-label {done_class}" grow="1" text="{label}" />
      <button class="task-delete" id="del-{id}" text="✕" />
    </row>
  </for>
</scroll>
apps/weather

Weather dashboard

A <template> defines one forecast day and is instantiated per entry with {field} substitution. Live data comes from fetch; icons swap by condition.

<template>fetch + parse_json<image>gradients
main.lmn
<template name="day">
  <column class="day" id="day-{idx}"
          tab-index="{tab}" width="120px">
    <label class="day-name" text="{name}" />
    <image class="day-icon" src="icons/{icon}.png"
           width="56px" height="56px" />
    <label class="day-temp" text="—°" />
  </column>
</template>
apps/sysmon

System monitor, driven from C++

The interface is .lmn + CSS, but every value is pushed from a C++ binary through Lumen's C ABI — no Rhai needed. It reads /proc and streams labels over the thread-safe signal channel.

C ABIlumen.hppsignal channellive metrics
main.cpp
// The UI binds to signals; C++ drives them.
// No Rhai builtins — typed handles over the C ABI.
#include <lumen.hpp>

static lumen::Signal<std::string> cpu_label{"cpu_label"};
static lumen::Signal<std::string> mem_label{"mem_label"};

// in the sampler thread — assignment pushes to the runtime
cpu_label = buf;
mem_label = buf;
apps/list-demo

Reactive list & detail

Rows come from a signal-backed array; a <if> reveals an expandable detail panel. A compact tour of the two reactivity tags side by side.

<for><if>gradient bgshadow
main.lmn
<for each="rows" key="id" gap="8">
  <row width="100%" height="56px" align="center">
    <image src="check.svg" width="24px" height="24px" />
    <tile grow="1" radius="12"
          bg="linear-gradient(90deg, #0a3358, #1a5285)"
          id="row-{id}" text="{label}" />
  </row>
</for>

<if signal="show_detail">
  <tile width="100%" radius="12" padding="16" />
</if>
Also in the repo

More to explore

Every one of these runs with lumenc run apps/<name>.

apps/counter

Counter

The starter: focusable tiles, hover tints, and a signal-derived label in a scroll view.

apps/datagrid

Data grid

A market-style dashboard — a sidebar, KPI cards, and a dense table bound to signals.

apps/mdeditor

Markdown editor

Open, edit, and save files; a dirty flag and live character counts track the document.

apps/widget-garden

Widget garden

One file exercising nearly every tag — tabs, dropdowns, tooltips, dialogs, sliders.

apps/ime-input

IME input

Text entry with IME composition; committed text mirrors into a label.

apps/drop-target

Drop target

A drop="true" tile echoes the dropped file path; long-press resets.

apps/image-viewer

Image viewer

Async PNG decode uploaded to the GPU, stretched to the window.

apps/blank-no-css

Blank

A single <root /> — the smallest thing that renders.

apps/weather

Weather

Templates, live fetch, and condition-driven icon swaps in a gradient scene.

Browse the source → Start from scratch