Pre-release · AGPL-3.0
Edit your prototype where you see it.
Desde is a local editor that turns a click on your running app into a real edit in your source files, routed through your design system rather than around it. Plus a self-hosted viewer that wraps a built prototype in async review.
Vue 3 and React · Vite, Nuxt, React Router, Next.js · runs on your machine
Two programs
One for making changes. One for getting feedback.
They share a source-mapping layer and a comment model, but they do different jobs. You use them at different moments, not at the same time.
Editor
Author
It starts your own dev server and opens a workspace around it. Click any element to inspect it, change a prop, move it, delete it, or ask an agent for something fuzzier. Every change writes your real source files immediately. Your git is the save button.
- Runs on localhost, against your repo
- Deterministic edits, with no model in the common path
- Branch, commit and publish without leaving the app
Viewer
Review
One Node process you host yourself. Connect a GitHub repo, it builds the prototype and serves it with a review layer on top: click-to-pin comments, replies, mentions and email notifications. State is SQLite and a directory on disk. There is no cloud dependency.
- Self-hosted; your prototypes never leave your network
- Comments anchor to elements, so they survive layout changes
- Builds from a push, with live logs
How it works
No canvas. No export step. No second copy of your app.
The thing you are clicking is your application, running normally. Desde only adds a layer on top of it.
01
It wraps your dev server
Desde loads your own config and starts your dev server through it, whether that is Vite, Nuxt, React Router or Next.js. Your plugins, aliases and HMR keep working. Nothing is forked, and nothing is written to disk.
02
It maps pixels back to source
A plugin stamps each element with the file, line and column that produced it, at serve time only. Clicking in the browser resolves to an exact position in your source.
03
It edits the file, not the DOM
The change is applied by re-parsing the source and splicing the new value in at that position. Your file changes, HMR re-renders, and the diff is one you would have written.
The difference
It edits in your design system's vocabulary.
Desde reads your component library's own type definitions and builds a manifest of every component and prop. So when you click the label on a button, it knows that text came from a prop, and changes the prop.
That is the difference between a prototype that stays inside the design system and one that slowly fills up with one-off overrides. Nothing to author by hand: the manifests come from the library you already installed.
What a generic visual editor does
<KButton class="pt-override-3f9">
Save changes
</KButton>
/* + 4 lines of new CSS */What Desde does
<KButton appearance="primary" size="large">
Save changes
</KButton>Where it actually is
An honest status, because you are going to find out anyway.
Desde is used daily by its author against a real prototype. It is not yet a packaged product, and the documentation says so wherever it matters.
What works today
- Inspect, edit props and text, move, delete and insert, deterministically
- Vue 3 single-file components and React JSX, on Vite, Nuxt, React Router or Next.js
- Component manifests extracted automatically from installed libraries
- Branch, commit, squash-publish, and per-edit undo
- Self-hosted viewer with builds, comments, mentions and machine tokens
What is early
- Nothing is published to npm yet, so both programs run from a source checkout
- Astro is off by default; webpack, SvelteKit, Svelte and Angular are not supported
- The Editor is single-user, on one machine
- The screenshot-flow canvas is built but off by default
- The Viewer has not yet been run by a team other than its author
Point it at a repo.
If you have a Vue 3 or React prototype that already runs, the editor quickstart takes about fifteen minutes.
node editor-cli/bin/desde.mjs ~/code/my-prototype