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

// ai

Perfect for AI, by design

By making Wasp as easy as possible for humans (opinionated, high-level, batteries-included) we made it the ideal framework for AI too.

$ ask "why AI loves Wasp"

Clear best practices and structure keep AI's focus on what is important.
Less boilerplate, less code, less space for bugs and security issues.
No "connection" points where things break - Wasp glues everything together.
Less code = smaller context, saving tokens and keeping your AI smart.
Batteries included means bigger building blocks, keeping AI on point, codebase tidy, and reducing chance of mistakes.

$ ask "how does Wasp keep me in control"

Wasp's spec files give you a unique high-level overview of your app.
High-level code keeps you in the loop even when AI does the heavy lifting.

$ ask "first-party AI tooling?"

Rule files, skills, and plugins crafted by the Wasp team and shaped by community experience, so you get the most out of your AI.
llms.txt built directly from the docs and always up to date.

See how Wasp supercharges vibe coding

// how it works

You write your app as high-level config in *.wasp.ts files, alongside the usual React, Node, and Prisma code. Wasp compiles it into a full-stack app, ready to deploy anywhere.

* Treat the generated code like any compiler output. You can look at it, but there is no need to.

// 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

// our philosophy

The Way of the Wasp

"Onion" architecture

We aim to make every surface of Wasp a layer of APIs: highest level covers 80% of the use cases, and then you can peel layer after layer as you need more, trading simplicity for flexibility.

Rely on curated best practice solutions by default, assume more control where/when you need it.

Truly full-stack

In Wasp, full-stack is not an after-thought, it is the initial and central point of our design since inception of Wasp as an idea.

The very way Wasp is designed, with unique specification layer to capture the full-stack logic, and with code generation focused approach in the background, is to allow us to capture all of what a web app is into one solution, to take the definition of "full-stack" as far as it goes.

A powerful, unique full-stack specification layer

Wasp stands for Web App SPecification: you describe the full-stack behaviour (specification) of your app in *.wasp.ts files, at the level of your thoughts (route, auth, job, ...), then implement the details in the underlying stack (React, Node, Prisma, ...).

Every full-stack framework has a way to be configured, but it is usually a mix of file conventions, naming rules, mini-DSLs, and JSON files. Wasp pulls all of that into a single cohesive SDK with the full power of TypeScript, making the specification a first-class citizen, and giving Wasp its superpowers.

Greatest > latest

We are not chasing the bleeding edge. We critically track and curate the latest web dev trends to provide you with a deeply integrated and cohesive experience that we stand behind.

Managed experience over DIY

With Wasp, you don't build your framework up, you build it down: you start with everything working out of the box, then take more control where you need it. You start with big building blocks, then replace them with smaller ones and your own logic as needed.

🚧 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

Perfect for AI, by design

Todo App

CoverLetterGPT

Waspello

Scribeist

Microinfluencer Club

Searchcraft

The Way of the Wasp

"Onion" architecture

Truly full-stack

A powerful, unique full-stack specification layer

Greatest > latest

Managed experience over DIY

Stay up to date 📬

🚧 Roadmap 🚧

Frequently asked questions