> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getflowpilot.io/llms.txt
> Use this file to discover all available pages before exploring further.
# The properties panel
> The right panel changes based on what you select. It groups a component's, screen's, or zone's settings into collapsible sections.
The properties panel is the panel on the right side of the editor. It always shows the settings for whatever you have selected. Select a screen and you get screen settings. Select a component and you get that component's settings, split across three tabs. Select nothing and the panel tells you to pick something.
The panel is resizable. Drag its left edge to make it wider when you are editing something with many fields.
This page describes the **Advanced mode** properties panel (the Layout / Style / Logic tabs). In [Simple mode](/editor/editing-modes) the panel instead shows one high-level [block controller](/editor/block-controllers) per block, with curated controls and no raw tabs.
## What the panel shows
The panel has a few modes, and it switches automatically based on your current selection:
| You selected | The panel shows |
| ---------------------------------------------------- | ---------------------------------------------------------- |
| Nothing | "Select a screen or component to view properties" |
| A screen (in the Layers panel) | Screen settings (see below) |
| A component on the canvas or in Layers | Component settings, in Layout / Style / Logic tabs |
| A [custom component](/editor/custom-components) | The custom component's inputs, interactions, and size |
| A [zone](/editor/zones) or a component inside a zone | Zone settings (covered on the [Zones](/editor/zones) page) |
The rest of this page covers the screen panel and the component panel. Zones have their own page.
## When a screen is selected
Click a screen in the **Layers** panel (or click empty canvas to deselect a component). The panel shows these collapsible sections, top to bottom:
| Section | What it does |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Basic Properties** | The screen name. |
| **Background** | The screen's layered background. See [Backgrounds](/editor/backgrounds). |
| **Screen Transitions** | The enter and exit transition for this screen, or "Using flow default". See [Zones and transitions](/editor/zones). |
| **Animation Speed** | A Speed Multiplier slider from 0.25x (slower) to 2.0x (faster), default 1.0x. It scales every animation duration and delay on this screen. See [Animations](/editor/animations). |
| **Particle Effect** | An auto-play particle effect for the screen (confetti, snow, sparkles, and more), triggered On Appear or After Delay, with an optional loop. See [Particles](/editor/particles). |
| **Timeline** | The screen-level animation timeline that sequences component animations. See [Animations](/editor/animations). |
| **Behavior & Layout** | Two switches: **Include in Progress Steps** (count this screen in the progress bar, on by default) and **Hide All Zones** (hide the navigation bar, footer, and overlay on this screen, off by default). |
| **Danger Zone** | Delete this screen. The button is disabled when it is the only screen in the flow. |
There is no screen-level padding or safe-area control. Padding is set per component (the **Spacing** section), and the screen's content lives inside its **Root Stack**, which you can pad and align like any other stack.
## When a component is selected
Select any component (a click on the canvas or in the Layers panel). The component panel has two parts.
### The overview strip
A non-collapsible strip at the top shows the component's name, an eye icon to **show or hide** it, and actions to **duplicate** or **delete** it. The **Root Stack** is the exception: it has no duplicate or delete and you cannot rename it.
### Three tabs: Layout, Style, Logic
Below the overview, sections are bucketed into three tabs so you see a handful of sections at a time instead of all of them. The tab you last used is remembered, and **Style** is the default.
**Layout tab** (size, placement, and how children are arranged):
| Section | What it does |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| **Stack Settings** | Axis, alignment, spacing, wrap, and scroll for stacks and buttons. See [Layout and sizing](/editor/layout-and-sizing). |
| **Size** | Width and height (Auto / px / %), plus optional min and max. |
| **Position** | Normal, Relative, Absolute, Fixed, or Sticky, with offsets and z-index. |
| **Spacing** | Padding and margin. |
**Style tab** (content, type, fills, borders, effects):
| Section | What it does |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Content** | The kind-specific content fields (text, image source, icon, or input). |
| **Typography** | Font, weight, size, spacing, alignment, and color for text and inputs. See [Colors and typography](/editor/colors-and-typography). |
| **Component settings** | Per-kind controls (Button, Toggle, Slider, Ring Progress, Lottie, Comparison Chart, Progress Bar). |
| **Layer** | Background fill, opacity, visibility, and overflow. |
| **Border** | Border style, width, color, opacity, and corner radius. |
| **Effects** | Drop shadow and blur. |
| **Text Effects** | Typewriter, count-up, rotating text, and similar (text only). See [Animations](/editor/animations). |
**Logic tab** (behavior and tracking):
| Section | What it does |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Interactions** | Actions that run on events like tap or appear. See [Interactions and actions](/editor/interactions-and-actions). |
| **Animations** | Enter, exit, and attention animations, stagger, and press feedback. See [Animations](/editor/animations). |
| **Experiment Flags** | Mark the component as belonging to an A or B variant for in-screen experiments. See [Running experiments](/dashboard/experiments). |
| **Metadata** | The component ID and an optional analytics tag. |
### Which sections appear for which component
Every component has the **Layer**, **Border**, and **Effects** sections (Style), the **Spacing** section (Layout), and the four **Logic** sections. Most also have **Size** and **Position**. On top of those, each kind adds its own sections:
| Component kind | Sections it adds |
| ----------------- | ------------------------------------------------------------------------------------------------- |
| `text` | Content, Typography, Text Effects |
| `input` | Content, Typography |
| `image` | Content |
| `icon` | Content |
| `stack` | Stack Settings |
| `button` | Stack Settings, Button settings |
| `toggle` | Toggle settings |
| `slider` | Slider settings |
| `ringProgress` | Ring Progress settings |
| `lottie` | Lottie settings |
| `comparisonChart` | Comparison Chart settings |
| `progress` | Progress Bar settings |
| `custom` | Inputs, Interactions, Size (a separate panel, see [Custom components](/editor/custom-components)) |
The **Root Stack** (`screenRoot`) shows only Stack Settings and Spacing. It always fills its screen, so it has no Size or Position section.
A button that has a `goBack` or `closeFlow` action is treated as a Back or Close button and shows its own button settings. These usually live in a [zone](/editor/zones).
## Dynamic (bound) values
Many fields have a small chip next to them that reads **Static**. Click it to switch that field from a fixed value to a **dynamic value**: a value that changes based on a [variable](/editor/variables) or a condition. Once a field is bound, the chip shows the bound state instead of "Static". Full coverage is on the [Dynamic values](/editor/dynamic-values) page.
## Common mistakes
* **Looking for a section that only exists for another kind.** Typography only appears on text and inputs. Stack Settings only appears on stacks and buttons. If a section is missing, you probably have the wrong component selected.
* **Editing a value that is bound.** If a field is bound to a dynamic value, typing a static value will not stick. Switch the chip back to **Static** first, or edit the binding.
* **Expecting Size or Position on the Root Stack.** The Root Stack always fills the screen. To inset content, add padding in its Spacing section or nest a smaller stack inside it.
## Related pages
* [Layout and sizing](/editor/layout-and-sizing)
* [Backgrounds](/editor/backgrounds)
* [Colors and typography](/editor/colors-and-typography)
* [Dynamic values](/editor/dynamic-values)
* [Components](/editor/components)