> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Edit Your Site Visually

> Make changes by clicking directly on elements in the preview

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

<Steps>
  <Step title="Open a project">
    From your dashboard, click the site you want to edit.
  </Step>

  <Step title="Click the Visual Editor toggle">
    In the editor toolbar, click the **Visual** icon (a cursor). The preview becomes interactive.
  </Step>
</Steps>

<Tip>
  You can switch between Visual, Code, and Designer modes any time. They all edit the same files.
</Tip>

## 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.

<Info>
  Inline text edits write directly to the JSX/HTML source — your changes persist across refreshes.
</Info>

## Drag-and-Drop Components

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

<Steps>
  <Step title="Open the Components panel">
    Click the **+** icon in the toolbar to open the library.
  </Step>

  <Step title="Browse or search">
    Sections are grouped by category: Hero, Features, Pricing, Testimonials, CTAs, Footers, and more.
  </Step>

  <Step title="Drag onto your page">
    Drag a section onto the preview. Drop zones highlight as you hover.
  </Step>

  <Step title="Customize">
    Once dropped, click any element inside the section to restyle it or replace the text and images.
  </Step>
</Steps>

## 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.

<Tabs>
  <Tab title="What happens when you drag">
    A drag-and-drop adds real JSX/HTML to the source file. You can open the Code Editor afterward to see and tweak it.
  </Tab>

  <Tab title="What happens when you restyle">
    A style change updates the Tailwind classes (or CSS) on the element. No hidden state, no export step.
  </Tab>

  <Tab title="What happens when you edit text">
    Inline text changes update the string literal in your component. Rendered and committed the same way you'd write it by hand.
  </Tab>
</Tabs>

## 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.

<Tip>
  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.
</Tip>

## Troubleshooting

<AccordionGroup>
  <Accordion title="My changes aren't appearing">
    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.
  </Accordion>

  <Accordion title="I can't select an element">
    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.
  </Accordion>

  <Accordion title="Layout breaks on mobile after my edit">
    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.
  </Accordion>

  <Accordion title="A drag-drop section looks nothing like the preview">
    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."*
  </Accordion>

  <Accordion title="Undo isn't going back far enough">
    Visual Editor undo is scoped to the current session. For older changes, open **Version History** in the top bar and restore a snapshot.
  </Accordion>
</AccordionGroup>

## What's Next?

<CardGroup cols={2}>
  <Card title="Import from Figma" icon="figma" href="/how-tos/import-figma">
    Turn a Figma frame into code
  </Card>

  <Card title="Build with AI" icon="wand-magic-sparkles" href="/how-tos/build-with-ai">
    Describe what you want, let the AI build it
  </Card>
</CardGroup>