Schema Builder

Features

20+ Field Types

Complete field library: string, number, email, password, date, select, textarea, file, and more.

Drag & Drop

Drag fields from the library to your schema. Reorder fields on the canvas with intuitive drag-and-drop.

Property Editor

Configure field properties: type, validation rules, labels, placeholders, help text, and form layout options.

Live Preview

See your form in real-time with validation testing. Display model state and test user input instantly.

Multi-Format Export

Export to JavaScript object literals, JSON, or TypeScript interfaces with proper type mappings.

Blueprint Composition

Import existing blueprints. Use M.extend, M.pick, M.omit operations to compose complex schemas.

Quick Start Guide:

Add Fields: Click or drag field types from the left panel into the canvas
Edit Properties: Click any field card in the canvas to open the property editor
Configure: Set field name, type, required status, labels, and validation rules
Test: Preview your form in real-time at the bottom (if enabled)
Export: Click "Export" to get JavaScript, JSON, or TypeScript code

Usage

Available Field Types

Basic Types

string - Single-line text
number - Numeric input
boolean - True/false checkbox
textarea - Multi-line text

Specialized Inputs

email - Email validation
password - Password input
url - URL validation
tel - Phone number
color - Color picker
range - Slider input
hidden - Hidden field

Selection & Advanced

select - Dropdown select
multiselect - Multi-select
radio - Radio buttons
checkbox-group - Checkboxes
date - Date picker
datetime - Date & time
time - Time picker
file - File upload
array - Array type
object - Object type

Integration with Domma

Using Generated Blueprints

                    // 1. Build your blueprint in Schema Builder
                    // 2. Export as JavaScript
                    const contactBlueprint = {
                        name: { type: 'string', required: true, label: 'Full Name' },
                        email: { type: 'email', required: true, label: 'Email Address' },
                        message: { type: 'textarea', required: true, label: 'Message' }
                    };

                    // 3. Use with Domma.forms to generate a form
                    const form = Domma.forms.create('#contact-form', {
                        blueprint: contactBlueprint,
                        layout: 'stacked',
                        submitText: 'Send Message',
                        onSubmit: async (data) => {
                            console.log('Form data:', data);
                            await Domma.http.post('/api/contact', data);
                        }
                    });

                    // 4. Or use with Domma.models for reactive data
                    const model = M.create(contactBlueprint, {
                        name: '',
                        email: '',
                        message: ''
                    });

                    // 5. Or use with CRUD helper for complete data management
                    Domma.forms.crud('#crud-container', {
                        blueprint: contactBlueprint,
                        endpoint: '/api/contacts',
                        title: 'Contacts'
                    });
                