Valibot Lightweight Validation

# Valibot Lightweight Validation for Google Antigravity IDE

Build bundle-efficient validation with Valibot using Google Antigravity IDE. This guide covers modular schemas, tree-shaking, and migration from Zod.

## Schema Definition

```typescript
// src/schemas/user.ts
import * as v from "valibot";

export const UserSchema = v.object({
  id: v.pipe(v.string(), v.uuid()),
  email: v.pipe(v.string(), v.email()),
  name: v.pipe(v.string(), v.minLength(2), v.maxLength(100)),
  role: v.picklist(["user", "admin", "moderator"]),
  avatar: v.optional(v.pipe(v.string(), v.url())),
  settings: v.object({
    theme: v.picklist(["light", "dark", "system"]),
    notifications: v.boolean(),
    language: v.pipe(v.string(), v.regex(/^[a-z]{2}(-[A-Z]{2})?$/)),
  }),
  createdAt: v.pipe(v.string(), v.isoDateTime()),
  updatedAt: v.pipe(v.string(), v.isoDateTime()),
});

export type User = v.InferOutput<typeof UserSchema>;

export const CreateUserSchema = v.omit(UserSchema, ["id", "createdAt", "updatedAt"]);
export type CreateUser = v.InferOutput<typeof CreateUserSchema>;

export const UpdateUserSchema = v.partial(v.omit(UserSchema, ["id", "createdAt", "updatedAt"]));
export type UpdateUser = v.InferOutput<typeof UpdateUserSchema>;

export const LoginSchema = v.object({
  email: v.pipe(v.string(), v.email("Please enter a valid email")),
  password: v.pipe(
    v.string(),
    v.minLength(8, "Password must be at least 8 characters"),
    v.regex(/[A-Z]/, "Password must contain an uppercase letter"),
    v.regex(/[0-9]/, "Password must contain a number")
  ),
  rememberMe: v.optional(v.boolean(), false),
});
```

## Validation Helpers

```typescript
// src/lib/validate.ts
import * as v from "valibot";

export function validate<T extends v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>>(
  schema: T,
  data: unknown
): v.InferOutput<T> {
  return v.parse(schema, data);
}

export function safeValidate<T extends v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>>(
  schema: T,
  data: unknown
): { success: true; data: v.InferOutput<T> } | { success: false; issues: v.BaseIssue<unknown>[] } {
  const result = v.safeParse(schema, data);
  if (result.success) {
    return { success: true, data: result.output };
  }
  return { success: false, issues: result.issues };
}

export function formatIssues(issues: v.BaseIssue<unknown>[]): Record<string, string> {
  const formatted: Record<string, string> = {};
  for (const issue of issues) {
    const path = issue.path?.map((p) => p.key).join(".") || "root";
    formatted[path] = issue.message;
  }
  return formatted;
}
```

## Form Integration

```typescript
// src/components/LoginForm.tsx
"use client";

import { useState } from "react";
import * as v from "valibot";
import { LoginSchema } from "@/schemas/user";
import { formatIssues } from "@/lib/validate";

export function LoginForm() {
  const [formData, setFormData] = useState({ email: "", password: "", rememberMe: false });
  const [errors, setErrors] = useState<Record<string, string>>({});

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const result = v.safeParse(LoginSchema, formData);

    if (!result.success) {
      setErrors(formatIssues(result.issues));
      return;
    }

    setErrors({});
    login(result.output);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={formData.email}
        onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
      />
      {errors.email && <span className="error">{errors.email}</span>}

      <input
        type="password"
        value={formData.password}
        onChange={(e) => setFormData((prev) => ({ ...prev, password: e.target.value }))}
      />
      {errors.password && <span className="error">{errors.password}</span>}

      <button type="submit">Login</button>
    </form>
  );
}
```

## Best Practices for Google Antigravity IDE

When using Valibot with Google Antigravity, leverage tree-shaking for minimal bundles. Use pipe for composable validations. Create custom validators for complex rules. Let Gemini 3 migrate Zod schemas to Valibot.

Google Antigravity excels at optimizing validation bundles with Valibot.