- Elements, the Element Library described on this page.
- Screens, the full-screen template picker.
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.
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. |
| Social Proof | Review. |
| Persistent Zones | Continue Button (and other zone blocks). |
The Offers category (countdown, pricing) appears in the rail design but has no certified blocks yet, so it does not show in Simple. It is 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 horizontally scrolling row of cards users swipe through. |
| 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”. |
| 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.