Comparison with Other Libraries

Overview

There is no single "best" form library — the right choice depends on your project's complexity. RilayKit is schema-first and declarative: you describe the entire form as data (fields, validation, conditions, workflows). That pays off for multi-step workflows and forms that are serialized, stored, or generated dynamically — and is overkill for a simple login page.

RilayKit vs React Hook Form

React Hook Form (RHF) is the most popular React form library: lightweight, fast, minimal re-renders.

Key Differences

• Configuration model: RHF is imperative — fields register in JSX via register() or Controller. RilayKit is declarative — the whole form is a config object built with a fluent API.
• Rendering: RHF uses refs and uncontrolled inputs. RilayKit uses controlled components through a renderer registry, so you control how each field type renders.
• Serialization: RilayKit configs are plain data (.toJSON() / .fromJSON()). RHF forms are runtime objects tied to the component tree.
• Multi-step workflows: built into RilayKit (navigation, conditional steps, persistence, analytics). RHF needs custom code.
• Ecosystem: RHF's is far larger (resolvers, DevTools, community examples).

Code Comparison

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}
      <input {...register('password')} type="password" />
      {errors.password && <span>{errors.password.message}</span>}
      <button type="submit">Login</button>
    </form>
  );
}

import { ril, required, email, minLength } from 'rilaykit';
import { Form, FormField } from 'rilaykit/react';

const r = ril.create(); // component registry configured elsewhere

const loginForm = r
  .form('login')
  .add({
    id: 'email',
    type: 'input',
    props: { label: 'Email' },
    validation: { validate: [required(), email()] },
  })
  .add({
    id: 'password',
    type: 'input',
    props: { label: 'Password', type: 'password' },
    validation: { validate: [required(), minLength(8)] },
  });

function LoginForm() {
  return (
    <Form of={loginForm} onSubmit={handleLogin}>
      <FormField id="email" />
      <FormField id="password" />
      <button type="submit">Login</button>
    </Form>
  );
}

Both are concise for a simple form. The gap widens with conditional fields, multi-step flows, and dynamically generated forms — that's where the declarative model pays off.

When to Choose React Hook Form

• Standalone forms where raw performance and bundle size matter most
• You prefer uncontrolled, ref-based inputs
• You rely on the RHF ecosystem
• No need for serialization or dynamic generation

When to Choose RilayKit

• Multi-step workflows with conditional navigation
• Form configs stored in a database or generated from an API
• Multi-brand apps where the same form logic renders per design system
• Built-in analytics and persistence for long-running workflows

RilayKit vs Formik

Formik pioneered many React form patterns but has seen reduced maintenance in recent years.

Key Differences

• Maintenance: Formik activity is low; RilayKit is actively developed.
• Rendering: Formik's <Field> / <ErrorMessage> render HTML directly. RilayKit is fully headless — all rendering goes through your component registry.
• Performance: Formik re-renders heavily via React context on large forms.
• Features: conditional fields, workflows, serialization, and analytics all require custom code in Formik.

When to Choose Formik

• Legacy projects where migration cost outweighs the benefits
• Quick prototypes where the team already knows Formik

When to Choose RilayKit

• New projects wanting active maintenance and modern tooling
• Conditional logic, cross-field validation, workflows, or a headless architecture

RilayKit vs TanStack Form

TanStack Form is the closest philosophical competitor: TypeScript-first, headless, type-safe.

Key Differences

• Paradigm: TanStack Form is field-centric (useField, hook-driven per field). RilayKit is schema-centric — the form is one config object, treatable as data.
• Serialization: RilayKit configs serialize; TanStack Form configs contain functions and hooks.
• Built-ins: RilayKit ships a workflow engine, persistence adapters, analytics callbacks, declarative conditions (when()), and a plugin system. TanStack Form stays minimal and leaves those to the app.
• Framework support: TanStack Form supports React, Vue, Solid, Angular, and Lit. RilayKit is React-only, enabling deeper React-specific optimizations.
• Component registry: register field types once, reference by key everywhere. No TanStack equivalent.

When to Choose TanStack Form

• Multi-framework projects
• You prefer field-by-field, hook-driven configuration
• You're invested in the TanStack ecosystem and want a minimal core

When to Choose RilayKit

• React-only projects
• Schema-first, serializable configs (form builders, CMS-driven forms)
• Multi-step workflows with persistence and analytics
• Declarative conditions and a type-safe component registry

Feature Matrix

Bundle sizes are approximate gzipped values; RilayKit's modular packages (@rilaykit/core, @rilaykit/forms, @rilaykit/workflow) mean you only pay for what you import.

Summary