Interactive Examples

Explore real-world implementations of the Form Builder. Each example demonstrates different features and patterns you can use in your own projects.

1

Resident Registration Form

Advanced
View Demo

A comprehensive multi-step form demonstrating complex validation, conditional navigation, sidebar navigation, and form submission workflows.

What you'll learn:

Multi-step wizard with progress tracking
Complex field validation
Conditional display logic
Sidebar navigation
Form submission with API integration
2

Lorem Picsum Image Generator

Intermediate
View Demo

Demonstrates dynamic URL construction, template placeholders, conditional rendering, and image display blocks.

What you'll learn:

Dynamic URL generation with context placeholders
Number input validation
Conditional block visibility
ImageBlock component showcase
Real-time context interpolation
3

API Loading Demo

Intermediate
View Demo

Showcases real API calls with loading states, response handling, and data display using JSONPlaceholder API.

What you'll learn:

Real REST API integration
Loading indicators with multiple variants
API response handling
Event-based context assignment
Error handling (then/else actions)
4

Order Discount Calculator

Advanced
View Demo

Demonstrates custom function services for calculations, validations, and business logic with real-time computation.

What you'll learn:

Custom function services
Real-time calculations (subtotal, discount, tax)
Business logic implementation
Discount code validation
Inventory checking
Chained function calls
5

Computed Fields Demo

Intermediate
View Demo

Showcases computed fields that automatically update based on other field values using declarative expressions.

What you'll learn:

Computed field expressions
Automatic recalculation on change
Context-based field values
Declarative data transformations
No custom code required
6

Custom Functions Demo

Advanced
View Demo

Demonstrates how to implement complex business logic using custom JavaScript functions for validation and calculations.

What you'll learn:

Custom function implementation
Discount code validation logic
Shipping cost calculations
Complex validation rules
Async function support
Context manipulation
7

API + Computed Fields Demo

Advanced
View Demo

Combines API calls with computed fields to demonstrate real-time data fetching and automatic calculations.

What you'll learn:

API integration with custom functions
Tax rate lookup by ZIP code
Computed field calculations
Loading states during API calls
Dynamic context updates
Real-world data flow patterns
8

🔒 Security & Token Refresh

Advanced
View Demo

Demonstrates encrypted secret context, bearer token authentication, and automatic token refresh for secure API integration.

What you'll learn:

Encrypted secret storage with AES encryption
Bearer token authentication
Automatic token refresh every 3 minutes
assignSecret action with auto-encryption
Secure logging (tokens redacted)
Mixed context and secret placeholders