Instantly generate typesafe Supabase Edge Functions with Hono and Tanstack Query clients direct from API schema.
- 🛑 No more API drift
- 🧹 No more cleaning up LLM generated mess
- 🔄 No more manual code updates in 27 places
This repo includes code generators for:
- Frontend: Tanstack React Query hooks, Zod and TypeScript
- Backend: Supabase Edge Functions with Hono, Zod and TypeScript
When building full-stack apps, you end up writing the same types and validation logic multiple times:
- Define your API endpoints on the server
- Write corresponding TypeScript types for the client
- Create validation schemas for runtime checks
- Build data fetching hooks for your React components
- Keep everything synchronized when things change
This gets tedious fast, and it's easy for things to drift out of sync.
Instead of writing everything multiple times, you define your API once using TypeSpec (think OpenAPI but with better TypeScript integration). Then SKMTC generates:
- React Query hooks for data fetching
- Zod schemas for validation
- Supabase Edge Functions with proper typing
- All the TypeScript interfaces you need
When you change your API definition, regenerate the code and everything stays in sync.
- A Supabase project
- Node.js and pnpm
git clone https://github.com/skmtc/skmtc-supabase-starter
cd skmtc-supabase-starter
pnpm install# Login to Skmtc - first time only
pnpm skmtc login
# Deploy code generators - first time only
pnpm skmtc deploy
# Generate code from your TypeSpec definitions
pnpm skmtc generateFront end: Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in .env
Backend: Set SUPABASE_URL and SUPABASE_PUBLISHABLE_KEY in supabase/functions/.env
# Start Vite dev server
pnpm dev
# Start Supabase dev server
supabase start
supabase functions serveCheck out api/petstore-dogs.tsp - it's a simple API definition that becomes:
- 🎯 Typesafe React Query hooks (in
src/) - 🛡️ Runtime validation with Zod
- ⚡ Supabase Edge Functions (in
supabase/functions/) - 📝 Full TypeScript types throughout
Frontend: React 19, Vite, TanStack Query, TypeScript
Backend: Supabase, Hono (for Edge Functions)
Tooling: ESLint, Prettier, TypeSpec
Let's say you want to add a new endpoint to get a specific dog:
1. Edit your API definition:
// api/petstore-dogs.tsp
@get
@route("/dogs/{id}")
op getDog(@path id: string): Dog | NotFound;2. Regenerate:
# Compile TypeSpec to OpenAPI
pnpm build:api
# Run code generators
pnpm skmtc generateIf you want to customize the generated code, you can edit the code generators in .skmtc/. Be sure to run pnpm skmtc deploy to deploy the changes before running pnpm skmtc generate again.
- Don't edit files with
*.generated.*in the name - they get overwritten - The
.skmtc/folder contains the code generators, not the generated output - Run
pnpm build:apiafter editing TypeSpec files - Your generated code lives in
src/andsupabase/functions/
MIT - do what you want with it.
If this saves you time, consider starring the repo 🙂