Introduction
The schema-first form and workflow engine for React. Define forms as data, get type safety, validation, conditions, and multi-step workflows with any UI library.
rilaykit
The schema-first form and workflow engine for React.
// Register components once
const rilay = ril.create()
.addComponent('input', { renderer: YourInput })
.addComponent('select', { renderer: YourSelect });
// Define forms as data structures
const onboarding = rilay.form('onboarding')
.add({ id: 'email', type: 'input', validation: { validate: [required(), email()] } })
.add({ id: 'plan', type: 'select', props: { options: plans } })
.add({ id: 'company', type: 'input', conditions: { visible: when('plan').equals('business') } });
// Render with full type safety — anywhere, with any design system
<Form formConfig={onboarding} onSubmit={handleSubmit}>
<FormField fieldId="email" />
<FormField fieldId="plan" />
<FormField fieldId="company" />
</Form>RilayKit is fully headless — it manages state, validation, and logic. You own the components, the markup, and the styling.
Why RilayKit
Most form libraries are imperative: you write JSX, sprinkle in validation, and manually wire state. Every form is a one-off. Multi-step flows require custom state machines. Type safety is bolted on after the fact.
RilayKit takes a different approach. Forms are declarative data structures — serializable, composable, and type-safe from registration to render.
| Traditional Libraries | RilayKit | |
|---|---|---|
| Form definition | Scattered across JSX | Centralized data structure |
| Type safety | Manual type annotations | Automatic type propagation |
| Validation | Library-specific adapters | Any Standard Schema library, directly |
| Conditions | useEffect + state | Declarative when() API |
| Multi-step | Build your own | Built-in workflow engine |
| Serialization | Not possible | .toJSON() / .fromJSON() |
Core Ideas
Type Propagation
Register a component with addComponent('input', { renderer: Input }) and TypeScript knows its props everywhere. Use type: 'input' in a form definition and your IDE autocompletes the right props. Use an unregistered type and the compiler catches it.
rilay.form('test')
.add({
type: 'input', // Autocompletes from registry
props: { label: '' } // Typed as InputProps
})
.add({
type: 'unknown', // Compile error — not in registry
});Universal Validation
One validate field. Any validation library. No adapters.
// Built-in validators
validation: { validate: [required(), email(), minLength(8)] }
// Zod — directly, no adapter needed
validation: { validate: z.string().email() }
// Mix them
validation: { validate: [required(), z.string().min(8)] }Declarative Conditions
Control field visibility and behavior without useEffect:
.add({
id: 'company',
type: 'input',
conditions: {
visible: when('accountType').equals('business'),
required: when('plan').in(['pro', 'enterprise']),
}
})Workflow Engine
Not a wizard with hidden divs. A real engine with navigation guards, persistence, analytics, and plugins:
const flow = rilay.flow('onboarding')
.addStep({ id: 'account', title: 'Account', formConfig: accountForm })
.addStep({ id: 'profile', title: 'Profile', formConfig: profileForm })
.configure({
persistence: { adapter: 'localStorage', key: 'onboarding' },
analytics: { onStepComplete: (id) => track('step_done', { step: id }) },
});Packages
RilayKit is modular. Install only what you need.
@rilaykit/core
Type system, component registry, validation engine, and conditional logic. Required as the foundation for all RilayKit usage.
@rilaykit/forms
Form builder with React hooks and components. Build single-page forms with fluent API and full type safety.
@rilaykit/workflow
Multi-step workflows with navigation, persistence, analytics, and plugin system. For onboarding flows and complex processes.
Standard Schema Support
Native support for Standard Schema — use Zod, Yup, Valibot, ArkType and other validation libraries directly without adapters.
Design Principles
Headless Architecture
RilayKit generates no HTML and no CSS. It connects to your existing components through a renderer system, giving you complete control over markup, styling, and accessibility. Works with any design system — Material UI, shadcn/ui, Chakra, or your own.
Schema-First
Forms and workflows are data structures, not JSX trees. Serialize them, store them in a database, generate them from a visual builder, diff them in version control.
Type Safety First
Built from the ground up with TypeScript. The type accumulation pattern ensures autocompletion, compile-time validation, and zero runtime type errors across your entire form system.