⚡️ Replace Zod with Valibot for form validation

README.md

@@ -4,7 +4,7 @@ Monorepo template for creating a modern web application.
 
 ## Tech Stack
 
-- **Frontend**: [Svelte 5](https://svelte.dev/) + [SvelteKit](https://svelte.dev/docs/kit/) + [TypeScript](https://www.typescriptlang.org/) + [Tailwind CSS 4](https://tailwindcss.com/) + [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) + [Lucide Svelte](https://lucide.dev/guide/packages/lucide-svelte) + [Superforms](https://superforms.rocks/) + [Zod](https://zod.dev/)
+- **Frontend**: [Svelte 5](https://svelte.dev/) + [SvelteKit](https://svelte.dev/docs/kit/) + [TypeScript](https://www.typescriptlang.org/) + [Tailwind CSS 4](https://tailwindcss.com/) + [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) + [Lucide Svelte](https://lucide.dev/guide/packages/lucide-svelte) + [Superforms](https://superforms.rocks/) + [Valibot](https://valibot.dev/)
 - **API**: [Supabase](https://supabase.com/) (PostgreSQL, Auth, Realtime, Storage)
 - **Build System**: [Turborepo](https://turborepo.org/) + [Bun](https://bun.sh/) + [Vite](https://vitejs.dev/)
 - **Quality Tools**: [ESLint 9](https://eslint.org/), [Prettier](https://prettier.io/), [CSpell](https://cspell.org/), [markuplint](https://markuplint.dev/)

apps/pages/public/index.html

@@ -129,9 +129,9 @@ <h3 class="mb-1.5 text-xl font-semibold md:text-2xl">Tech Stack</h3>
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
-                    href="https://zod.dev/"
+                    href="https://valibot.dev/"
                     class="font-semibold text-blue-500"
-                    >Zod</a
+                    >Valibot</a
                   >
                 </li>
                 <li

apps/pages/tests/external-links.txt

@@ -24,7 +24,7 @@ https://svelte.dev/docs/kit/
 https://tailwindcss.com
 https://turborepo.org
 https://usagizmo.com
+https://valibot.dev/
 https://vitejs.dev
 https://webapp-template-pages.usagizmo.com
-https://www.typescriptlang.org
-https://zod.dev/
+https://www.typescriptlang.org

apps/web/README.md

@@ -9,7 +9,7 @@ Modern web application built with [Svelte 5](https://svelte.dev/), [TypeScript](
 - **Authentication**: @supabase/ssr for server-side auth
 - **Forms**: Superforms with Formsnap for type-safe form handling
 - **Icons**: Lucide Svelte for consistent iconography
-- **Validation**: markuplint for HTML validation, Zod for schema validation
+- **Validation**: markuplint for HTML validation, Valibot for schema validation
 - **Testing**: Bun test
 - **Linting**: ESLint, Prettier
 
@@ -27,7 +27,7 @@ src/lib/
 │   └── ui/              # Reusable UI components (shadcn-svelte)
 ├── constants/           # Application constants
 ├── helpers/             # Business logic and API operations (comment handling, authentication, etc.)
-├── schemas/             # Zod validation schemas
+├── schemas/             # Valibot validation schemas
 ├── stores/              # State management (class-based)
 │   └── local/           # Component-scoped stores
 ├── types/               # TypeScript type definitions

apps/web/package.json

@@ -28,7 +28,7 @@
     "camelcase-keys": "^10.0.0",
     "cdate": "^0.0.7",
     "snakecase-keys": "^9.0.1",
-    "zod": "^4.1.12"
+    "valibot": "^1.2.0"
   },
   "devDependencies": {
     "@internationalized/date": "^3.10.0",

apps/web/src/lib/components/pages/auth/ProfileForm.svelte

@@ -3,7 +3,7 @@
   import { Textarea } from '@repo/shared/components/ui/textarea';
   import { toast } from 'svelte-sonner';
   import { defaults, superForm } from 'sveltekit-superforms';
-  import { zod4 } from 'sveltekit-superforms/adapters';
+  import { valibot } from 'sveltekit-superforms/adapters';
 
   import { ProfileSchema } from '$lib/schemas/profile';
   import { userStore } from '$lib/stores';
@@ -13,11 +13,11 @@
       {
         bio: userStore.profile?.bio ?? '',
       },
-      zod4(ProfileSchema),
+      valibot(ProfileSchema),
     ),
     {
       SPA: true,
-      validators: zod4(ProfileSchema),
+      validators: valibot(ProfileSchema),
       resetForm: false,
       onUpdate: async ({ form }) => {
         if (!form.valid) return;

apps/web/src/lib/schemas/auth.ts

@@ -1,15 +1,16 @@
-import { z } from 'zod';
+import * as v from 'valibot';
 
-export const LoginSchema = z.object({
-  email: z.string().email('Please enter a valid email address'),
-  password: z.string().min(6, 'Password must be at least 6 characters long'),
+export const LoginSchema = v.object({
+  email: v.pipe(v.string(), v.email('Please enter a valid email address')),
+  password: v.pipe(v.string(), v.minLength(6, 'Password must be at least 6 characters long')),
 });
 
-export const SignupSchema = z.object({
-  email: z.string().email('Please enter a valid email address'),
-  password: z.string().min(6, 'Password must be at least 6 characters long'),
-  displayName: z
-    .string()
-    .min(1, 'Please enter a display name')
-    .max(50, 'Display name must be within 50 characters'),
+export const SignupSchema = v.object({
+  email: v.pipe(v.string(), v.email('Please enter a valid email address')),
+  password: v.pipe(v.string(), v.minLength(6, 'Password must be at least 6 characters long')),
+  displayName: v.pipe(
+    v.string(),
+    v.minLength(1, 'Please enter a display name'),
+    v.maxLength(50, 'Display name must be within 50 characters'),
+  ),
 });

apps/web/src/lib/schemas/profile.ts

@@ -1,5 +1,5 @@
-import { z } from 'zod';
+import * as v from 'valibot';
 
-export const ProfileSchema = z.object({
-  bio: z.string().max(20, 'Bio must be within 20 characters'),
+export const ProfileSchema = v.object({
+  bio: v.pipe(v.string(), v.maxLength(20, 'Bio must be within 20 characters')),
 });

apps/web/src/routes/auth/login/+page.svelte

@@ -5,16 +5,16 @@
   import { Input } from '@repo/shared/components/ui/input';
   import { toast } from 'svelte-sonner';
   import { defaults, superForm } from 'sveltekit-superforms';
-  import { zod4 } from 'sveltekit-superforms/adapters';
+  import { valibot } from 'sveltekit-superforms/adapters';
 
   import { LoginSchema } from '$lib/schemas/auth';
   import { userStore } from '$lib/stores';
 
   const loginFormData = superForm(
-    defaults({ email: 'email@add.com', password: 'password0' }, zod4(LoginSchema)),
+    defaults({ email: 'email@add.com', password: 'password0' }, valibot(LoginSchema)),
     {
       SPA: true,
-      validators: zod4(LoginSchema),
+      validators: valibot(LoginSchema),
       onUpdate: async ({ form }) => {
         if (!form.valid) return;
         const data = form.data;

apps/web/src/routes/auth/signup/+page.svelte

@@ -5,16 +5,16 @@
   import { Input } from '@repo/shared/components/ui/input';
   import { toast } from 'svelte-sonner';
   import { defaults, superForm } from 'sveltekit-superforms';
-  import { zod4 } from 'sveltekit-superforms/adapters';
+  import { valibot } from 'sveltekit-superforms/adapters';
 
   import { SignupSchema } from '$lib/schemas/auth';
   import { userStore } from '$lib/stores';
 
   const signupFormData = superForm(
-    defaults({ email: '', password: '', displayName: '' }, zod4(SignupSchema)),
+    defaults({ email: '', password: '', displayName: '' }, valibot(SignupSchema)),
     {
       SPA: true,
-      validators: zod4(SignupSchema),
+      validators: valibot(SignupSchema),
       onUpdate: async ({ form }) => {
         if (!form.valid) return;
         const data = form.data;

packages/shared/package.json

@@ -73,7 +73,7 @@
     "@supabase/supabase-js": "^2.78.0",
     "api": "workspace:*",
     "cdate": "^0.0.7",
-    "zod": "^4.1.12"
+    "valibot": "^1.2.0"
   },
   "devDependencies": {
     "@internationalized/date": "^3.10.0",