The Element Library (Simple)

In Simple mode, Insert opens an Element Library: a two-pane catalog of certified 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; 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 picker.

(In Advanced mode the Insert panel instead shows Components | Blocks | Screens, and the Blocks list is the full catalog, not just certified blocks. See 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 and has been verified to render identically on the canvas, the iOS SDK, and the Expo SDK. 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 where it goes

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 or drag the card

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.

Edit it with its controller

Select the inserted block and edit it with its block controller 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.

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 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.

Basics

Simple mode

Adding content

Styling & layout

Motion

Logic & data

Persistent UI

Preview & publish

The Element Library (Simple)

Certified blocks

Finding a block

Inserting a block

The categories

Blocks by category

Variants insert one block model

Container blocks

Common mistakes

​Certified blocks

​Finding a block

​Inserting a block

​The categories

​Blocks by category

​Variants insert one block model

​Container blocks

​Common mistakes

​Related pages

Certified blocks

Finding a block

Inserting a block

The categories

Blocks by category

Variants insert one block model

Container blocks

Common mistakes

Related pages