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

# Visual vs Form Editing

> Understand the difference between viewing blocks on-page and editing in the form dialog.

Primo offers two ways to work with content: viewing blocks visually on the page, or opening them in the editor dialog to edit fields.

## Visual View (On-Page)

The visual view shows your page as it will appear to visitors.

**What you see:**

* All blocks stacked vertically
* How content looks in context
* Spacing, layout, and design

**What you can do:**

* Hover over blocks to see the toolbar
* Drag blocks to reorder them
* Click "Edit" to open the form dialog
* Delete blocks
* Add new blocks via drag-and-drop from sidebar

<Tip>
  Use the visual view to see how your page looks and to rearrange blocks.
</Tip>

## Form Editor (Dialog)

Click "Edit" in the block toolbar to open the editor dialog.

**Content Tab:**

* Shows all fields in a structured form
* Edit text, images, links, etc.
* Scroll through all fields
* See what's filled in and what's empty

**Code Tab** (developers only):

* Edit HTML, CSS, and JavaScript
* See live preview
* Toggle with `Cmd/Ctrl + E`

<Info>
  Content editors only see the Content tab. Developers can switch between Content and Code tabs.
</Info>

## When to Use Each

**Use Visual View When:**

* Building page layouts
* Rearranging blocks
* Checking how content looks
* Adding or removing blocks

**Open Form Editor When:**

* Editing block content
* Filling in multiple fields
* Updating text, images, links
* Need to see all fields at once

## Workflow

Typical editing flow:

1. **Start in visual view** - See the full page
2. **Hover over a block** - Toolbar appears
3. **Click "Edit"** - Form dialog opens
4. **Fill in fields** - Edit content in Content tab
5. **Save** - Changes appear on page
6. **Repeat** - Edit more blocks as needed

<Tip>
  You can also press `Cmd/Ctrl + E` while hovering over a block to quickly open the editor dialog.
</Tip>

## Next Steps

<CardGroup cols={2}>
  <Card title="Using the Editor" icon="pen-to-square" href="/content-management/using-the-editor">
    Learn to create and edit pages.
  </Card>

  <Card title="Publishing" icon="paper-plane" href="/content-management/publishing">
    Publish your changes.
  </Card>
</CardGroup>