Visual Editor

The visual editor is an opt-in browser tool that lets you inspect and edit your running app without leaving the browser. It sits entirely within the dev server — nothing is shipped to production unless you explicitly enable it there.

Enabling the editor

Add an editor block to davaux.config.ts:

// davaux.config.ts
import { defineConfig } from 'davaux/config'

export default defineConfig({
  editor: {
    enabled: true,
  },
})

Once enabled, a floating badge appears on every page served by davaux dev. The editor is never exposed in production builds (davaux build / davaux static).

Opening the editor

There are three ways to open the full-screen visual editor:

• Click the Inspector badge in the corner of any page, then click Open Editor
• Press Ctrl+Shift+E anywhere on the page
• Navigate directly to /_davaux/editor?page=/your-path

The editor opens in a dedicated browser tab showing a live iframe preview of your app alongside the editing panels.

Editor layout

The editor is divided into three columns:

Inspect mode

Click the ⌖ Inspect button in the toolbar (or press I) to enter inspect mode. Your cursor changes to a crosshair. Clicking any element in the preview selects it and opens its details in the right panel. The corresponding node in the OML tree is also highlighted.

Component details

When you select a JSX component, the details panel shows:

• The component name
• All current props with editable inputs (strings, numbers, booleans, JSON objects)
• A text area for editing simple text children
• Edit Children — opens a source editor for the component's JSX children when they are more complex
• Optional props surfaced from the component's blueprint schema (see Blueprints)
• Save changes — writes the updated props back to the source file

You can also Move up / Move down the component within its siblings, or Remove it from the page entirely.

Element details

Selecting a plain HTML element shows its tag, attributes, and inline styles. You can:

• Edit any attribute value and save it back to source
• Edit simple text content inline
• Open a JSX children editor for elements with nested content
• Adjust element styles from a grouped panel of common CSS properties (typography, spacing, background, border, layout) with live preview
• See and edit CSS custom properties defined on :root in your stylesheet

Saving element changes writes the updated attributes or styles back to the source file.

Source editing

The toolbar exposes two source editing flows:

Edit Source — opens the current page's .tsx (or .mdx) file in a full CodeMirror editor with TypeScript/TSX or Markdown syntax highlighting and Ctrl+Z undo history.

Layout buttons — if the current page is wrapped by one or more layouts, each layout appears as a button in the toolbar (e.g. ♰ routes/_layout.tsx). Clicking one opens that layout file in the same source editor.

Press Escape or click the backdrop to close the source editor. Saving writes directly to disk and the dev server's file watcher picks up the change.

Blueprints

Blueprints are reusable component templates. You can save any selected component as a blueprint via the → Blueprint button in the details panel.

The Components tab in the left panel lists all discovered blueprints. Selecting one shows:

• A live JSX preview
• Editable prop values
• A Copy JSX button
• An Insert into page button that appends the component after the currently selected element

Blueprints are stored as JSON files in .davaux/blueprints/ and can be committed to version control.

Configuration reference

All editor options live under the editor key in davaux.config.ts:

export default defineConfig({
  editor: {
    enabled: true,

    badge: {
      position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
      label: 'Inspector',       // custom badge text
    },

    theme: 'auto',   // 'auto' | 'dark' | 'light'

    css: `
      /* raw CSS injected into the editor frame */
      :root { --dvx-bg: #0a0a0f; }
    `,
  },
})

Keyboard shortcuts