Visual Editor

VoxelSite includes a visual editor that lets you click on any element in your page and edit it directly — text, images, styles, and AI-powered section rewrites — without writing code.

Activating the editor

Click the Visual button in the Studio toolbar (top-right, next to Edit and Refresh). The preview iframe enters editing mode:

• Hovering over any editable element shows a blue highlight
• Clicking an element selects it and opens a context toolbar
• The page is live — scroll, resize, and interact normally

Click Visual again (or press Escape) to deactivate.

What you can do

Edit text inline

Select any text element (heading, paragraph, button label, link) and click the Edit action in the toolbar. The text becomes editable right where it is. Type your changes, then click away or press Escape to finish. VoxelSite finds the original text in the PHP source file and saves your change.

Swap images

Select an image and click the Image action. VoxelSite opens the asset picker so you can choose a replacement from your uploaded images.

Edit styles

Select any element and click the Style action to open the style editor panel. The panel uses icon-based navigation to organize style controls into tabs:

Every style change previews instantly on the page — no page reload or server round-trip needed. This is powered by the JIT CSS engine (see below).

Edit with AI

Select any element and click the AI button in the toolbar. A prompt panel appears where you can describe changes in plain language:

• "Make this section warmer with earth tones"
• "Add a third testimonial card"
• "Change this to a two-column layout"
• "Rewrite the heading to be more compelling"

When you submit, the panel closes and an overlay appears directly on the selected element showing generation progress. The AI rewrites the section in the source file, and the preview reloads automatically with the result.

This is the fastest way to make complex changes — instead of manually adjusting individual styles or text, you describe the outcome and the AI handles the implementation.

While the AI is generating, the visual editor is locked — you can't select other elements until the change is complete.

Delete elements

Select any element and click the Delete action. A confirmation dialog appears before the element is permanently removed from the source.

The Style Panel

Icon-based navigation

The style panel uses a row of small SVG icons instead of text tabs. This keeps the panel compact and lets you jump between categories quickly. The active tab is highlighted.

Two-step color picker

Instead of showing all 22 colors × 11 shades at once (242 swatches), the color picker uses progressive disclosure:

1. Choose the property — Switch between Text, Background, and Border using the segmented control at the top
2. Choose a color family — Color families appear as circles showing their 500-shade. Click one to expand it
3. Choose a shade — The selected family expands into a strip of 11 shades (50–950)

Special colors (white, black, transparent) are always visible at the top.

Live preview

Every change you make in the style panel previews instantly on the page. The original classes are preserved until you explicitly click Apply & Compile. If you close the panel without applying or click Reset, all preview changes are reverted.

Responsive breakpoints

Your website looks different on a phone than it does on a desktop monitor. The style panel lets you control exactly how each element looks at every screen size using the breakpoint bar — a row of buttons between the tab icons and the style controls:

[ Base ] [ sm ] [ md ] [ lg ] [ xl ] [ 2xl ]

Each button represents a screen-size range:

How it works

1. Select a breakpoint — Click a button in the bar. All controls in the style panel now show and edit styles only for that screen size.

2. Make your change — For example, set the font size to 4xl while lg is selected. This means "on large screens and up, use size 4xl" — smaller screens are not affected.

3. Check other breakpoints — Click Base to see what mobile visitors get, then click lg to see the desktop version. Each breakpoint is independent.

The dot indicator

When a breakpoint button shows a small amber dot (●), it means the selected element already has styles set specifically for that screen size. This makes it easy to see at a glance which breakpoints have been customized.

How styles cascade

Styles work from small to large — a style set at Base applies to all screen sizes unless a larger breakpoint overrides it. For example:

• Base = text-lg → all screens show large text
• md = text-2xl → tablets and larger show extra-large text instead
• xl = text-4xl → desktops show even bigger text

You don't need to set every breakpoint. Only set the ones where you want the style to change.

Practical tips

• Start with Base — Design for mobile first, then add overrides at larger breakpoints
• Watch the dot — If a heading looks wrong on desktop but fine on mobile, check which breakpoints have dots — the override is there
• Use the Classes tab — Switch to the Classes tab to see the raw class names (like md:text-2xl). This can help you understand exactly what is applied at each breakpoint

Apply & Compile

When you click Apply & Compile, VoxelSite:

1. Updates the element's class attribute in the source PHP file
2. Triggers a Tailwind CSS recompile to include any new utility classes
3. Reloads the preview CSS so the compiled styles take effect

This ensures your changes are persisted and the compiled stylesheet stays in sync.

JIT CSS Preview

VoxelSite includes a Just-In-Time CSS engine that runs entirely in the browser. When you toggle a Tailwind class in the style panel, the JIT engine generates the corresponding CSS rule instantly and injects it into the page — no server call required.

The JIT engine supports:

• Typography — font sizes, weights, tracking, leading, transforms, decorations
• Colors — all 22 Tailwind color families × 11 shades for text, background, and border
• Spacing — padding and margin for all sides, using the full Tailwind spacing scale
• Layout — width, max-width, display, flex direction, alignment, gap
• Borders — border width, radius, style
• Effects — box shadows, opacity
• Responsive prefixes — all of the above work with breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:)

When you apply your changes, VoxelSite compiles the final Tailwind CSS on the server to replace the JIT preview with production-quality styles.

The draggable panel

The style panel can be dragged anywhere on screen using the grip icon (⋮⋮) in the header. This lets you position it wherever is most convenient while editing.

Keyboard shortcuts

How edits are saved

All visual editor changes follow the same save pipeline as AI-generated changes:

1. The visual editor modifies the DOM in the preview iframe
2. VoxelSite extracts the original and new HTML
3. It finds the matching content in the PHP source file (page or partial)
4. The file is updated via the same API used by the AI engine
5. The change is tracked in the revision system — you can undo it

This means visual editor changes integrate fully with undo/redo and snapshots.

Related

• Chat — The AI conversation panel for describing changes in natural language
• Code Editor — Edit source files directly with syntax highlighting and inline AI
• Undo & Snapshots — Roll back any change