Examples · Video editor
A full-window video editor: 13 lines of AppSPEC
A desktop video workspace with a media bin, preview transport, clip inspector, filters and a multi-lane timeline. Trim, split, reorder, undo and export a local edit.
Running live in the sandbox with fixed demo data. Anything you add is saved in this browser; nothing leaves your device.
The state graph
1 screen, 0 wires
Screens are nodes and WIRE labels are edges. Screens in blue appear in the navigation; orange edges write a record on the way.
How it works
Walking through the spec
01Screens are states
1 screens, each a <STATE>. edit appear in the navigation because they carry a NAV label. Children lay themselves out by containment: ROW, COL and GRID arrange them, and everything else stacks.
<STATE ID="edit" NAV="Editor" ICON="clapperboard">02Screens connect by label
This app needs no <WIRE>: navigation comes from NAV labels, and its buttons call component actions directly, such as player.play({id}) or paint.keep(sketches).
03Data flows through the key-value pipe
Every input publishes its value into the pipe under its ID, and every screen can read the pipe with {placeholders}. The pipe drives filtering and display; no wire writes a record.
04One attribute sets the look
THEME="obsidian-blue" sets every colour, radius and typeface. Change the word and the whole app restyles; all 31 themes work with every component.
<APP ID="framecut-video-studio" NAME="Framecut" THEME="obsidian-blue" LAYOUT="desktop">Convention over configuration
What the engine infers
Every attribute this spec leaves out has a default inferred from names, data and context. These are the ones this app relies on; writing any of them out would override it.
What this would typically take
The pieces a conventional stack needs
A typical implementation of the same app assembles these parts, each with its own code, libraries and configuration. The size depends on the team and the tools, so we do not quote a number for it.
Here the same app is one 13-line document built from general-purpose components: COLLECTION, VIDEO-EDITOR.
| Media workspace | Media thumbnails, preview transport and a clip inspector. |
|---|---|
| Timeline editing | Clip selection, trimming, splitting, reordering, zoom and playhead state. |
| Local export | Edit decision list and silent local WebM rendering. |
| Build tooling | A media player, timeline engine, persistence and responsive application layout. |
The full specframecut-video-studio.appspec · 13 lines
<?xml version="1.0" encoding="UTF-8"?>
<APP ID="framecut-video-studio" NAME="Framecut" THEME="obsidian-blue" LAYOUT="desktop">
<DATA MODE="local">
<COLLECTION ID="clips">[
{"id":"city","title":"City in motion","src":"media/video/city.webm","duration":3,"thumb":"media/covers/cover-2.svg","category":"Establishing"},
{"id":"forest","title":"Forest light","src":"media/video/forest.webm","duration":3,"thumb":"media/covers/cover-4.svg","category":"Nature"},
{"id":"studio","title":"Studio geometry","src":"media/video/studio.webm","duration":3,"thumb":"media/covers/cover-6.svg","category":"Abstract"}
]</COLLECTION>
</DATA>
<STATE ID="edit" NAV="Editor" ICON="clapperboard">
<VIDEO-EDITOR ID="framecut-demo-v2" SRC="clips" />
</STATE>
</APP><APP ID="framecut-video-studio" NAME="Framecut" THEME="obsidian-blue" LAYOUT="desktop">
<DATA MODE="local">
<COLLECTION ID="clips">[
{"id":"city","title":"City in motion","src":"media/video/city.webm","duration":3,"thumb":"media/covers/cover-2.svg","category":"Establishing"},
{"id":"forest","title":"Forest light","src":"media/video/forest.webm","duration":3,"thumb":"media/covers/cover-4.svg","category":"Nature"},
{"id":"studio","title":"Studio geometry","src":"media/video/studio.webm","duration":3,"thumb":"media/covers/cover-6.svg","category":"Abstract"}
]</COLLECTION>
</DATA>
<STATE ID="edit" NAV="Editor" ICON="clapperboard">
<VIDEO-EDITOR ID="framecut-demo-v2" SRC="clips" />
</STATE>
</APP>