vibedit

vibe edit AI-generated HTML.

An AI just generated a beautiful HTML page or slide deck for you. You want to recolor one thing, fix a typo, swap an image, make the cards two columns. The usual move: reprompt the model and pray. vibedit opens the artifact in a click-to-edit canvas — tweak it like a designer, ask the model only when you actually need structural help, then download a single self-contained .html back out.

No accounts. No backend. Local-first. The whole UI is vanilla TypeScript + plain CSS; the runtime is ~9.6kb gzipped JS so you can read the whole repo in one sitting.

stop reprompting. just vibedit it.

Run it

npm install
npm run dev

Open the URL Vite prints (usually http://localhost:5173).

Build a production bundle (single static page, no backend):

npm run build

How to vibedit

1. Drag an HTML file onto the canvas (or use Open… / Paste HTML).
2. Hover to see element outlines. Click to select. Walk up the breadcrumb to grab a parent.
3. Inspector panel does the small stuff: text color, background, font size, bold, alignment, padding, margin, hide, delete.
4. Double-click to edit text in place. Blur to commit.
5. Selected an <img>? The Image panel swaps it for a local file (inlined as base64, so saving stays one file) or a URL.
6. Anything bigger — "make this two columns", "warmer palette", "shorten this paragraph" — type it in Ask AI and hit Send.
7. Cmd/Ctrl+Z to undo, Cmd/Ctrl+Shift+Z to redo, Esc to deselect, Delete to remove the selection.
8. Save .html downloads a single self-contained file. Copy HTML puts it on the clipboard.

Decks (a single HTML file where each slide is a top-level <section> or full-viewport container) get a filmstrip for prev/next + duplicate-slide.

Generating vibedit-ready files

vibedit edits any HTML file, but it's happiest with input that follows a few light conventions (single file, semantic structure, no external CDNs). Copy a generation prompt from inside the app's empty state ("Copy slide-deck prompt" / "Copy landing-page prompt"), or grab the same text from PROMPTS.md. Paste into your AI of choice and you'll get a file that opens, edits, and saves cleanly.

Bring your own key

Open the Settings section in the side panel, paste your Anthropic API key, fill in a model ID, and Save. The key sits in localStorage only — never leaves your browser except in the direct Messages API request you trigger. Use Clear key to remove it.

The browser-direct call sends:

Header	Value
x-api-key	your key
anthropic-version	2023-06-01
anthropic-dangerous-direct-browser-access	true
content-type	application/json

You can override the endpoint (e.g. point it at a local proxy or any Messages-API-compatible model).

Verify

Each milestone has a headless-Chrome verification script. Start npm run dev in one terminal, then in another:

npm run verify        # round-trip: a script-heavy artifact survives save → reopen → JS still runs
npm run verify:app    # same, but driven through the live editor via CDP
npm run verify:dod    # full DoD: edits + ask-ai (mocked) + deck + reopen

Per-milestone checks: verify:m1 … verify:m6 under scripts/. verify:m5 and verify:dod stand up a local mock matching the Messages API contract — no real key required.

The one load-bearing idea

The rendered DOM is the source of truth. Every edit mutates the live DOM in a same-origin iframe; Save just serializes that DOM back to a file. We never reverse-engineer the original source, never run an AST, never write a CSS formatter. Slightly messy inline styles in the output are completely fine — these artifacts are share-once, not long-lived codebases. This is the move that sidesteps the round-trip problem that killed every WYSIWYG HTML editor before us (GoLive, FrontPage, Muse, Dreamweaver design view): they all tried to keep generated source pristine and broke on anything real.

Explicit non-goals (please do not PR these)

• No accounts, login, cloud sync, hosting, or publishing.
• No "clean code" / refactoring / code-formatting of the output. Inline styles are fine.
• No framework support for the artifact (it edits raw HTML/CSS/JS; it does not understand React/Vue components).
• No multi-file projects, no build step for the artifact, no asset management beyond inlining images.
• No drag-to-reposition / free-canvas dragging.
• No real-time collaboration, no version history beyond the in-session undo stack, no design-token/theme system.
• No backend — the optional Ask AI call goes directly from the browser to the configured endpoint with your key.

Security note: the iframe is same-origin by design

The artifact is loaded into a same-origin <iframe srcdoc> so its own <script>s execute (faithful preview) and so vibedit can read and mutate its DOM (the editing primitive). That means the iframe is not a security sandbox — the loaded page could touch this app's DOM. That tradeoff is fine for a local tool editing your own files; do not point vibedit at HTML you do not trust.