Skip to main content
The Visual Editor lets you edit your site like you’d edit a slide deck — click an element, change its properties, see it update instantly. Under the hood, every change writes real code.

​
Enable Visual Editor Mode

1

Open a project

From your dashboard, click the site you want to edit.
2

Click the Visual Editor toggle

In the editor toolbar, click the Visual icon (a cursor). The preview becomes interactive.
You can switch between Visual, Code, and Designer modes any time. They all edit the same files.

​
Selecting Elements

Click any element in the preview to select it. The selected element shows:
  • A blue outline around the element
  • A breadcrumb at the top showing the element’s position in the tree (e.g., section > div > h1)
  • The Style Inspector on the right with editable properties
To select a parent, click the parent name in the breadcrumb. To select a child, click deeper into the element.

​
The Style Inspector

The right panel groups properties into sections.

​
Typography

  • Font family — pick from installed fonts or add a Google Font
  • Size — rem, px, or use preset scale (xs, sm, base, lg, xl…)
  • Weight — 100-900
  • Line height, letter spacing, text align

​
Spacing

  • Margin — visual box around the element
  • Padding — visual box inside the element
  • Click any side individually, or shift-click to set all four at once

​
Layout

  • Display — block, flex, grid, inline, etc.
  • Flexbox controls — direction, justify, align, gap
  • Grid controls — columns, rows, gap

​
Colors

  • Text color, background, border
  • Pick from theme tokens (primary, secondary, etc.) or use a custom hex

​
Borders & Shadows

  • Border width, style, radius
  • Box shadow presets and custom

​
Editing Text Inline

Double-click any text to edit it in place. Press Enter or click outside to commit.
Inline text edits write directly to the JSX/HTML source — your changes persist across refreshes.

​
Drag-and-Drop Components

Hiveku ships with a Component Library of ready-made sections.
1

Open the Components panel

Click the + icon in the toolbar to open the library.
2

Browse or search

Sections are grouped by category: Hero, Features, Pricing, Testimonials, CTAs, Footers, and more.
3

Drag onto your page

Drag a section onto the preview. Drop zones highlight as you hover.
4

Customize

Once dropped, click any element inside the section to restyle it or replace the text and images.

​
Every Change Is Code

Unlike most page builders, Hiveku’s Visual Editor isn’t a separate mode with its own data. It directly edits your source files.
A drag-and-drop adds real JSX/HTML to the source file. You can open the Code Editor afterward to see and tweak it.

​
Undo & Redo

  • Cmd+Z (Mac) or Ctrl+Z (Windows) — undo
  • Cmd+Shift+Z — redo
Undo works across all edit types — text, style, drag-drop, everything.

​
Verifying Your Changes

After editing visually, switch to the Code Editor to see the updated source. The class list, structure, and content should all match what you see in the preview.
If something looks right in Visual mode but weird in Code, that’s a signal the Visual change wrote something odd. Ask the AI to clean it up.

​
Troubleshooting

Make sure the file saved — look for the dot next to the filename in the tab (saved = no dot). If Visual Editor hasn’t committed, press Cmd+S to save and retry.
The element might be wrapped by an overlay or a parent with pointer-events: none. Click the parent in the breadcrumb, or right-click and choose Select child. You can also select it from the layers panel on the left.
The Style Inspector has responsive tabs — Mobile, Tablet, Desktop. Make sure you’re editing the right breakpoint. If you set a desktop size that doesn’t scale down, switch to Mobile and adjust there.
Some component library sections assume theme tokens your site doesn’t have (primary color, custom fonts). After dropping, click the section and restyle with your theme, or ask the AI: “Restyle this section to match my brand.”
Visual Editor undo is scoped to the current session. For older changes, open Version History in the top bar and restore a snapshot.

​
What’s Next?

Import from Figma

Turn a Figma frame into code

Build with AI

Describe what you want, let the AI build it