Fleury

clock.dart table.dart bars.dart

live

You write

// A live world clock: Digits tick every second.
// Click a tab, or press ← / →, to switch zones.
Tabs(
  tabs: [
    TabItem(label: 'UTC', content: Digits(utcTime)),
    TabItem(label: 'EST', content: Digits(estTime)),
    TabItem(label: 'PST', content: Digits(pstTime)),
    TabItem(label: 'CET', content: Digits(cetTime)),
    TabItem(label: 'JST', content: Digits(jstTime)),
  ],
)

Fleury renders

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand

You write

DataTable(
  rowCount: people.length,
  selectionMode: DataTableSelectionMode.row,
  columns: const [
    DataTableColumn(id: 'name', title: 'NAME'),
    DataTableColumn(id: 'role', title: 'ROLE'),
    DataTableColumn(id: 'commits', title: 'COMMITS'),
  ],
  cellBuilder: (row, col) => people[row][col],
)

Fleury renders

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand

You write

// Streamed: a timer calls setState with fresh values,
// and Fleury sends only changed cells to the target.
BarChart(
  bars: [
    for (final (i, jobs) in waiting.indexed) Bar('q${i + 1}', jobs),
  ],
  showYAxis: true,
)

Fleury renders

Live

ⓘ how this demo runs ⛶ Expand

None of these are screenshots — each is a real Fleury widget tree compiled to JavaScript with dart2js, running live in your browser: the clock ticks, the bars stream, the table takes your clicks. The same trees also run native in a terminal. How that works →

What you get

A Real Widget Tree, for Cells

A widget, element, and render tree with a real layout engine — painting to a grid of cells, not pixels. Rebuilds stay on the dirty subtree, so an idle app emits nothing.

How it fits together → Built for Agents

Controls and content publish their role, state, and actions to a live semantic tree. Agents drive your app through it over MCP — and your tests assert on the same tree — instead of scraping the screen. No agent code in your app: fleury_mcp connects it to an MCP host.

Drive it with an agent → One App, Multiple Targets

The same widget tree renders natively to a terminal, or to the browser — compiled in with dart2js, or streamed live by fleury serve. A shared rendering pipeline, and regression tests that check each target’s output against the same cell buffer, keep them aligned.

Serving & embedding → Fast Development & Debugging

Stateful hot reload on save — rare in a terminal — so a running app picks up your edits in place, state intact. And a debug shell in every dev run: Ctrl+G for frame timings, paint-flash, the live semantic tree, logs and errors — right there, even over SSH.

Hot reload →

Read the full case for Fleury — and how it compares →

Start building

Getting started Install the CLI, create a project, and run your first app in a few minutes.

Tutorial: a filterable list Build a small interactive app end to end: state, a text input, live filtering, and layout.

Guides Task-focused guides to layout, state, input, testing, and shipping, most with live examples.

Widget reference Every widget by category, with API tables generated from source and live demos for most.

Write Dart. See it run.

This one is yours to change. Edit the greeting, make the button count by two, or add a widget, then press Run. Edit again and Hot reload keeps your count. For a full-page editor, open Fleury Pad.

hello_fleury.dart

Restart Run Expand

You write · editable Revert Format

import 'package:fleury/fleury_core.dart';

class HelloFleury extends StatefulWidget {
  const HelloFleury({super.key});

  @override
  State<HelloFleury> createState() => _HelloFleuryState();
}

class _HelloFleuryState extends State<HelloFleury> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    final colors = context.colors;
    return Container(
      border: const BoxBorder(),
      padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 1),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Hello, Fleury!',
            style: CellStyle(foreground: colors.primary, bold: true),
          ),
          const SizedBox(height: 1),
          Text('Pressed $count ${count == 1 ? 'time' : 'times'}'),
          const SizedBox(height: 1),
          Button(
            text: 'Press me',
            autofocus: true,
            onPressed: () => setState(() => count++),
          ),
        ],
      ),
    );
  }
}

Your app

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand

See it in action

Featured apps, each built only from Fleury widgets and running live in your browser. Open one and drive it with your keyboard and mouse.

System monitor An htop-style live dashboard: per-core CPU gauges, a streaming history chart, memory/IO meters, and a live process table.

Coding agent A streaming coding-agent session: prose, tool cards, a live todo list, a colored diff, and a prompt box.

File manager A two-pane file explorer over an in-memory project, with a preview that adapts to each file type — code, Markdown, JSON.

Interactive CLI commands Project setup below the shell prompt: an editable form, configuration review, and a clean return to the command line.

Browse the widget reference Charts, meters, tables, trees, document viewers, and agent surfaces — with live examples across the main widget families.

How it works

One widget tree, two surfaces rests on a retained-mode engine: it turns your widgets into cells and paints them wherever you point it — a terminal, a browser, a streamed session. These two pages walk the whole pipeline.

Architecture The retained four-tree pipeline, the platform-neutral core, and the targets that paint a cell grid to a terminal or a browser.

Serving & embedding The two browser paths: a client-side dart2js bundle, or a local preview of a native app with fleury serve.