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";
2import { MainPage } from "./src/MainPage" with { type: "ref" };
3import { getTasks } from "./src/tasks" with { type: "ref" };
4
5export default app({
6  wasp: { version: "^0.24.0" },
7  title: "ToDo App",
8  auth: {  // Full-stack auth out-of-the-box.
9    userEntity: "User",
10    methods: { google: {}, gitHub: {}, email: {} },
11    onAuthFailedRedirectTo: "/login"
12  },
13  spec: [
14    route("RootRoute", "/", page(MainPage, {
15      authRequired: true
16    })),
17    query(getTasks, {
18      entities: ["Task"]  // Automatic cache invalidation.
19    })
20  ]
21});

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 (
6  _args,
7  context
8) => {
9  if (!context.user) throw new HttpError(401);
10
11  return context.entities.Task.findMany({
12    where: { user: { id: context.user.id } },
13    orderBy: { id: "desc" },
14  });
15};

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}

// 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 logic layer in TypeScript, 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: "[email protected]" } },
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: "[email protected]", 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

// example apps

Reference implementations to learn from, fork, or deploy. Each one shows a complete Wasp app. Read the code, run it locally, ship it your way.

Todo App

A famous To-Do list app, implemented in TypeScript.

TodoAppTs

See the code

CoverLetterGPT

Generate cover letters based on your CV and the job description. Powered by ChatGPT.

coverlettergpt

Demo See the code

Waspello

A Trello-style kanban board with lists, draggable cards, and user auth.

waspello

Demo See the code

See all examples

// shipped with wasp

Live apps the community built and shipped on top of Wasp, running in production today.

Scribeist

AI writing platform with workspaces for novels, blogs, essays, and notes.

visit site →

Microinfluencer Club

Connect brands with micro-influencers to run marketing campaigns.

visit site →

Searchcraft

AI-powered search engine for product teams, with keyword precision plus semantic understanding.

visit site →

// join the community

Real builders, real apps, real conversations. Drop into Discord to ask questions, share what you're working on, or just hang out.

“Wasp is by far the best for AI coding. The high-level Wasp file keeps me on top of everything.”

Marcel Coetzee

Founder @ Hireveld

“If you start with Wasp, 80% of the pains of vibe coding are taken care of for you already.”

Kenny Rogers

Dev Rel & AI-First Educator

#🏠made-with-wasp

Wasp is as game-changing for me as React has been many years back. Its simplicity, and how well [it] captures most full-stack engineering tasks is pure genius. I believe Wasp will become the #1 web technology in just a couple years. It has everything that most web devs are looking for.

Wasp builder

via Discord

“Everything just works on the first try — minimal intervention needed for anything.”

Hrvoje Pavlinovic

Senior Engineer @ Memoato

“Just using AI would make it harder to sleep at night. With Wasp I feel secure, like I'm not cutting any corners.”

Robbie Artress

Founder @ PeakMastering

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

🚧 Roadmap 🚧

Work on Wasp never stops: get a glimpse of what is coming next!

Frequently asked questions

For anything not covered here, join our Discord!

A truly full-stack TypeScript framework that just works.

01High Level

02Batteries: Included

03Fully Yours

High-Level Spec

Full-Stack Auth

Data Models

Type-Safe RPC

Background Jobs

Email Sending

WebSockets

Static Rendering

Simple Deployment

Type-Safe Links

Custom HTTP API

Wasp CLI

Todo App

CoverLetterGPT

Waspello

Scribeist

Microinfluencer Club

Searchcraft

How does it work? 🧐

Simple config in TypeScript

Wasp CLI

React / Node.js / Prisma

Goodbye boilerplate

Stay up to date 📬

🚧 Roadmap 🚧

Frequently asked questions