Full-Stack Framework for the AI Era

A truly full-stack TypeScript framework that just works.

React, Node.js, and Prisma — wired together with auth, jobs, and deployment built in. Ship in a day and own every line.Designed for humans, works beautifully with AI.

Get Started Documentation

1app todoApp {
2  wasp: { version: "^0.23.0" },
3  title: "ToDo App",
4  auth: {
5    userEntity: User,
6    methods: { google: {}, gitHub: {}, email: {} },
7    onAuthFailedRedirectTo: "/login"
8  }
9}
10
11route RootRoute { path: "/", to: MainPage }
12page MainPage {
13  authRequired: true,
14  component: import { MainPage } from "@src/MainPage" // <-- React
15}
16
17query getTasks {
18  fn: import { getTasks } from "@src/tasks", // <-- Node.js
19  entities: [Task] // <-- Automatic cache invalidation.
20}

1model User {
2  id    Int     @id @default(autoincrement())
3  email String  @unique
4  tasks Task[]
5}
6
7model Task {
8  id          Int     @id @default(autoincrement())
9  description String
10  isDone      Boolean @default(false)
11  user        User    @relation(fields: [userId], references: [id])
12  userId      Int
13}

1import { getTasks, useQuery } from "wasp/client/operations"
2
3export function MainPage() {
4  const { data: tasks } = useQuery(getTasks)
5
6  return (
7    <div>
8      <h1>Tasks</h1>
9      {tasks?.map(task => (
10        <div key={task.id}>{task.description}</div>
11      ))}
12    </div>
13  )
14}

1import { type GetTasks } from "wasp/server/operations"
2import { HttpError } from "wasp/server"
3import { Task } from "wasp/entities"
4
5export const getTasks: GetTasks<void, Task[]> = async (_args, context) => {
6  if (!context.user) throw new HttpError(401)
7
8  return context.entities.Task.findMany({
9    where: { user: { id: context.user.id } },
10    orderBy: { id: "desc" },
11  })
12}

// properties

01High Level

A uniquely powerful config layer serves as a backbone that connects all parts of the stack - frontend, backend, database, and deployment.

02Batteries: Included

Like Rails and Laravel, focus on your app, not your framework. Auth, jobs, email, deploy and much more built in.

03Fully Yours

Open source, no lock-in. No third-party provider or cloud platform dependency. Host anywhere.

// features

Instead of wiring everything yourself, Wasp gives you a cohesive set of full-stack features so you can focus on what makes your app unique.

High-Level Spec

app, auth, route, ...

Full-Stack Auth

username · email · social

Data Models

typed · integrated

Type-Safe RPC

typed client ↔ server

Background Jobs

cron · one-off · retry

Email Sending

provider-agnostic

WebSockets

typed real-time

Static Rendering

SSG for SEO & LLMs

Simple Deployment

one command, any platform

Type-Safe Links

typed routes & params

Custom HTTP API

REST · webhooks

Wasp CLI

create · build · deploy

... see all in the docs

Define your app via a specialized full-stack aware logic layer, using high-level terms like app, route, page, ... . Think framework config, but taken to a whole new level.

main.wasp

1app TodoApp {
2  title: "TodoApp",
3  wasp: { version: "^0.23.0" },
4  auth: {
5    userEntity: User,
6    methods: { email: {}, google: {} },
7    onAuthFailedRedirectTo: "/login"
8  }
9}
10
11route HomeRoute { path: "/", to: HomePage }
12page HomePage {
13  component: import Home from "@src/pages/Home"
14}
15
16route AdminRoute { path: "/admin", to: AdminDashboard }
17page AdminDashboard {
18  component: import Dashboard from "@src/admin/Dashboard",
19  authRequired: true
20}
21
22query getMetrics {
23  fn: import { getMetrics } from "@src/admin/ops",
24  entities: [Task, User]
25}
26
27job dailyDigest {
28  executor: PgBoss,
29  perform: { fn: import { dailyDigest } from "@src/admin/digest" },
30  schedule: { cron: "0 7 * * *" }
31}

Declare the auth methods you want, Wasp does the rest. Use the high-level API of premade but customizable Login/Signup/... forms, or drop lower and implement your own.

main.wasp

1app TodoApp {
2  // ...
3  auth: {
4    userEntity: User,
5    methods: {
6      email: { fromField: { email: "[email protected]" } },
7      google: {}, gitHub: {}
8    },
9    onAuthFailedRedirectTo: "/login"
10  }
11}
12
13route LoginRoute { path: "/login", to: LoginPage }
14page LoginPage {
15  component: import LoginPage from "@src/auth/LoginPage"
16}

src/auth/LoginPage.tsx

