> ## 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 Element Library (Simple)
> Simple mode builds screens from a two-pane Element Library of certified blocks: categorized, searchable, with live preview cards you click or drag onto the canvas.
In [Simple mode](/editor/editing-modes), **Insert** opens an **Element Library**: a two-pane catalog of certified [blocks](/editor/blocks) grouped by category, each shown as a live preview card. You build screens by clicking or dragging these blocks onto the canvas. Simple never exposes raw [primitives](/editor/components); even a heading or an image is a block here.
The Insert panel in Simple has two inner tabs:
* **Elements**, the Element Library described on this page.
* **Screens**, the full-screen [template](/dashboard/flow-templates) picker.
(In [Advanced mode](/editor/editing-modes) the Insert panel instead shows **Components | Blocks | Screens**, and the Blocks list is the full catalog, not just certified blocks. See [Blocks](/editor/blocks).)
TODO: screenshot of the two-pane Element Library: category rail on the left, grouped preview cards on the right.
## Certified blocks
The Element Library shows only **certified blocks**. A block is certified once it has a [Simple block controller](/editor/block-controllers) and has been verified to render identically on the canvas, the [iOS SDK](/ios-sdk/index), and the [Expo SDK](/expo-sdk/index). Every certified block is a composition of the existing primitives, so it needs no new SDK code, only verification. This is what makes a flow you build in Simple safe to ship without checking each screen on every platform.
## Finding a block
The library is a two-pane layout:
* **Left**, a category rail. Click a category to filter the right pane. **All** shows everything grouped.
* **Right**, preview cards under category and sub-group headers. Each card is a scaled live mini-render of the block, so what you see is what gets inserted.
A search box (**"Search elements..."**) at the top filters across every category by name, description, and tags. When the panel is narrow the two panes collapse into a single column of collapsible category sections.
## Inserting a block
Select a screen (or a container cell) so the block has a place to land. Cards are disabled with a hint until you select a target.
Click a preview card to insert the block, or drag it onto the canvas. Some blocks open a short wizard to set labels and options before inserting.
Select the inserted block and edit it with its [block controller](/editor/block-controllers) in the properties panel.
## The categories
The category rail lists, in order:
| Category | What it holds |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Containers** | Layout scaffolds with empty cells you fill: Columns, Rows, Carousel. |
| **Text** | Title, Subtitle, Normal Text, Rich Text. |
| **Media** | Image, Lottie. |
| **Questions** | Single Choice, Multi Choice, and Rating blocks (with variants). |
| **Inputs** | Text, Long Text, Email, Phone, Number, Password fields. |
| **Buttons** | Primary, Secondary, Text, Icon, Pulse, and Gradient buttons. |
| **Progress & Loading** | Analysis Loader, Progress Bar. |
| **Content** | Hero, Benefit List, App Rating Ask. |
| **Charts** | Comparison Chart. |
| **Offers** | Countdown, Countdown Boxed, Limited Offer. |
| **Pickers** | Scroll-wheel pickers (Age, Height, Weight, Height & Weight, Date of birth), a **Scales** subgroup of tick-mark rulers (Weight, Height, Value), and a **Sliders** subgroup of drag sliders (Hours, Percentage, Rating, Amount). |
| **Social Proof** | Review. |
| **Persistent Zones** | Continue Button (and other zone blocks). |
The **Offers** category holds the countdown family. Pricing blocks are still on the roadmap.
### Blocks by category
| Category | Block | What it inserts |
| ------------------ | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Containers | **Columns** | Equal-width cells laid out side by side. |
| Containers | **Rows** | Cells stacked vertically. |
| Containers | **Carousel** | A horizontal row of cards users swipe through — or, with **Auto-scroll** on, one that drifts in an endless loop on its own. |
| Text | **Title** | A large headline. |
| Text | **Subtitle** | A supporting headline below a title. |
| Text | **Normal Text** | A paragraph of body copy. |
| Text | **Rich Text** | Text mixing bold, italic, underline, and color in one run. |
| Media | **Image** | A single image or illustration. |
| Media | **Lottie** | A Lottie animation. |
| Questions | **Single Choice List** | A "pick one" list bound to a variable. Variants: **List**, **Emoji**, **Detailed**. |
| Questions | **Multi Choice List** | A "pick many" list bound to a list variable. Variant: **Choice Chips**. |
| Questions | **Rating** | A star rating bound to a number. Variant: **Number Rating**. |
| Inputs | **Text Input** | A free-text field bound to a variable. |
| Inputs | **Long Text** | A multi-line text area. |
| Inputs | **Email Input** | An email field with validation. |
| Inputs | **Phone Number** | A phone field with the phone keypad. |
| Inputs | **Number** | A numeric field bound to a number. |
| Inputs | **Password** | A masked secure-entry field. |
| Buttons | **Primary / Secondary / Text / Icon / Pulse / Gradient Button** | The same button styled six ways (filled, outlined, link, with an icon, looping pulse, gradient sweep). |
| Progress & Loading | **Analysis Loader** | An animated ring that fills through stages, then continues. The signature "creating your plan..." screen. |
| Progress & Loading | **Progress Bar** | The linear onboarding progress bar (usually a zone). |
| Content | **Hero** | An image with a headline and supporting copy. |
| Content | **Benefit List** | A list of feature rows, each with an icon, title, and description. |
| Content | **App Rating Ask** | A pre-prompt that triggers the native rating popup on a positive answer. |
| Charts | **Comparison Chart** | Two smoothed curves, for example "with us" vs "without us". |
| Offers | **Countdown** | A ticking clock that can fire actions when it runs out. |
| Offers | **Countdown Boxed** | Hours / minutes / seconds in separate cells, all on one shared clock. |
| Offers | **Limited Offer** | An urgency banner: "Offer ends in" plus a live clock. |
| Pickers | **Age / Height / Weight / Height & Weight / Date of Birth** | Scroll-wheel value pickers; Height/Weight ship with an Imperial/Metric toggle. |
| Pickers › Scales | **Weight / Height / Value Ruler** | Tick-mark scales you slide under a fixed indicator; Weight/Height ship with an Imperial/Metric toggle. |
| Pickers › Sliders | **Hours / Percentage / Rating / Amount Slider** | A drag slider with a gradient fill, pill thumb, and large top readout, bound to a number (`{{value}}h`, `{{value}}%`, 1-10, `${{value}}`). |
| Social Proof | **Review** | A customer quote with a star rating and author. |
| Persistent Zones | **Continue Button** | A full-width button that advances to the next screen. |
### Variants insert one block model
Where a block has variants (Single Choice's **List / Emoji / Detailed**, Multi Choice's **Choice Chips**, Rating's **Number Rating**), each variant appears as its own preview card so it is easy to discover, but they all insert the **same underlying block** with a different style. That keeps the tested surface small: one block model and a few vetted styles, all editable through the same [controller](/editor/block-controllers).
## Container blocks
Containers (**Columns**, **Rows**, **Carousel**) are the one place Simple lets you nest other blocks. A container inserts with empty **cells** that render as outlined drop targets. Drag elements from the library into a cell to fill it. In the library, containers show as a blueprint diagram rather than a live render, because an empty scaffold looks broken when rendered.
Containers are presets built from stacks, not a new component kind, so they render everywhere the SDKs run. Use the container controller to add or remove cells and set spacing.
## Common mistakes
* **Looking for a raw Text or Image primitive.** In Simple, Title, Normal Text, and Image are blocks in the library, not primitives. Drop the block; edit it with its controller.
* **Dropping a block with no target selected.** Select a screen (or a container cell) first. Cards stay disabled until you do.
* **Expecting every block to exist in Simple.** Simple shows only certified blocks. The full catalog lives in Advanced's Blocks list. Switch to [Advanced](/editor/editing-modes) if you need something that is not certified yet.
* **Trying to nest blocks outside a container.** Simple selects and moves whole blocks. The only way to nest is to drop into a Columns, Rows, or Carousel cell.
## Related pages
* [Simple and Advanced modes](/editor/editing-modes)
* [Block controllers (Simple)](/editor/block-controllers)
* [The Screens panel (Simple)](/editor/screens-panel)
* [Blocks (the full catalog)](/editor/blocks)
* [Components](/editor/components)