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

1import { app, page, query, route } from "@wasp.sh/spec";
2
3import { MainPage } from "./src/MainPage" with { type: "ref" }; // <-- React 
4import { getTasks } from "./src/tasks" with { type: "ref" }; // <-- Node.js
5
6export default app({
7  name: "todoApp",
8  wasp: { version: "^0.24.0" },
9  title: "ToDo App",
10  head: ["<link rel='icon' href='/favicon.ico' />"],
11  auth: { // Full-stack auth out-of-the-box.
12    userEntity: "User",
13    methods: { google: {}, gitHub: {}, email: {} },
14    onAuthFailedRedirectTo: "/login"
15  },
16  spec: [
17    route("RootRoute", "/", page(MainPage, {
18      authRequired: true
19    })),
20    query(getTasks, { 
21      entities: ["Task"] // <-- Automatic cache invalidation.
22    }) 
23  ]
24});

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.ts

1import { app, job, page, query, route } from "@wasp.sh/spec";
2
3import { AdminDashboard } from "./src/admin/Dashboard" with { type: "ref" };
4import { dailyDigest, getMetrics } from "./src/admin/ops" with { type: "ref" };
5import { HomePage } from "./src/pages/Home" with { type: "ref" };
6
7export default app({
8  name: "todoApp",
9  title: "ToDo App",
10  wasp: { version: "^0.24.0" },
11  head: ["<link rel='icon' href='/favicon.ico' />"],
12  auth: {
13    userEntity: "User",
14    methods: { email: {}, google: {} },
15    onAuthFailedRedirectTo: "/login"
16  },
17  spec: [
18    route("HomeRoute", "/", page(HomePage)),
19    route(
20      "AdminRoute",
21      "/admin",
22      page(AdminDashboard, { authRequired: true })
23    ),
24    query(getMetrics, { entities: ["Task", "User"] }),
25    job(dailyDigest, {
26      executor: "PgBoss",
27      schedule: { cron: "0 7 * * *" }
28    })
29  ]
30});

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.ts

1// ...
2auth: {
3  userEntity: "User",
4  methods: {
5    email: { fromField: { email: "hi@todo.dev" } },
6    google: {}, gitHub: {}
7  },
8  onAuthFailedRedirectTo: "/login"
9},
10spec: [
11  route("LoginRoute", "/login", page(LoginPage)),
12  route(
13    "ProfileRoute",
14    "/profile",
15    page(ProfilePage, { authRequired: true })
16  )
17]

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.ts

1// ...
2spec: [
3  query(countTasks, { entities: ["Task"] }),
4  action(createTask, { entities: ["Task", "User"] }),
5  job(dailyDigest, { executor: "PgBoss", entities: ["Task", "User"] })
6]

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.ts

1// ...
2spec: [
3  query(countTasks, { entities: ["Task"] })
4]

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.ts

1// ...
2spec: [
3  job(sendReminders, {
4    executor: "PgBoss",
5    schedule: { cron: "0 9 * * *" },   // every day at 9am
6    entities: ["Task", "User"]
7  })
8]

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.ts

1// ...
2emailSender: {
3  provider: "SendGrid", // or "Mailgun" | "SMTP" | "Dummy"
4  defaultFrom: { email: "hi@todo.dev", name: "TodoApp" }
5},
6auth: {
7  // ...
8  methods: {
9    email: { /* ... */ }  // will automatically use the email sender
10  }
11}

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.ts

1// ...
2webSocket: { fn: webSocketFn }

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.ts

1// ...
2spec: [
3  route("HomeRoute", "/", page(HomePage), { prerender: true }),
4  route("PricingRoute", "/pricing", page(PricingPage), { prerender: true }),
5  route("DashboardRoute", "/dashboard", page(DashboardPage))
6]

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.ts

1// ...
2spec: [
3  route("TaskRoute", "/task/:id", page(TaskPage))
4]

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.ts

1// ...
2spec: [
3  api("GET", "/api/me/stats", getUserStats, {
4    entities: ["Task"],
5    auth: true
6  })
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 main.wasp.ts 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 in TypeScript 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