1import { LoginForm } from 'wasp/client/auth'
2
3export default function LoginPage() {
4  return <LoginForm />  // ready-made, themable, drop-in
5}

src/user/ProfilePage.tsx

1import { useAuth } from 'wasp/client/auth'
2
3export default function ProfilePage() {
4  const { data: user } = useAuth()
5  return <p>Hi, {user?.identities.email?.id}</p>
6}

Declare your data models in Prisma, have them integrated and fully-typed through the whole stack.

schema.prisma

1model Task {
2  id      Int     @id @default(autoincrement())
3  title   String
4  done    Boolean @default(false)
5  user    User    @relation(fields: [userId], references: [id])
6  userId  Int
7}

main.wasp

1// ...
2query countTasks  { /* ... */ entities: [Task] }
3action createTask { /* ... */ entities: [Task, User] }
4job dailyDigest   { /* ... */ entities: [Task, User] }

src/task/operations.ts

1// ...
2export const countTasks: CountTasks<void, number> =
3  async (_args, ctx) => ctx.entities.Task.count()

shell

1$ wasp db start db
2$ wasp db migrate-dev | wasp db studio | wasp db seed

Define functions on the server, call them from the client. No need for REST / GQL / ... . Fully typed and reactive. Powered by TanStack Query.

main.wasp

1// ...
2query countTasks {
3  fn: import { countTasks } from "@src/task/operations",
4  entities: [Task]
5}

src/task/operations.ts

1import type { CountTasks } from 'wasp/server/operations'
2
3export const countTasks: CountTasks<void, number> = async (_args, ctx) => {
4  return ctx.entities.Task.count()
5}

src/task/TaskCounter.tsx

1import { useQuery, countTasks } from 'wasp/client/operations'
2
3export default function TaskCounter() {
4  const { data: count, isLoading, error } = useQuery(countTasks)
5  if (isLoading) return <p>Loading...</p>
6  if (error) return <p>Error: {error.message}</p>
7  return <p>{count} tasks in total.</p>
8}

Cron jobs, one-offs, retries, all working out of the box. No external service needed.

main.wasp

1// ...
2job sendReminders {
3  executor: PgBoss,
4  perform: { fn: import { sendReminders } from "@src/reminders" },
5  schedule: { cron: "0 9 * * *" },   // every day at 9am
6  entities: [Task, User]
7}

src/reminders.ts

1import type { SendReminders } from 'wasp/server/jobs'
2
3export const sendReminders: SendReminders<{ userId?: number }, void> =
4  async ({ userId }, ctx) => {
5    const tasks = await ctx.entities.Task.findMany({
6      where: { done: false, ...(userId && { userId }) }
7    })
8    // ...send a reminder email for each unfinished task
9  }

src/task/operations.ts

1import type { CreateTask } from 'wasp/server/operations'
2import { sendReminders } from 'wasp/server/jobs'
3
4export const createTask: CreateTask<{ title: string }, Task> =
5  async ({ title }, ctx) => {
6    const task = await ctx.entities.Task.create({ data: { title, userId: ctx.user.id } })
7    await sendReminders.submit({ userId: ctx.user.id }).delay(3600)  // one-off, 1h later
8    return task
9  }

Provider-agnostic, integrated API for easy sending of emails from your web app.

main.wasp

1app TodoApp {
2  // ...
3  emailSender: {
4    provider: SendGrid, // or Mailgun | SMTP | Dummy
5    defaultFrom: { email: "[email protected]", name: "TodoApp" }
6  },
7  auth: {
8    // ...
9    methods: {
10      email: { /* ... */ }  // will automatically use the email sender
11    }
12  }
13}

src/user/operations.ts

1import type { SendGreeting } from 'wasp/server/operations'
2import { emailSender } from 'wasp/server/email'
3
4export const sendGreeting: SendGreeting<{ userId: number }, void> =
5  async ({ userId }, ctx) => {
6    const user = await ctx.entities.User.findUniqueOrThrow({ where: { id: userId } })
7    await emailSender.send({
8      to: user.email,
9      subject: 'Welcome to TodoApp 🎉',
10      html: '<h1>Glad you are here.</h1>'
11    })
12  }

Make your web app alive with a fully integrated WebSocket experience (using Socket.IO).

main.wasp

1app TodoApp {
2  // ...
3  webSocket: { fn: import { webSocketFn } from "@src/webSocket" }
4}

src/webSocket.ts

1import type { WebSocketDefinition } from 'wasp/server/webSocket'
2
3type WebSocketFn = WebSocketDefinition<
4  { chatMessage: (msg: string) => void },                       // client → server
5  { chatMessage: (m: { user: string, text: string }) => void }  // server → client
6>
7
8export const webSocketFn: WebSocketFn = (io, context) =>
9  io.on('connection', (socket) => {
10    const user = socket.data.user?.identities.username?.id ?? 'Anon'
11    socket.on('chatMessage', (text) => io.emit('chatMessage', { user, text }))
12  })

