The canvas
Select, drag and type on the page itself. Every action is an edit to the document, with a hundred steps of undo. Motion holds still here, so you design the finished frame.
Sites written in a language, compiled to the web.
The Stacklumen Design Language, SDL, is the typed, versioned document every Terminal site is stored in. The canvas, the code view, repository imports and agents all write to it; Preview and publishing compile it. We designed it, and we build everything that reads and writes it.
Comes in
Translated once
The document
One compiler
Goes out
- The canvas Select, drag, type
- Code beside it HTML and CSS
- A repository Read, never run
- Agents Over MCP
- Templates And the library
SDL document Versioned
- Pages
- Sections, elements
- Styles
- Breakpoints, states
- Variables
- Light, Dark, modes
- Components
- Props
- Content
- Collections
- Motion
- Interactions, states
- Custom code
- Embeds, sandboxed
- The canvas Holds still
- Preview Runs, sandboxed
- Published site Static pages
- GitHub Files, pull requests
- Design tokens CSS and JSON
The canvas edits a document. Not a pile of code.
Every panel in the designer reads and writes the same document, so the canvas, the inspector, the code view and everyone else in the site always agree.
The inspector
Style one element, a class or a combination of classes, at any breakpoint and in any state. Styles cascade down from Desktop.
Classes and variables
Reusable classes, and named colours, sizes and fonts with Light, Dark and modes of your own.
Components
Save a section once and every placement follows your edits. Props let one placement differ without unlinking it.
Code beside the canvas
The page as HTML and its styles as CSS. What you type becomes the same edits the canvas makes, with the same undo.
Together, live
Everyone in a site edits the same document at once. Changes travel field by field, so two people on different things never overwrite each other.
Preview
The page as publishing renders it, with interactions, motion, dark mode and forms running, in a sandboxed frame.
Publish
The saved document becomes static pages, served as a snapshot. Recent deployments are kept, and any of them can be restored.
One document per site. Every field typed.
A Terminal site is not a folder of files. Everything the designer shows is a field in one document, and everything that ships is compiled from it.
- Pages, sections, elements
- A tree of typed elements. Each one comes from a fixed set the language knows, carrying only the attributes that set allows.
- Styles
- Classes and element styles held as data, with values per breakpoint and per state: hover, focus and active.
- Variables and modes
- Named colours, sizes, fonts and more, with Light, Dark and custom modes, and aliases from one value to another.
- Components
- A definition placed many times, with props for what each placement may change.
- Content bindings
- Lists and item pages bound to collections, so a page fills from the CMS when it renders.
- Motion
- Interactions with their triggers, targets and timing, hover, focus and active states, transitions, and the site’s keyframe animations as tables of stops.
- Scripts
- A site’s own scripts, each kept on the element or page it belongs to, with when it runs and the elements it drives.
- Custom code
- Embedded HTML and CSS, with any script it carries, held as one element you can place, reuse and edit.
- Page settings
- Paths, titles, descriptions and share cards, so every page arrives ready for search.
Motion is part of the page. Still while you design.
Interactions, states and scripts belong to the element they act on, set in the inspector. They travel with it wherever it goes: a copy, a component, a publish.
Interactions
A trigger — a click, a hover, the page loading, or an element scrolling into view or past — and an effect on one element or many: show, hide or toggle it, toggle a class or an attribute, play an entrance or an animation, scroll to it or follow a link. Menus and panels close on Escape, a click outside or a link, and can take turns in a group.
Entrances
Fades, slides from any side, scales and pops, each with its own duration, delay and easing, and staggered across a set. Run one once or every time, and reverse a hover when the pointer leaves.
States and transitions
Hover, focus and active styles for an element or a whole class, eased by transitions you set in the inspector.
Keyframe animations
A site’s keyframe animations, written by hand or brought in by an import, are tables you edit stop by stop, each stop with its own easing. The inspector shows where each one plays on the page, including those tied to scrolling.
Where each one runs
| On the canvas | In Preview | On the published site | |
|---|---|---|---|
| Entrances | Not played, so you see the element as it settles | Play | Play, and appear at once for visitors who ask for less motion |
| Keyframe animations and transitions | Held still, so you design the finished page | Play | Play |
| Interactions | A click selects; nothing triggers. A closed panel opens while you select it | Run | Run |
| Scripts | Listed and edited in the inspector, never run | Run in a sandboxed frame | Run with the page |
| Custom code | Drawn in a frame with its scripts switched off | Runs in a sandboxed frame | Runs with the page |
One compiler. Many outputs.
What leaves Terminal is compiled from the same document, so Preview and the live site agree, and a file in a repository says what the canvas says.
Live
The published site
Static pages, collection item pages and a sitemap, minified, with fonts and the first image loaded early. Served as a snapshot you can roll back.
Live
Preview
The same build in a sandboxed frame, before anything is live, at any width and in any mode.
Live
Files on GitHub
A push writes the site’s pages as HTML and its styles as CSS to a linked repository, as one commit.
Live
Design tokens
Variables leave as CSS custom properties or design-token JSON, every mode included.
In progress
Framework exports
The same document emitted as a component project for the common frameworks, with its tokens beside it.
Bring a codebase in. Send your edits back.
Link a repository and import its pages. They land as native SDL: sections you can select, text you can retype, classes you can restyle.
-
Read
Pick the pages you want. The repository is read from GitHub, in one download when that is quicker, and only the files those pages use are kept. Nothing in it is built or run, and each stage shows as it goes.
-
Compare
When the repository names its website, each page is checked against what that site serves, so the words that land are the words visitors see.
-
Translate
Pages, layouts and components become sections and elements. Styles land in the site’s stylesheet, content folders become collections, and images move into Assets.
-
Keep the motion
Keyframe animations, transitions and hover styles come across, and utility classes are compiled to plain CSS. Accessible menus and tabs and common scroll reveals become native interactions, and the site’s own scripts come in as scripts you can read and edit.
-
Propose it back
Edits to pages read from source go back as a pull request: the smallest change to the file and line each element came from.
What the import could not bring in, such as a script too large to carry, is listed in its report with the file it came from.
Safe by construction. Not by review.
The language decides what a page can hold, so whatever arrives, from a person, an import or an agent, passes through the same rules.
- An allowlist, not a blocklist
- A document holds only the elements and attributes the language defines. Inline event handlers are never among them.
- Custom code stays out of the editor
- On the canvas, embedded code is drawn in a frame with its scripts switched off, and a page’s scripts are only listed in the inspector. Scripts run only in Preview’s sandboxed frame and on the published site, never in a site card’s thumbnail.
- A sandboxed Preview
- Preview renders in a frame with no access to the editor, your session or your workspace. Staging links serve under a sandbox policy too.
- Interactions change state, not code
- An interaction can show, hide, toggle a class or an allowed attribute, animate, scroll or follow a link. It cannot add a script or an event handler to the page.
- Clean drawings
- Imported SVG is cleaned as it comes in, so a drawing cannot carry script.
An older document Migrated forward, one revision at a time Opens in today’s designer
A newer document Refused by an older designer, never rewritten
How we handle your data, sign-in and hosting is on the security page.
Designed and built here. Every layer of it.
The language, the compiler, the runtime, the importer and the editor are designed and built by Stacklumen. Your editable source stays in your workspace on our servers; what ships to visitors is compiled output.
- The language
- A typed, versioned document format, with a migration for every revision.
- The compiler
- Turns a document into Preview and the published pages, minified and ready to serve.
- The runtime
- The small script that plays interactions, entrances and forms on a published page.
- The importer
- Reads a repository’s pages, styles, scripts and content without running any of it.
- The editor
- The canvas, the inspector, the code view and live editing, all writing the same document.
The full schema is not published. Agents edit a site through a documented set of operations, the same edits a person makes, and the library installs only into a workspace entitled to it.
Still being built
See the language at work.
Open Terminal and start a site, or link a repository and watch its pages land as something you can edit. The documentation covers every panel.