Edit your pages visually in the browser. Click elements to select them, change properties and styles in a side panel, double-click text to edit inline, or ask the AI to make changes for you. Everything saves directly to your source files.
lumenjs dev --project ./my-app --editor-mode
That's it. Open your app in the browser and start clicking things.
1. During compilation, a Vite plugin annotates every element with data-nk-source attributes that map back to the source file and line number
2. Hover over any element. A highlight box shows its boundaries
3. Click to select. A properties panel slides in from the right
4. Edit an attribute or style value. The editor parses the source file's AST, applies the change, and writes it back. HMR picks up the change instantly
5. Double-click text to edit it inline, right in the page. When i18n is configured, the edit updates the translation JSON file instead of the template
Select any element and the panel shows everything you can edit:
| Section | What it shows |
|---|---|
| Tag | The element's tag name and source file path (clickable) |
| Attributes | All HTML attributes. Edit values inline, add new ones |
| Styles | Inline styles and matching CSS rules from the component stylesheet |
| AI | "Ask AI about this element" button that opens the chat |
Changes go through the AST service. It modifies the TypeScript source without breaking formatting, template literals, or decorators.
Click "Ask AI about this element" in the properties panel. A chat bubble appears next to the selected element. Type a request or pick a quick action:
| Quick Action | What it does |
|---|---|
| Improve text | Rewrites the text content to be more professional |
| Animation | Adds a subtle CSS animation |
| Responsive | Makes the element adapt to mobile |
| Dark theme | Converts to a dark color scheme |
| Spacing | Improves padding and margins |
| Simplify | Cleans up the element code |
The AI reads the component source, streams a response, and applies changes live. You can roll back the last AI turn if the result isn't right.
Select multiple elements and the AI gets context-aware actions like "Make consistent" and "Align".
The visual editor supports two AI backends. It auto-detects which one to use, or you can set the AI_BACKEND environment variable explicitly.
Uses the Claude Code CLI via the Claude Agent SDK. Works with a Pro or Max subscription — no API key needed.
Setup:
# 1. Install Claude Code CLI npm install -g @anthropic-ai/claude-code # 2. Log in (opens browser) claude login # 3. Install the SDK in your project npm install @anthropic-ai/claude-agent-sdk # 4. Start the editor — Claude Code is auto-detected lumenjs dev --editor-mode
To force Claude Code even if other backends are available:
AI_BACKEND=claude-code lumenjs dev --editor-mode
Uses the OpenCode coding agent server. Configure it with DeepSeek, OpenAI, Anthropic API, or any LLM provider supported by OpenCode.
Setup:
# 1. Install OpenCode npm install -g opencode # 2. Start the OpenCode server in your project directory opencode serve # 3. In another terminal, start the editor lumenjs dev --editor-mode
Configure the connection with environment variables:
| Variable | Default | Description |
|---|---|---|
OPENCODE_URL | http://localhost:4096 | OpenCode server URL |
OPENCODE_SERVER_PASSWORD | empty | Bearer token if server requires auth |
AI_BACKEND | auto | Set to opencode to force this backend |
If AI_BACKEND is not set, the editor checks in this order:
1. Claude Code — if the Agent SDK is installed and the CLI is logged in
2. OpenCode — fallback (connects to localhost:4096)
The toolbar includes a file panel. Browse pages/, components/, and api/ directories, open any file, and edit it with syntax highlighting. All without leaving the browser.
The editor runs in two modes:
Standalone: run lumenjs dev --editor-mode and open directly in the browser. You get the full overlay: floating toolbar, properties panel, file browser, and AI chat.
Embedded: the app loads inside an iframe in the Nuraly Studio. The editor communicates with the host via postMessage and the Studio provides its own panel UI around the iframe.
Toggle preview mode from the toolbar to interact with the page normally: click links, submit forms, scroll, without accidentally selecting elements. Toggle back to resume editing.
| Key | Action |
|---|---|
Escape | Deselect current element |
Double-click | Inline-edit text content |
Enter | Confirm inline text edit |
The editor is a set of plain DOM overlays (not Lit components) injected on top of your app. The selection box, hover highlight, toolbar, and panels are rendered outside the component tree so they never interfere with your app's layout or shadow DOM.
Source mapping works because the vite-plugin-source-annotator adds data-nk-source attributes during dev compilation. When you select an element, the editor reads these attributes to know which file and line to modify. The AST service then parses the TypeScript source, locates the exact node, and applies the change.