src/pages/ChatPage.tsx

1import { useState } from 'react'
2import { useSocket, useSocketListener } from 'wasp/client/webSocket'
3
4export default function ChatPage() {
5  const [messages, setMessages] = useState<{ user: string, text: string }[]>([])
6  const { socket } = useSocket()
7  useSocketListener('chatMessage', (m) => setMessages((prev) => [...prev, m]))
8  return <button onClick={() => socket.emit('chatMessage', 'hi!')}>Send</button>
9}

Set prerender: true to get the best speed / SEO / LLM experience for your static content.

main.wasp

1// ...
2route HomeRoute      { path: "/",          to: HomePage,      prerender: true }
3route PricingRoute   { path: "/pricing",   to: PricingPage,   prerender: true }
4route DashboardRoute { path: "/dashboard", to: DashboardPage }

shell

1$ wasp build
2  → prerendering 2 routes
3  ✔ /
4  ✔ /pricing

No magic — you are deploying just a React / Node.js / Prisma app. Deploy with a single command to supported providers (Fly.io and Railway for now), or deploy yourself wherever you want. Comes with a generated Dockerfile to make it easier.

shell · Fly.io

1$ wasp deploy fly launch my-todo-app
2  → setup · create-db · deploy
3  → registering apps · provisioning Postgres · setting env
4  ✔ live at https://my-todo-app-client.fly.dev  (2m 14s)
5
6$ wasp deploy fly deploy
7  ✔ redeployed  (38s)

shell · Railway

1$ wasp deploy railway launch my-todo-app

shell · diy

1$ wasp build  # generates deployable code in .wasp/out/
2$ ls .wasp/out
3Dockerfile  server/  web-app/  db/  # ship them anywhere

Wasp turns your route declarations into a typed Link component and routes object, so a wrong path or a missing param is a compile-time error. Works with route params, search query, hash, and optional static segments.

main.wasp

1// ...
2route TaskRoute { path: "/task/:id", to: TaskPage }

src/task/TaskList.tsx

1import { Link } from 'wasp/client/router'
2
3// ...
4  <Link to="/task/:id" params={{ id: task.id }}>...</Link>   // ✓ ok
5  <Link to="/tsak/:id" params={{ id: task.id }}>...</Link>   // ✗ no such route
6  <Link to="/task/:id" params={{}}>...</Link>                // ✗ missing param 'id'
7// ...

src/task/utils.ts

1import { routes } from 'wasp/client/router'
2
3// ...
4const taskUrl = routes.TaskRoute.build({ params: { id: someTaskId } })  // e.g. '/task/1'
5// ...

Define custom HTTP APIs while still being integrated with the rest of your web app (entities, auth, ...). Powered by ExpressJS.

main.wasp

1// ...
2api getUserStats {
3  fn: import { getUserStats } from "@src/user/stats",
4  httpRoute: (GET, "/api/me/stats"),
5  entities: [Task],
6  auth: true
7}

src/user/stats.ts

1import type { GetUserStats } from 'wasp/server/api'
2
3export const getUserStats: GetUserStats = async (req, res, ctx) => {
4  const numTasks = await ctx.entities.Task.count({
5    where: { userId: ctx.user.id }
6  })
7  res.json({ numTasks })
8}

src/user/Stats.tsx

1import { api } from 'wasp/client/api'
2
3export default function Stats() {
4  const load = async () => {
5    const res = await api.get('/api/me/stats')
6    console.log(res.data)  // { numTasks: 7 }
7  }
8  return <button onClick={load}>Load stats</button>
9}

A single CLI to manage your whole app lifecycle.

shell

1$ wasp new my-app      # scaffold a new full-stack app
2$ wasp start           # run client + server in dev
3$ wasp start db        # spin up a local dev database
4$ wasp db migrate-dev  # run migrations, and more under `wasp db ...`
5$ wasp studio          # visualize your app's structure
6$ wasp test client     # run your tests
7$ wasp build           # generate production-ready code
8$ wasp deploy          # ship it to your provider

How does it work? 🧐

Given a simple .wasp configuration file that describes the high-level details of your web app, and .js(x)/.css/..., source files with your unique logic, Wasp compiler generates the full source of your web app in the target stack: front-end, back-end and deployment.

This unique approach is what makes Wasp "smart" and gives it its super powers!

Simple config language Declaratively describe high-level details of your app. Learn more
Wasp CLI All the handy commands at your fingertips. Learn more
React / Node.js / Prisma You are still writing 90% of the code in your favorite technologies.
Goodbye boilerplate Write only the code that matters, let Wasp handle the rest. Learn more