Generate forms automatically from blueprint definitions with built-in validation and type mapping.

// Define a blueprint
const userBlueprint = {
    name: {
        type: 'string',
        label: 'Full Name',
        required: true,
        minLength: 2
    },
    email: {
        type: 'email',
        label: 'Email Address',
        required: true,
        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    },
    age: {
        type: 'number',
        label: 'Age',
        min: 18,
        max: 120
    },
    role: {
        type: 'select',
        label: 'Role',
        options: [
            { value: 'user', label: 'User' },
            { value: 'admin', label: 'Administrator' }
        ]
    },
    newsletter: {
        type: 'boolean',
        label: 'Subscribe to Newsletter'
    }
};

// Create form
const form = Domma.forms.create(userBlueprint, initialData, {
    onSubmit: (data, formInstance) => {
        console.log('Form submitted:', data);
    }
});

// Render to DOM
form.renderTo('#form-container');

Support for different layout styles: stacked, grid, and inline layouts with customizable sections.

// Grid layout with sections
const profileForm = Domma.forms.create(blueprint, data, {
    layout: 'grid',
    columns: 2,
    sections: [
        {
            title: 'Personal Information',
            fields: ['name', 'email', 'phone']
        },
        {
            title: 'Account Settings', 
            fields: ['role', 'newsletter', 'notifications']
        }
    ]
});

Create professional modal forms with automatic event handling and error management.

// Modal form
const modal = Domma.forms.modal(userBlueprint, userData, {
    title: 'Edit User Profile',
    size: 'medium',
    saveText: 'Update Profile',
    onSave: async (formData, formInstance) => {
        // Handle form submission
        await updateUserProfile(formData);
    },
    onError: (error, formData, formInstance) => {
        console.error('Form error:', error);
    }
});

modal.open();

Create multi-step workflows with progress tracking and step validation.

// Multi-step wizard
const wizard = Domma.forms.wizard([
    {
        title: 'Account Details',
        description: 'Basic account information',
        blueprint: {
            username: { type: 'string', required: true },
            email: { type: 'email', required: true }
        }
    },
    {
        title: 'Profile Information',
        description: 'Tell us about yourself',
        blueprint: {
            name: { type: 'string', required: true },
            bio: { type: 'textarea' }
        }
    },
    {
        title: 'Preferences',
        description: 'Customize your experience',
        blueprint: {
            theme: { type: 'select', options: ['light', 'dark'] },
            notifications: { type: 'boolean' }
        }
    }
], {}, {
    title: 'Account Setup Wizard',
    onComplete: async (allData, formInstance) => {
        console.log('Wizard completed:', allData);
    }
});

wizard.open();

Zero-configuration CRUD interfaces with automatic table generation and form modals.

// Complete CRUD setup
const userCrud = Domma.forms.crud({
    blueprint: userBlueprint,
    endpoint: '/api/users',
    tableSelector: '#users-table',
    title: 'Manage Users',
    primaryKey: 'id',
    displayField: 'name',
    onSuccess: (message) => console.log(message),
    onError: (error) => console.error(error)
});

// Initialize CRUD interface
await userCrud.init();

Built-in and custom validators with real-time feedback and comprehensive error handling.

// Blueprint with various validation rules
const validationBlueprint = {
    username: {
        type: 'string',
        required: true,
        minLength: 3,
        maxLength: 20,
        pattern: /^[a-zA-Z0-9_]+$/,
        formConfig: {
            hint: 'Only letters, numbers, and underscores'
        }
    },
    password: {
        type: 'password',
        required: true,
        minLength: 8,
        validate: (value) => {
            if (!/[A-Z]/.test(value)) return 'Must contain uppercase letter';
            if (!/[0-9]/.test(value)) return 'Must contain number';
            return true;
        }
    },
    confirmPassword: {
        type: 'password',
        required: true,
        validate: (value, allData) => {
            return value === allData.password || 'Passwords do not match';
        }
    },
    age: {
        type: 'number',
        min: 13,
        max: 120,
        validate: (value) => {
            if (value < 18) return 'Must be 18 or older for full access';
            return true;
        }
    }
};

Seamless integration with Domma's reactive model system for two-way data binding and persistence.

// Create model with persistence
const userModel = M.create(userBlueprint, initialData, {
    persist: 'user-profile'  // Auto-save to localStorage
});

// Form automatically binds to model
const form = Domma.forms.create(userBlueprint, userModel.get(), {
    model: userModel,  // Two-way binding
    onSubmit: (data, formInstance) => {
        userModel.set(data);  // Updates model and saves to storage
    }
});

// Listen for model changes
userModel.onChange((changes) => {
    console.log('Model updated:', changes);
});