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

# Demo builder

> Create and edit interactive demos in the Demo builder.

export const MediaCard = ({title = '', url, type = 'demo'}) => {
  const attributes = type === 'demo' ? {
    'data-navattic-open': url,
    'data-navattic-title': title
  } : {
    'data-video': url
  };
  return <div {...attributes} className="hidden w-auto cursor-pointer overflow-hidden rounded-lg border border-gray-200 shadow-sm md:inline-block dark:border-gray-700">
  <div className="flex items-center gap-3 bg-white px-3 py-2 dark:bg-gray-800">
    <div className={`flex h-7 w-7 items-center justify-center rounded-md ${type === 'video' ? 'bg-blue-100 dark:bg-blue-900' : 'bg-orange-100 dark:bg-orange-900'}`} style={{
    backgroundColor: type === 'video' ? 'var(--video-bg)' : 'var(--demo-bg)'
  }}>
      <Icon icon={type === 'video' ? 'circle-play' : 'square-mouse-pointer'} color={type === 'video' ? 'var(--video-icon)' : 'var(--demo-icon)'} />
    </div>
    <div>
      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
        {type === 'video' ? 'Watch video' : 'Try a demo'}
      </div>
      <div className="text-sm text-gray-500 dark:text-gray-400">{title}</div>
    </div>
  </div>
  <style jsx>{`
    :root {
      --video-bg: #dbeafe;
      --video-icon: #2563eb;
      --demo-bg: #ffedd5;
      --demo-icon: #ea580c;
    }
    :global(.dark) {
      --video-bg: #1e3a8a;
      --video-icon: #60a5fa;
      --demo-bg: #7c2d12;
      --demo-icon: #fb923c;
    }
  `}</style>
</div>;
};

<Note>
  If you don't have access, email [success@navattic.com](mailto:success@navattic.com) to enable the
  Demo builder in your workspace.
</Note>

<Frame>
  <img src="https://mintcdn.com/navattic-app/nBcURPbxfeqKXMDI/images/demo-builder.png?fit=max&auto=format&n=nBcURPbxfeqKXMDI&q=85&s=ab478b1172a68319120400615e0b2a52" alt="Demo Builder interface" width="2912" height="1600" data-path="images/demo-builder.png" />
</Frame>

The Demo builder is a single interface for editing, managing, and analyzing your demos.

<MediaCard url="https://navattic-docs.navattic.com/m1860spg" type="demo" title="Explore the Demo builder" />

<MediaCard url="https://www.loom.com/share/40283697fa7149d59f421559a2a22a7b" type="video" title="Demo builder walkthrough" />

## Understanding the layout

When you open the Demo builder, there are four main areas:

### Main navigation tabs

At the top of the page, you can switch between three tabs:

<Frame>
  <img src="https://mintcdn.com/navattic-app/c6OlwiFTV3AhnMmR/images/build-manage-analyze.png?fit=max&auto=format&n=c6OlwiFTV3AhnMmR&q=85&s=49dc4a9ee925dece374cc5631036aaf6" alt="Build, Manage, and Analyze tabs" width="1736" height="508" data-path="images/build-manage-analyze.png" />
</Frame>

* **Build** - Design your interactive demo with steps, tooltips, and media
* **Manage** - Configure sharing settings, organize flows, publish your demo, and access version history
* **Analyze** - Track visitor engagement, completion rates, and performance

### Flows list sidebar

On the left side of the Build tab, you'll find a list of all the Flows and steps in your demo. Click on any step in any Flow to edit it in the main canvas.

<Frame>
  <img src="https://mintcdn.com/navattic-app/KjomeDS2qc1v-WgP/images/flows-sidebar.png?fit=max&auto=format&n=KjomeDS2qc1v-WgP&q=85&s=3888e129e3b3f5f01def28423f745dda" alt="Flows list sidebar" width="1736" height="768" data-path="images/flows-sidebar.png" />
</Frame>

You can resize the sidebar by dragging its right edge. Drag it all the way to the left to collapse it. The **Add flow** button is pinned to the bottom of the sidebar.

### Step editor

The central area where you edit the content, appearance, and behavior of a selected step.

### Theme panel

On the right, you can adjust the look and feel of your demo by applying and customizing themes. Changes here apply across your entire demo.

### Preview

Switch to the Preview tab at any time to see how your demo will appear to viewers. Your latest changes are always reflected in the preview.

## Switch builder layout

The Demo builder offers two layouts for editing. Switch between them using the toggle in the top navigation, or press <kbd>Shift</kbd> + <kbd>.</kbd> to toggle from the keyboard.

<Frame>
  <img src="https://mintcdn.com/navattic-app/gAIo1UUloPoEQaTx/images/demo-builder-layout.png?fit=max&auto=format&n=gAIo1UUloPoEQaTx&q=85&s=839f66adbb74bde532a07bdbd27d5a7c" alt="Demo builder layout" width="1736" height="622" data-path="images/demo-builder-layout.png" />
