all posts

did Zod v4 make Valibot obsolete?

i’ll compare Zod, Zod Mini and Valibot by bundle size

let’s initialize a fresh React app with npm create vite@latest and make it empty:

- vite.svg
- App.css
- index.css
- react.svg

// main.tsx
- import './index.css'
// App.tsx
function App() {
  return <></>;
}

export default App;

install Zod and Valibot: npm install zod valibot

add some schemas:

// Zod
const PasswordSchema = z
  .string()
  .min(8, "Password must be at least 8 characters long")
  .regex(/[a-zA-Z]/, "Password must contain at least one letter")
  .regex(/[0-9]/, "Password must contain at least one number")
  .regex(
    /[^a-zA-Z0-9]/,
    "Password must contain at least one special character",
  );

const SignUpSchema = z
  .object({
    email: z
      .email()
      .refine(
        (email) => !registeredEmails.includes(email.toLowerCase()),
        "Email is already in use",
      ),
    username: z.string().min(2, "Username must be at least 2 characters long"),
    password: PasswordSchema,
    confirmPassword: PasswordSchema,
  })
  .refine(
    ({ password, confirmPassword }) => password === confirmPassword,
    "Passwords don't match",
  );

// 2 more schemas:
// - abstract AddEntry with title, description, date, and *subscribe* checkbox
// - AddPerson with email, fullName, phone, birthday
// ...

// Zod Mini - same
// ...

// Valibot - same
// ...

you can imagine how other schemas look, as well as you can imagine how components look (the code would take too much space if i pasted it). the dependency tree looks like the following:

Main:
  ZodForms/ZodMiniForms/ValibotForms:
    SignUpForm:
      Form
        InputField
        ... more InputField
    AddEntryForm:
      ... same
    AddPersonForm:
      ... same

the source code is located in this repository, at blog-data/zod-vs-valibot. take a look if you want!

to test bundle size, i created 3 builds: with ZodForms, ZodMiniForms and ValibotForms in main.tsx. the results for gzipped JS files are the following:

ZodZod MiniValibot
71.53kb65.41kb62.07kb

as you can see, there’s practically no difference. i like syntax of Zod Mini and Valibot more, but types are a bit more flexible in the Zod group, so i’d rather use Zod Mini. i’ll test parsing speed later, as testing bundle sizes took too much time

encountered limitations of solutions

  • Valibot has no phone number validator

thoughts?

add a thought