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

# Site Editor

> Design funnel pages with the drag-and-drop visual editor.

The site editor is a visual, drag-and-drop page builder for designing funnel pages. You work directly on a live preview of your page — no code required.

## Opening the editor

Click any page node in the funnel canvas to open its editor. The editor loads the current draft of that page, ready for you to make changes.

## Editor layout

The editor has three panels:

<CardGroup cols={3}>
  <Card title="Component library" icon="layout-grid">
    The left panel lists all available components, organized by category. Drag any component onto the canvas to add it to your page. A **Saved** tab shows blocks you have saved for reuse.
  </Card>

  <Card title="Page canvas" icon="monitor">
    The center panel shows a live, proportional preview of your page. The canvas scales to fit the available width — there is no horizontal scroll. Use the viewport toggle to switch between desktop and mobile views.
  </Card>

  <Card title="Properties" icon="sliders-horizontal">
    The right panel shows the properties of the selected component. Click any component on the canvas to select it and edit its settings here.
  </Card>
</CardGroup>

## Adding components

<Steps>
  <Step title="Find the component">
    In the left panel, browse the component library by category or scroll through the list.
  </Step>

  <Step title="Drag onto the canvas">
    Drag the component from the left panel and drop it onto the canvas in the position you want. A blue insertion indicator shows where the component will land.
  </Step>

  <Step title="Edit its properties">
    Click the component to select it. Edit its content, styling, and layout settings in the right panel.
  </Step>
</Steps>

## Selecting and editing components

Click any component on the canvas to select it. The right panel updates to show that component's properties, grouped into tabs such as **Content**, **Styling**, **Layout**, and **Behavior**. Changes you make in the properties panel are reflected immediately in the canvas preview.

To deselect a component, click an empty area of the canvas.

## Saving and publishing

<Info>
  All edits are saved automatically as a draft. Visitors do not see your changes until you publish.
</Info>

* **Draft** — your working copy. Edit freely without affecting the live page.
* **Publish** — click **Publish** to push your draft live. The page immediately reflects your changes for all visitors.

To revert unpublished changes, you can discard the draft from the page settings menu.

## Undo and redo

Use **Ctrl+Z** (or **Cmd+Z** on Mac) to undo and **Ctrl+Shift+Z** (or **Cmd+Shift+Z**) to redo changes within the editor session.

## Canvas preview scaling

The canvas preview scales proportionally to fit the available space between the two side panels. What you see is an accurate representation of your page at the given viewport width — no horizontal scrollbar appears. Switch between desktop and mobile viewport modes using the toggle at the top of the editor to verify your layout at both sizes.