</Frame>

<Tabs>
  <Tab title="Single step view">
    The default view, designed for editing one step at a time. It works with the Flows list sidebar, so you can focus on a single step while navigating to any other step in your demo.

    **When to use single step view:**

    * You want to focus on individual steps
    * You need to jump between steps across different Flows
    * You're making detailed edits to specific elements

    <Tip>
      Single step view is ideal for making quick edits across your demo. Use the Flows list sidebar to navigate between steps.
    </Tip>
  </Tab>

  <Tab title="Multi-step view">
    The classic Flow builder layout, available as multi-step view. This mode shows the entire sequence of a single Flow at once, making it easier to understand the narrative arc of your demo.

    **When to use multi-step view:**

    * You want to see the full story of a Flow from start to finish
    * You're reordering or reorganizing steps within a Flow
    * You prefer the classic Flow builder experience

    <Note>
      Multi-step view focuses on one Flow at a time. To edit steps in different Flows, you'll need to switch between them.
    </Note>
  </Tab>
</Tabs>

## Feature differences between views

Most editing capabilities are available in both views, but a few behaviors differ depending on which layout you're using.

| Feature                   | Single step view                                                       | Multi-step view                                                                                           |
| ------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| **Navigate across flows** | Use the Flows list sidebar to jump to any step in any Flow             | Switch between Flows using the Flow dropdown                                                              |
| **Reorder steps**         | Navigate via the sidebar                                               | Drag and drop steps to reorder them within a Flow                                                         |
| **Video step settings**   | All video options appear in the settings panel                         | Video options appear directly on the canvas; the settings panel shows only completion and escape settings |
| **Interest routing**      | InterestConditions configuration is visible in the step settings panel | InterestConditions are not shown in the settings panel                                                    |

<Note>
  If you need to configure **Interest routing** for a form step, switch to single step view to
  access the full InterestConditions settings.
</Note>

## What you can edit

The Demo builder provides a unified experience for building Flows. You can edit the following directly in the **Build** tab:

* <Icon icon="list-checks" /> Checklist builder
* <Icon icon="move-diagonal" /> Responsiveness settings
* <Icon icon="languages" /> Language and tracking settings
* <Icon icon="palette" /> Themes

<Note>
  Version history is accessible from any tab. Open the options menu in the top navigation bar and
  select **Version history**.
</Note>

## Reordering buttons

In the Build tab, you can change the order of buttons within a step by dragging them. Click and hold the drag handle to the left of any button, then move it up or down to reposition it. The new order is saved automatically.

## Deleting a demo

To permanently delete an archived demo, open it in the Demo builder. Select **Delete demo** from the options menu in the top navigation bar.

<Warning>
  Deleting a demo is permanent and cannot be undone. All flows, captures, share links, and analytics
  data associated with the demo will be removed.
</Warning>

## FAQs

<AccordionGroup>
  <Accordion title="What is the main difference between single step and multi-step view?">
    Single step view is designed for editing one step at a time and works with the Flows list sidebar, making it easy to navigate across your entire demo. Multi-step view shows the entire sequence of a single Flow, which is helpful for understanding the story and reordering steps within that Flow by drag and drop.

    Most editing features work the same in both views, but a few differ. Video step options appear directly on the canvas in multi-step view rather than in the settings panel. Interest routing configuration (for form steps using the "Run Interests" action) is only visible in single step view. If you need to configure those settings, switch to single step view.
  </Accordion>

  <Accordion title="Can I still use the classic Flow builder?">
    Yes. The classic Flow builder is available as multi-step view. Use the toggle in the top navigation (or press <kbd>Shift</kbd> + <kbd>.</kbd>) to switch from single step view to multi-step view.
  </Accordion>

  <Accordion title="How do I switch between different Flows?">
    In single step view, use the Flows list sidebar on the left to see all your Flows and click on any step to edit it. In multi-step view, use the Flow dropdown to switch between different Flows.
  </Accordion>

  <Accordion title="Can I resize or collapse the Flows list sidebar?">
    Yes. Drag the right edge of the Flows list sidebar to resize it. Drag it all the way to the left to collapse the sidebar and give more space to the step editor.
  </Accordion>

  <Accordion title="Will my existing demos work in the Demo builder?">
    Yes. All your existing demos work in the Demo builder. You can edit them using either single step or multi-step view.
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Creating flows" icon="workflow" href="/build/flows">
    Learn how to create engaging step-by-step flows in your demos.
  </Card>

  <Card title="Themes" icon="palette" href="/build/themes">
    Customize the look and feel of your demos with themes.
  </Card>
</CardGroup>