Direct manipulation
Select any element on the page and change it. Move, resize, restyle, and reorder without editing markup by hand.
Learn moreLumen is a desktop application for building websites visually. You edit the page exactly as it appears in a browser, and the app produces standard HTML, CSS, and React files that you keep and edit anywhere.
Used by design teams at
Lumen covers layout, styling, assets, versioning, and export. Each feature produces files you can open in another editor.
Select any element on the page and change it. Move, resize, restyle, and reorder without editing markup by hand.
Learn moreThe exporter writes standard HTML and CSS, or React with Tailwind. Files contain no runtime library added by Lumen.
Learn moreSet direction, alignment, gap, and track sizes through the inspector. Breakpoints are edited per element, not per file.
Learn moreDefine colors, type scales, spacing, and shadows once. Every element that references a token updates when the token changes.
Learn moreEach save creates a restore point stored locally. Compare two versions side by side and revert a single element instead of the whole page.
Learn morePublish a read-only preview. Reviewers comment on specific elements, and comments appear in the app the next time it connects.
Learn moreThree stages, one file. Nothing is stored in a private format, and you can leave at any point with working source files.
Lumen draws pages with the same rendering engine used by Chrome and Edge. Fonts, media queries, hover states, and transitions behave as they will in production.
Export writes to a folder you choose. Class names come from the layer names you set, and the CSS is scoped per component. There is no lock-in step and no build tool you must install.
// generated by Lumen · section.hero import { tokens } from "../styles/tokens.css"; export function Hero({ title, lede, cta }) { return ( <section className="mx-auto flex max-w-[1180px] flex-col gap-6 px-6 py-24 text-center"> <h1 className="text-6xl font-extrabold leading-[1.08] tracking-tight">{title}</h1> <p className="mx-auto max-w-prose text-lg text-neutral-500">{lede}</p> <a href="#start" className="btn-primary">{cta}</a> </section> ); }
Lumen includes direct publishing to Netlify, Vercel, an SFTP host, or a local folder. A build runs first and reports the file count, total weight, and any failed check.
Point Lumen at a project on your computer. It reads the HTML, CSS, and component files, shows them on the canvas, and writes changes back to the same files.
240 templates ship with the app. Each one is built from real components, uses tokens for color and type, and exports to the same formats as your own work.
There is no browser version. Running on the desktop is what allows Lumen to read and write project folders, use installed fonts, run the Chromium renderer locally, and keep working without a network connection.
Plans are billed per seat. Every plan includes the full desktop app, all templates, and all export formats.
For one designer working on personal or client projects.
For small teams shipping client work on a schedule.
For companies that need access control and invoicing.
Prices in USD, excluding tax. A perpetual license for the current major version is available for $240 per seat.
I stopped writing layout CSS. I build the page in Lumen, export the React components, and continue in VS Code when I need logic. The exported code is close to what I would have written.
We deliver brochure sites in two days instead of two weeks. Clients open a review link and comment on the actual page, which removes a round of screenshot annotations.
We audited the output before adopting it. The CSS was small, selectors were flat, and nothing referenced a Lumen runtime. That audit is the reason we bought 22 seats.
No. Lumen is a desktop application for Windows 10 and 11. Project files are stored on your computer, and editing works without an internet connection. A macOS build is in testing.
HTML with a single CSS file by default, or React components with Tailwind CSS or CSS Modules, Vue single-file components, and Astro pages. Exported files contain no Lumen runtime and no build step of their own.
Yes. Open a folder and Lumen reads the HTML, CSS, and component files it recognises, then writes changes back to those files. Code it did not generate is left untouched unless you mark it as editable.
Yes. Fonts load from your system folders, from local files, or from a font service URL. Images and videos are imported from disk or a URL, resized on export, and written to an assets folder with relative paths.
The app checks for updates at start and installs them in the background. An active plan covers every release. A perpetual license covers the major version you bought, with paid upgrades for the next major version.
There is a 14-day trial with every feature enabled and no account required. After the trial a license key is needed to export files. Projects created during the trial stay on your computer and open again after you license the app.
Install the app, open a folder or a template, and build your first page. The trial lasts 14 days and needs no account.