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

# Studio overview

> The three-tab Studio — Content, Workflow, and Connect — and how everything fits together.

The Studio is where you build your form. It opens automatically when you click into any form from the dashboard, and it fills the entire screen so you can work without distraction.

<img src="https://mintlify.s3.us-west-1.amazonaws.com/feedal/images/building-forms-studio-overview.png" alt="The Feedal Studio with Content, Workflow, and Connect tabs" />

***

## The three tabs

The Studio is divided into three tabs, accessible from the tab switcher at the top center of the screen.

<CardGroup cols={3}>
  <Card title="Content" icon="pencil">
    Add and edit questions, screens, and text. Build what respondents actually
    see and answer.
  </Card>

  <Card title="Workflow" icon="code-branch">
    Arrange nodes visually and draw connections between them to define the form's
    flow and conditional routing.
  </Card>

  <Card title="Connect" icon="plug">
    Set up integrations that trigger when your form receives a submission — Slack,
    Google Sheets, webhooks, and more.
  </Card>
</CardGroup>

***

## The Content tab layout

The Content tab has three resizable panels:

```
┌─────────────────┬──────────────────────────────┬─────────────────┐
│                 │                              │                 │
│   Left sidebar  │          Canvas              │  Right panel    │
│   (node list)   │   (active node, live theme)  │  (node config)  │
│                 │                              │                 │
└─────────────────┴──────────────────────────────┴─────────────────┘
```

**Left sidebar** — lists every node in the form, grouped into three sections: Start Screens, Questions, and Endings. Click any node to select it and bring it into the canvas. Drag nodes to reorder them within a group.

**Canvas** — renders the selected node as it will appear to respondents, with your active theme applied. Edit the node's title and description directly in the canvas.

**Right panel** — shows type-specific configuration for the selected node (placeholder text, validation, options, etc.). Switches to Design mode for theme editing, or Settings mode for form-level settings.

***

## The top bar

The top bar is visible across all three tabs.

| Element         | What it does                                                                             |
| --------------- | ---------------------------------------------------------------------------------------- |
| **← Forms**     | Navigate back to the forms dashboard                                                     |
| **Form title**  | Click to rename the form inline; press Enter or click away to confirm                    |
| **Save status** | Real-time indicator: "All changes saved" · "Unsaved changes" · "Saving…" · "Save failed" |
| **Results**     | Opens the Results hub for this form (appears only after the first publish)               |
| **Save**        | Saves the draft immediately; disabled when there are no unsaved changes                  |
| **Publish**     | Validates the graph and creates a new published version from the current draft           |

<Note>
  If **Publish** fails, a list of specific validation errors appears below the
  button — for example, "Entry node is missing" or "Node has no outgoing
  edges". Fix each issue and try again.
</Note>

***

## The canvas toolbar

A secondary toolbar sits at the top of the canvas area inside the Content tab.

| Control         | What it does                                                          |
| --------------- | --------------------------------------------------------------------- |
| **Add content** | Opens the Add Content modal to insert a new node                      |
| **Undo**        | Reverts the last change                                               |
| **Redo**        | Re-applies an undone change                                           |
| **Preview**     | Opens the live form in a new tab in preview mode (no session created) |
| **Device**      | Switches the canvas frame: Desktop · Tablet (768pt) · Mobile (390pt)  |
| **Design**      | Opens theme and visual design options in the right panel              |
| **Settings**    | Opens form-level settings in the right panel                          |

***

## Device preview

The device preview simulates how your form looks on different screen sizes.

| Mode        | Simulated width   | Frame                |
| ----------- | ----------------- | -------------------- |
| **Desktop** | 680 px — no frame | None                 |
| **Tablet**  | 768 pt            | Rounded device frame |
| **Mobile**  | 390 pt            | Phone frame          |

<Note>
  Device preview is visual only — it does not create a session or submit data.
  Use the **Preview** button to open the form in a new browser tab and test the
  full respondent experience.
</Note>

***

## Next steps

<CardGroup cols={2}>
  <Card title="Saving and versioning" icon="floppy-disk" href="/building-forms/studio/saving-and-versioning">
    Learn how autosave, manual save, and publishing interact.
  </Card>

  <Card title="Adding content" icon="plus" href="/building-forms/content/adding-content">
    Add your first question or screen.
  </Card>

  <Card title="Keyboard shortcuts" icon="keyboard" href="/building-forms/studio/shortcuts">
    Speed up your workflow with keyboard shortcuts.
  </Card>

  <Card title="Workflow canvas" icon="diagram-project" href="/building-forms/workflow/canvas">
    Connect nodes and define the form's flow.
  </Card>
</CardGroup>