Schema-Driven
Developer Toolkit
A framework-agnostic toolkit for building schema-driven interfaces. Define your UI in JSON, get automatic Zod validation and type safety. Use with React today, more adapters coming soon.
{
"id": "contact-form",
"title": "Contact Form",
"mode": "free",
"steps": [
{
"id": "contact-step",
"title": "Contact Information",
"elements": [
{
"id": "submission-status",
"name": "submissionStatus",
"$type": "submission-alert",
"showOn": [
"pending",
"success"
],
"pendingMessage": "Pending Submission",
"successMessage": "Submission Successful"
},
{
"id": "email",
"name": "email",
"$type": "input",
"inputType": "email",
"label": "Email Address",
"placeholder": "Enter your email",
"rules": [
{
"type": "required",
"message": "Email is required"
},
{
"type": "email",
"message": "Please enter a valid email address"
}
]
},
{
"id": "message",
"name": "message",
"$type": "textarea",
"label": "Message",
"placeholder": "Your message...",
"rules": [
{
"type": "minLength",
"value": 10,
"message": "Message must be at least 10 characters long"
}
]
},
{
"$type": "submit",
"label": "Submit Form",
"name": "submit"
}
]
}
],
"actions": [
{
"id": "contact-submit",
"$type": "submit",
"description": "Submit contact form",
"successMessage": "Message sent! Thanks for reaching out.",
"errorMessage": "Failed to send message. Please try again.",
"enabled": true,
"endpoint": "/api/submit-demo",
"method": "POST"
},
{
"id": "reset-form",
"$type": "reset",
"enabled": true,
"resetToDefaults": true
}
]
}{
"id": "contact-form",
"title": "Contact Form",
"mode": "free",
"steps": [
{
"id": "contact-step",
"title": "Contact Information",
"elements": [
{
"id": "submission-status",
"name": "submissionStatus",
"$type": "submission-alert",
"showOn": [
"pending",
"success"
],
"pendingMessage": "Pending Submission",
"successMessage": "Submission Successful"
},
{
"id": "email",
"name": "email",
"$type": "input",
"inputType": "email",
"label": "Email Address",
"placeholder": "Enter your email",
"rules": [
{
"type": "required",
"message": "Email is required"
},
{
"type": "email",
"message": "Please enter a valid email address"
}
]
},
{
"id": "message",
"name": "message",
"$type": "textarea",
"label": "Message",
"placeholder": "Your message...",
"rules": [
{
"type": "minLength",
"value": 10,
"message": "Message must be at least 10 characters long"
}
]
},
{
"$type": "submit",
"label": "Submit Form",
"name": "submit"
}
]
}
],
"actions": [
{
"id": "contact-submit",
"$type": "submit",
"description": "Submit contact form",
"successMessage": "Message sent! Thanks for reaching out.",
"errorMessage": "Failed to send message. Please try again.",
"enabled": true,
"endpoint": "/api/submit-demo",
"method": "POST"
},
{
"id": "reset-form",
"$type": "reset",
"enabled": true,
"resetToDefaults": true
}
]
}What's in Schema Engine?
Everything you need to build powerful, maintainable forms with minimal code.
JSON Configuration
Define forms entirely in JSON. No component boilerplate, just data.
Auto Validation
Zod schemas generated automatically from your form rules.
Responsive Grids
Built-in grid system with breakpoint-aware layouts.
Conditional Logic
Show, hide, and transform fields based on form state.
Action System
Sequential action execution for complex form workflows.
Multi-step Forms
Wizard-style forms with progress tracking and validation per step.
Get Started in Seconds
Three steps to your first schema-driven form
Define Your Schema
Create your form configuration in JSON format with field definitions and validation rules.
Get Type Safety
Zod validation schemas and TypeScript types are automatically generated from your config.
Render & Submit
Use the React adapter to render your form with real-time validation and action handling.
Modular Packages
Use exactly what you need. Each package is designed to work independently or together.
@schema-engine/forms
Core engine for building type-safe, JSON-configured forms.
@schema-engine/forms-react
React adapter with production-ready components and hooks.
@schema-engine/actions
Domain-agnostic sequential action execution system.
@schema-engine/registry
Base registry system for building extensible architectures.