AI tools generate 90% of an app from a prompt. Nova is where you do the final 10% by hand —
click an element, tweak its layout, color, and copy, and push clean code back to your repo.
No tokens spent on micro-tweaks, no lock-in, nothing to install. Everything runs in your browser.
Nova is in alpha — expect rough edges, and please send feedback.
5-minute first run
Getting started
1. Sign in. Nova is invite-only during the alpha — enter your invite code, then sign in with the magic link we email you (works on any browser).
2. Open a project. Import from GitHub, a folder, pasted code — or try the sample.
3. Edit visually. Click any element, change it in the inspector, double-click text to rewrite it.
4. (Optional) Ask the AI. Add your own key and let it make larger changes.
5. Ship it.Publish → review the diff → commit, push, or open a PR.
Bring in a project
Importing
Nova opens an existing project. Paste any GitHub URL form and it figures out the rest:
Paste a token in Settings → GitHub to import private/org repos, switch branches, and full-clone to disk.
AI-generated repos
Push your Bolt / Lovable / v0 / Claude app to GitHub, then import it here. Connecting GitHub avoids rate limits on bigger repos.
The visual editor opens .html, .jsx, and .tsx files. A full clone brings every file to disk; CSS/config files aren't editable on the canvas yet.
Set up for the smoothest editing
Recommended project structure
Nova works with whatever layout you have — but a couple of conventions make the canvas, Assets panel, and AI noticeably better. The rule of thumb: keep visual pieces self-contained (so they render on the canvas), and keep assets together (so Nova can find them).
Websites — static HTML / CSS / JS
my-site/
├─ index.html # pages — each opens on the canvas
├─ about.html
├─ assets/ # images, svgs & fonts live together
│ ├─ logo.svg
│ └─ images/hero.jpg
└─ styles/
└─ main.css # one stylesheet, linked from each page
Put media in assets/ (or images/, fonts/) so the Assets panel collects them. Reference them with relative paths and they resolve on the canvas.
Web apps — Next.js or Vite + React
my-app/
├─ app/ # Next.js routes (pages) — preview in Run
│ ├─ layout.tsx
│ └─ page.tsx
├─ components/ # reusable, presentational pieces — edit on the canvas
│ ├─ Hero.tsx
│ └─ Button.tsx
├─ lib/ (or utils/) # non-visual helpers, stores, types
├─ public/ # static assets served at /
└─ package.json # needed for Run (npm run dev/start)
# Vite: index.html at the root, code under src/ (src/components/…)
Pages that use routing, data fetching, or context providers are best previewed with Run (the real dev server). The design canvas shines on components/ — see below.
Components — a reusable library
components/
├─ Button.tsx # one default-exported component per file
├─ Card.tsx
└─ Badge.tsx
• One component per file, with a default export.
• Self-contained: take props with sensible defaults, no data fetching or router/context hooks — that's what lets it render live on the canvas.
• Style with Tailwind classes (or co-located CSS) for the best visual-editing experience.
Why it matters
The canvas bundles one file at a time, so a component that imports only npm packages and other loaded components renders perfectly; one that pulls in stores, server-only APIs, or Next runtime previews live in Run’s Components tab instead — by itself, with the app’s real context. Structuring presentational components apart from app wiring gives you the most that’s directly editable on the canvas.
Visual ⇄ code, always in sync
Visual & code editing
Style & Settings
The right panel has a Style tab (layout, flexbox & grid, spacing, size, typography, backgrounds, borders, effects) and a Settings tab (element ID, link URL, image alt, visibility, custom attributes). Tailwind projects get responsive utility classes.
The code editor
A built-in Monaco editor with autocomplete, two-way synced to the canvas. Right-click a layer → View in code to jump to the line.
Assets
The left panel's Assets tab gathers the images, SVGs & fonts from your project — upload more, then click one to set it as an image source or a background.
Elements
Drag in sections, containers, grids, headings, buttons, links and more from the Components tab — real HTML/JSX, inserted where you drop it.
• Double-click text to edit it in place.
• Switch desktop / tablet / mobile breakpoints; hit Preview to use the page as a visitor.
• Delete removes the selection, Cmd/Ctrl+D duplicates; drag layers to reorder.
Comment, share & co-build
Comments & collaboration
Open the Comments tab in the right panel to leave feedback pinned to the canvas.
Right-click any element — on the canvas or in the layer tree — to drop a comment exactly where you clicked,
and click a comment to jump straight to it.
Pinned comments
Numbered pins appear on the canvas while the Comments tab is open. Resolve, reopen, or delete from the panel; everything syncs live for collaborators.
Roles
Invite people by email from Share. Viewers can look, commenters can comment, and editors get full editing — each in their own account.
• Shared projects appear in each collaborator's dashboard with a role tag, and live in the cloud so everyone stays in sync.
• Viewers & commenters are free on every plan; inviting editors is a Studio-plan feature.
Free on-device, or your own key
AI assistant
Open it with the AI button. It reads and edits your real files — the canvas updates as it works — and your conversation is saved per project.
Nova Lite — free, runs on your device
The default model runs entirely in your browser on your GPU (WebGPU). Your first message downloads it once (~2 GB) into the browser cache; after that it's instant, works offline, and nothing ever leaves your device. No key, no cost. Needs a recent Chrome, Edge, Arc, or Safari 18+, and edits one file at a time — ideal for quick tweaks and questions.
Bring your own key for more power
For bigger, multi-file changes, add a provider key (Settings → AI). An API key is separate from a ChatGPT Plus / Claude Pro subscription — get a developer key from the provider's console. Keys stay in your browser and go straight to the provider, never through a Nova server.
Supported keys: Anthropic, OpenAI, Google, xAI, DeepSeek, Mistral, Groq, and OpenRouter (one key for nearly any model), plus a Custom model ID field. Managed Nova Pro / Studio models — capable, with no key to manage — are coming for paid plans. The assistant edits .html/.jsx/.tsx files, and inspector tweaks always stay free.
Boot the real app in the browser
Running live
Hit Run ▶ in the toolbar and the canvas switches to your live app — the same panels stay put, only the center swaps to the real project, booted in your browser via WebContainers (nothing is uploaded). Click an element in the running app and Nova maps it back to source so you can edit its class or text, with hot reload. Split and Code views work here too. Projects that outgrow the browser tab can run on your own machine instead — see Run on your machine below.
Requirements
A folder-backed full clone (Settings → Storage) on a Chromium browser (Chrome / Edge / Arc). Framework-agnostic — Vite, Next.js, CRA, Astro, Remix, Nuxt, SvelteKit and more (anything with a dev/start script), found even in a subfolder (e.g. app/ of a contracts or monorepo). First boot installs dependencies; reloads after that are fast.
Live layers, pages & components
In Run, the left panel mirrors the running app: Layers is its live DOM tree, Pages lists routes you can jump to, and Components renders any one component by itself in the app frame — with the app’s real providers and CSS.
Environment variables
Set per-project env vars in the Env tab (type them or upload a .env). Nova writes them into the running app’s .env.local so Vite (VITE_…) and Next (NEXT_PUBLIC_…) pick them up. Encrypted in your browser, never sent to a server.
Console & errors
The dev-server output and your app’s runtime errors stream to the Console at the bottom (app errors are prefixed [app]) — so a blank screen tells you why, usually a missing env var.
Run on your machine (bigger projects)
The in-browser runtime is memory-capped by the tab. For larger apps, run the dev server natively at full speed: start the tiny companion agent with npx @nova/runner, paste the token it prints into Settings → Local runner, then switch the runtime menu beside Run ▶ to On your machine. Click-to-edit, layers, pages and component preview all work exactly the same — only execution moves to your machine. Still fully local: the token only ever talks to 127.0.0.1, never a Nova server.
Your Git is the source of truth
Publishing & GitHub
Click Publish to review a clean diff of exactly what changed, then — for connected projects — commit & push or open a pull request (or just download / save to your folder). Pushing triggers your existing Vercel/Netlify deploy; Nova stays out of your pipeline. To pull changes that were pushed elsewhere, use Sync.
Imported vs. connected
Importing a public URL gives you the files; connecting GitHub (a token, in Settings) is what lets you push back or create a new repo.
Sync — pull upstream changes
When the branch moves on GitHub, the footer shows Update available. Hit Sync to pull & merge: remote-only changes fast-forward, your edits are kept, and files changed on both sides get a line-level merge — clean ones auto-merge, the rest open a conflict resolver. Sync never pushes.
Real git with the local runner
With the local runner connected (see Running live), Sync and Publish run as real git pull / commit / push in a real clone on your machine — full history preserved, and a non-fast-forward push is rejected rather than silently overwriting. Without the agent, Nova does the same over the GitHub API. Your token is used straight from your browser, or — with the agent — sent only to 127.0.0.1; never a Nova server.
Local-first by design
Storage & privacy
Projects live in your browser and, optionally, a folder on your disk. Your GitHub token, AI keys, and any env vars you set for Run are encrypted at rest in your browser; keys are sent directly to GitHub / the AI provider — never through a Nova server, and env vars are only ever written into the local in-browser container. The Nova devs never receive your secrets, and the source is open so you can verify it.
Key safety — and its honest limits
Encryption stops casual snooping and scrapers, but no client-side app can fully protect a key from a malicious browser extension or someone at your unlocked device. Best practice: use scoped, revocable keys — a fine-grained GitHub token limited to the repos you edit, and provider API keys with a spending limit you can rotate.
Answers & fixes
FAQ & troubleshooting
Is Nova free?
Yes — the editor is free and runs in your browser, and it includes Nova Lite, a free AI that runs on your own device (no key, no cost). Bringing your own API key or upgrading is optional, for more power.
Do I need an account?
During the alpha, yes — Nova is invite-only. Enter an invite code and sign in with an email magic link. Each member gets 10 invites to share (Settings → Account & invites).
What's cloud sync?
An optional Pro feature: your projects back up to the cloud and sync in real-time across devices and browsers, with offline edits flushed when you reconnect. Everything still works locally without it.
How much does Nova cost?
Free forever for the editor (visual + code editing, run live, GitHub) plus Nova Lite, our free on-device AI. Add your own API key any time for more capable models. Pro is $8/month and adds cloud backup + cross-device sync; Studio adds editor collaborators and the most capable managed AI (no key to manage) — coming soon.
“Rate limit reached (no token).”
Anonymous GitHub requests are limited. Connect GitHub in Settings and re-import.
“No editable .html/.jsx/.tsx files.”
Nova's canvas opens HTML/JSX/TSX. Check the branch, or full-clone to work with the whole project.
The AI errors immediately.
On a bring-your-own-key model: 401 = bad key (re-check in Settings → AI); 429 = rate-limited / out of credit. Make sure the selected provider has a key (green dot in the picker).
Nova Lite won't load.
It needs a WebGPU browser (recent Chrome, Edge, Arc, or Safari 18+) and downloads ~2 GB on first use, cached for next time. On a low-memory GPU it auto-falls back to a smaller model. No WebGPU? Add your own API key and pick another model instead.
Run (▶) won't start.
Run needs a folder-backed full clone on a Chromium browser — set a projects folder in Settings → Storage and re-import. “Missing script: dev” means no runnable web app was found; Nova looks in the root and subfolders (app/, apps/*) for a package.json with a dev/start script.
The live app is blank.
The app booted but crashed at load — open the Console and look for [app] errors. Most often it's a missing environment variable; add it in the Env tab and Save & restart.
How do I set environment variables?
In Run, open the Env tab on the right — type KEY=value lines or upload a .env, then Save & restart. They're stored encrypted per project and written into the app's .env.local.
Which browsers work?
Editing works anywhere modern; folder storage and Run need a Chromium browser (Chrome / Edge / Arc).
Still stuck? Nova is in alpha — please send feedback so we can fix it.