Next.js, TypeScript, Zod, Shadcn/ui

Build forms visually. Export clean code.

Design visually, export unlimited code, and use managed submissions only when it saves your team time.

Start building free
Unlimited code export
Managed cloud when needed
Own your code

Contact form

3 fields

Ready to export
Full NameText
EmailEmail
MessageTextarea

Works with tools you already use

Next.js
TypeScript
shadcn/ui
React Hook Form
Zod
Tailwind CSS

Features

Build forms your team can ship.

Make the form once, then export code you can own.

Type-safe by default

Get a Zod schema and TypeScript types from your form.

const schema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
  company: z.string().optional(),
  role: z.string().min(2),
  acceptTerms: z.boolean(),
})

Visual drag and drop

Drag fields, change types, and see updates right away.

Ready-made templates

Start with templates for contact, signup, and surveys.

Multi-step forms

Build forms with steps, checks, and clear progress.

Faster delivery

Ship forms faster with less repeat work.

Clean code output

Export React Hook Form and shadcn/ui code you can edit.

<FormField name="email" render={({ field }) => (
  <FormItem>
    <FormLabel>Email</FormLabel>
    <FormControl><Input {...field} /></FormControl>
    <FormMessage />
  </FormItem>
)}/>
Start building free

How it works

Three quick steps.

Design your form

Pick a template or start blank. Add fields and labels. Drag, drop, and preview in one place.

01

Configure validation

Set required fields and simple rules. Schema and types update for you.

02

Export and ship

Export files and move them into your app. Edit anything after export.

03

Code output

Export code your app can use now.

Get schema, form, and page files. Copy, paste, and edit.

Zod schema + TypeScript types

shadcn/ui form code, already wired

Page file ready to use

Start building free
1import { z } from "zod"
2

3export const contactSchema = z.object({
4  name: z.string().min(2, {
5    message: "Name must be at least 2 characters.",
6  }),
7  email: z.string().email({
8    message: "Please enter a valid email address.",
9  }),
10  company: z.string().optional(),
11  message: z.string().min(10, {
12    message: "Message must be at least 10 characters.",
13  }),
14})
15

16export type ContactFormValues =
17  z.infer<typeof contactSchema>

Pricing

Export free forever. Upgrade for managed scale.

Free
Build and export unlimited code. Upgrade only when managed cloud limits become part of your shipping workflow.
  • Building forms and live previews
  • Browse and use all available templates
  • Unlimited code export
  • Publish up to 2 active forms
  • Up to 100 responses per published form
  • Managed submissions endpoint, logs, and cloud form operations
  • Shared workspaces, invite others to co-manage forms
Start building free
Pro
$29 / month
Managed cloud submissions and higher form-response capacity for production use.
  • Building forms and live previews
  • Browse and use all available templates
  • Unlimited code export
  • Publish up to 25 active forms
  • Virtually unlimited submissions and responses (fair use)
  • Managed submissions endpoint, logs, and cloud form operations
  • Shared workspaces, invite others to co-manage forms

FAQ

Quick answers.

What version of Next.js is supported?
It works with Next.js 14 and 15 (App Router). It also works in most React apps.
Is there a free plan available?
Yes. Free includes unlimited code export, 2 active published forms, and 100 responses per form. Pro is $29/month or $290/year with 25 active forms and virtually unlimited submissions/responses (fair use).

Get started

Build your next form fast.

Export free forever. Upgrade when you need managed cloud scale.

Start building free