Every app in CurlBlocks is built from blocks — composable, configurable UI and logic units that snap together on the visual canvas. Understanding the core block types is the fastest way to start building effectively. This article covers four foundational blocks: Container, Dropdown, Checkbox, and ActionFlow.
Container: Your Layout Foundation
The Container is the building block for all UI structure in CurlBlocks. Think of it as a responsive div with superpowers — it holds other blocks, defines layout rules, and controls spacing at every viewport size.
Containers support flex and grid layout modes, configurable through the properties panel without touching CSS. You can set padding, gap, background, border radius, and responsive breakpoints all visually.
What you build with it
- Sidebar + main content layouts
- Responsive card grids
- Multi-panel dashboards
- Navigation bars and headers
- Modal and drawer containers
- Nested form sections
Dropdown: Smart Data Selection
The Dropdown block handles any scenario where users need to select from a list. It supports static option arrays, dynamic data fetched from an API, and complex multi-select flows — all configurable without code.
Checkbox: Managing State and Selections
The Checkbox block is deceptively powerful. Beyond a simple binary yes/no input, it supports group selection, indeterminate states, and binding to data table rows for bulk operations.
When wired to an ActionFlow, a checkbox can trigger any logic — showing or hiding panels, toggling feature flags, queuing API calls, or updating records in bulk.
Common use cases
- Individual boolean inputs in forms
- Select-all / deselect-all in data tables
- Indeterminate parent state in tree structures
- Feature toggles in settings panels
- Bulk action triggers (delete, export, approve)
ActionFlow: The Heart of Your Logic
ActionFlow is CurlBlocks’ visual automation engine — the place where you define what your app actually does. Every button click, form submission, timer, or data change can trigger an ActionFlow that executes your business logic step by step.
An ActionFlow is a graph of nodes connected by edges. Each node is a discrete step — call an API, evaluate a condition, transform data, navigate the user, send a notification. You connect them visually by drawing edges between outputs and inputs.
API Call
Call any REST or GraphQL endpoint with headers, body params, and auth
Condition
Branch logic based on data values — if/else with multiple paths
Loop
Iterate over a list and execute a set of steps for each item
Set Variable
Store, transform, or compute values between steps
Notification
Send in-app alerts or trigger emails on any event
Navigate
Redirect the user to any URL or page in your app
Real example: A form submission flow
ActionFlow: onSubmitOrderForm
Composing Blocks Together
The real power of CurlBlocks comes from combining blocks. A Container holds a Dropdown and a Checkbox group. When the Dropdown selection changes, an ActionFlow fires — fetching new data, updating the Checkbox options, and re-rendering the panel automatically.
Each block exposes properties (what it displays) and events (what it reacts to). You wire events to ActionFlows, and ActionFlows update properties. The result is a fully reactive application — built without writing code.
Tips for Building Fast
- Start with Containers. Get your layout structure right before placing form components — it’s much easier to refactor early.
- Use templates. Common patterns like data tables, forms, and dashboards are available as starting points in the template library.
- Name ActionFlows like functions.
onSubmitOrder,onFilterChange— clear names make debugging faster. - Test in Preview mode. CurlBlocks has a live preview that shows the app exactly as users will see it, without deploying.
Start building with these blocks
CurlBlocks is in early access. Join the waitlist to get hands-on with Container, Dropdown, Checkbox, and ActionFlow when we launch.