🧙 WizardFormDeclarative, type-safe wizard framework for TypeScript

Build powerful multi-step forms with confidence

Get Started

View on GitHub

🚀

Declarative Wizard Definitions

Define your wizards using simple, type-safe configurations. No imperative control flow to manage.

⚡

Framework Agnostic Core

Use the core wizard engine with React, Vue, or any framework. State machine architecture ensures consistent behavior.

🔒

Type Safety Throughout

Full TypeScript support from wizard definition to runtime. Catch errors before they reach production.

🔄

Flexible Transitions

Static routes, conditional branching, or async resolvers - handle any navigation pattern with ease.

✅

Built-in Validation

Sync or async validators, required fields, and integration with Standard Schema validators (Valibot, ArkType, etc.).

🎯

Lifecycle Hooks

Run custom logic on step enter/leave, wizard completion, or state changes with full event system.

Quick Start

Install the core package:

bash

npm install @gooonzick/wizard-core

For React, Vue, Svelte or Solid integration:

bash

npm install @gooonzick/wizard-react
# or
npm install @gooonzick/wizard-vue
# or
npm install @gooonzick/wizard-svelte
# or
npm install @gooonzick/wizard-solid

Define Your First Wizard

typescript

import { createWizard } from "@gooonzick/wizard-core";

type FormData = { name: string; email: string };

const wizard = createWizard<FormData>("signup")
  .initialStep("personal-info")
  .addStep({
    id: "personal-info",
    next: { type: "static", to: "contact-info" },
    validate: (data) => ({
      valid: Boolean(data.name),
      errors: data.name ? undefined : { name: "Name is required" },
    }),
  })
  .addStep({
    id: "contact-info",
    previous: { type: "static", to: "personal-info" },
    validate: (data) => ({
      valid: Boolean(data.email),
      errors: data.email ? undefined : { email: "Email is required" },
    }),
  })
  .build();

Next Steps

📖 Getting Started Guide - Learn the basics
🎨 React Integration · Vue Integration
📚 API Reference - Detailed API documentation