Standard Schema

Overview

Vex implements Standard Schema v1, making it compatible with a wide ecosystem of libraries.

Compatible Libraries

simple-icons:trpc

tRPC

Type-safe API routes

simple-icons:reactquery

TanStack Form

Form state management

simple-icons:hono

Hono

Web framework validation

simple-icons:remix

Remix

Full-stack framework

Usage

All Vex validators expose the ~standard property:

import { object, str, email } from '@sylphx/vex'

const schema = object({
  email: str(email),
})

// Access Standard Schema interface
schema['~standard'].validate(data)

tRPC Example

import { initTRPC } from '@trpc/server'
import { object, str, email } from '@sylphx/vex'

const t = initTRPC.create()

const userSchema = object({
  email: str(email),
})

const appRouter = t.router({
  createUser: t.procedure
    .input(userSchema)
    .mutation(({ input }) => {
      // input is typed as { email: string }
      return { email: input.email }
    }),
})

TanStack Form Example

import { useForm } from '@tanstack/react-form'
import { object, str, email, min } from '@sylphx/vex'

const formSchema = object({
  email: str(email),
  password: str(min(8)),
})

function LoginForm() {
  const form = useForm({
    defaultValues: { email: '', password: '' },
    validators: {
      onChange: formSchema,
    },
  })

  // ...
}

Hono Example

import { Hono } from 'hono'
import { vValidator } from '@hono/valibot-validator' // works with Standard Schema
import { object, str, email } from '@sylphx/vex'

const app = new Hono()

const userSchema = object({
  email: str(email),
})

app.post('/user', vValidator('json', userSchema), (c) => {
  const data = c.req.valid('json')
  return c.json(data)
})