Editor Overview
The no-code editor is a visual builder for designing multi-page funnels. You compose each page from a tree of components, configure their properties and styles, wire up click actions and routing, and preview the result — all without writing code.
Editor Layout
The editor is organized into five main areas:
Insert image: Annotated screenshot of the full editor interface with labels pointing to the five areas: Canvas (center), Component Tree (left), Property Panel (right), Page List (top-left), and Variable Panel (left tab)
| Area | Position | Purpose |
|---|---|---|
| Canvas | Center | Live preview of the current page. Click any element to select it. Drag to reorder. |
| Component Tree | Left panel | Hierarchical view of all components on the current page. Reorder via drag-and-drop. |
| Property Panel | Right panel | Style, props, click actions, animations, and custom CSS for the selected component. |
| Page List | Left panel (top) | All pages in the funnel. Click to switch pages. Drag to reorder. |
| Variable Panel | Left panel (tab) | Create and manage variables (answers.*, data.*, query.*). |
Working with Components
Adding Components
Click the + button in the component tree or canvas to open the element picker. Select an element type to insert it as a child of the currently selected container (or the root stack if nothing is selected).
Insert image: The element picker dropdown showing the available element types (Text, Stack, Image, Input, SingleSelect, etc.) after clicking the + button
Removing Components
Select a component and press Delete or use the context menu. Removing a container removes all its children.
Reordering
Drag components in the component tree to reorder them within their parent container. You can also drag components between containers to reparent them.
Copy & Paste
Select a component and use standard keyboard shortcuts to copy and paste. Pasted components receive new IDs and are inserted as siblings of the original.
Preview vs. Edit Mode
- Edit mode — The default. Components are selectable and editable. Click actions do not fire.
- Preview mode — Simulates the live funnel. Click actions, routing, animations, and variable updates all work. Use this to test your flow end-to-end before publishing.
Toggle between modes using the preview button in the toolbar.
Responsive Design
The editor canvas renders at a fixed mobile viewport width (matching the live funnel). Funnels are mobile-first by design — the same layout is served to all screen sizes.
If you need device-specific styling, use Custom CSS with media queries:
@media (min-width: 768px) {
font-size: 20px;
}Device variables (device.isMobile, device.screenWidth) are also available for conditional logic via Dynamic Properties.
Next Steps
- Elements — All 24 component types and their configuration.
- Properties & Styling — Layout, spacing, typography, colors, borders, shadows.
- Custom CSS — Raw CSS with Liquid templates for advanced styling.
- Page Actions — Automatic actions triggered by page events (load, scroll, element visibility).
- Custom JavaScript — Inject JS with the
appfunnelAPI for advanced behavior.