wasp-lang/wasp

The batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.

18,224 stars TypeScript 11 components 4 connections

Full-stack web framework for React/Node.js with declarative configuration

Developer writes .wasp config files, waspc compiler generates full-stack TypeScript apps, CLI tools run and deploy the generated applications.

Under the hood, the system uses 2 feedback loops, 3 data pools, 3 control points to manage its runtime behavior.

Structural Verdict

A 11-component ml training with 4 connections. 1546 files analyzed. Loosely coupled — components are relatively independent.

How Data Flows Through the System

Developer writes .wasp config files, waspc compiler generates full-stack TypeScript apps, CLI tools run and deploy the generated applications.

Config Declaration — Developer writes .wasp files declaring app structure, auth, operations
Code Generation — waspc Haskell compiler processes .wasp files and generates React/Node.js code from templates
Database Setup — CLI tools set up SQLite or PostgreSQL databases with Docker containers
App Compilation — Generated TypeScript code is compiled and bundled for development or production
Runtime Execution — Full-stack app runs with type-safe RPC, auth, and database operations

System Behavior

How the system actually operates at runtime — where data accumulates, what loops, what waits, and what controls what.

Data Pools

Generated App Templates (file-store)
Mustache templates that get populated with user config to generate full-stack apps

Build Artifacts (file-store)
Compiled binaries and assets packaged for distribution

Example Applications (file-store)
Demo apps showcasing framework features and patterns

Feedback Loops

Development Hot Reload (polling, balancing) — Trigger: File changes detected. Action: Recompile and restart development server. Exit: Process termination.
Database Migration Sync (convergence, balancing) — Trigger: Schema changes in .wasp files. Action: Generate and apply database migrations. Exit: Schema matches declaration.

Delays & Async Processing

Code Generation (batch-window, ~compile time) — Developer waits for .wasp files to be processed into TypeScript
Database Startup (async-processing, ~5-10 seconds) — App startup delayed until PostgreSQL container is ready
Package Publishing (batch-window, ~build time) — NPM packages created after full compilation cycle

Control Points

Database Type Selection (env-var) — Controls: Whether to use SQLite or PostgreSQL for development. Default: DbType.Sqlite | DbType.Postgres
Docker Image Override (runtime-toggle) — Controls: PostgreSQL Docker image version for development. Default: defaultPostgresDbImage
Context7 Integration (feature-flag) — Controls: Analytics and tracking service configuration. Default: pk_geRKHCxuXNhC84YOJG7Nl

Technology Stack

Haskell (framework)
Core compiler implementation

TypeScript (framework)
Generated app runtime and templates

React (framework)
Frontend framework for generated apps

Node.js (framework)
Backend runtime for generated apps

Prisma (database)
Database ORM for generated apps

Docker (infra)
Database containerization for development

Tailwind CSS (framework)
Styling framework for UI components

Vite (build)
Build tool and development server

Next.js (framework)
Documentation website framework

Key Components

makeMainPackage (function) — Creates the main NPM package that orchestrates platform-specific sub-packages scripts/make-npm-packages/src/generator/main-package.ts
startAppInDevMode (function) — Starts a Wasp app in development mode with database setup and migration wasp-app-runner/src/dev/index.ts
setupDb (function) — Sets up database (SQLite or PostgreSQL) for Wasp applications wasp-app-runner/src/db/index.ts
FeatureContainer (component) — Main UI layout with responsive sidebar navigation for demo features examples/kitchen-sink/src/components/FeatureContainer.tsx
Layout (component) — Root layout component with authentication-aware navigation bar examples/ask-the-documents/src/Layout.tsx
Button (component) — Reusable button component with multiple variants and link support examples/kitchen-sink/src/components/Button.tsx
cn (utility) — Utility function for merging Tailwind CSS classes with clsx and tailwind-merge examples/kitchen-sink/src/cn.ts
EmailProvider (type-def) — Type definitions for email providers (SMTP, SendGrid, Mailgun, Dummy) waspc/data/Generator/templates/sdk/wasp/server/email/core/types.ts
testingAction (handler) — Server-side action for testing RPC operations with different auth states examples/kitchen-sink/src/rpcTests/operations/server.ts
DocumentCard (component) — Card component displaying document information with delete functionality examples/ask-the-documents/src/components/DocumentCard.tsx
defineUserSignupFields (config) — Configures Google OAuth user signup field mapping examples/ask-the-documents/src/auth/google.ts

Sub-Modules

waspc (independence: high)
Core Haskell-based compiler that transforms .wasp files into full-stack applications

wasp-app-runner (independence: high)
CLI tool for running and managing Wasp applications in development

npm-package-generator (independence: high)
Tool for creating platform-specific NPM packages from build artifacts

documentation-site (independence: medium)
Next.js-based website with documentation, tutorials, and marketing content

mage (independence: medium)
Visual project creation and management interface

Configuration

context7.json (json)

url (string, unknown) — default: https://context7.com/wasp-lang/wasp
public_key (string, unknown) — default: pk_geRKHCxuXNhC84YOJG7Nl

Explore the interactive analysis

See the full architecture map, data flow, and code patterns visualization.

Analyze on CodeSea

Related Ml Training Repositories

Frequently Asked Questions

What is wasp used for?

Full-stack web framework for React/Node.js with declarative configuration wasp-lang/wasp is a 11-component ml training written in TypeScript. Loosely coupled — components are relatively independent. The codebase contains 1546 files.

How is wasp architected?

wasp is organized into 5 architecture layers: Compiler Core, Generated App Templates, CLI Tools, Examples & Demos, and 1 more. Loosely coupled — components are relatively independent. This layered structure keeps concerns separated and modules independent.

How does data flow through wasp?

Data moves through 5 stages: Config Declaration → Code Generation → Database Setup → App Compilation → Runtime Execution. Developer writes .wasp config files, waspc compiler generates full-stack TypeScript apps, CLI tools run and deploy the generated applications. This pipeline design reflects a complex multi-stage processing system.

What technologies does wasp use?

The core stack includes Haskell (Core compiler implementation), TypeScript (Generated app runtime and templates), React (Frontend framework for generated apps), Node.js (Backend runtime for generated apps), Prisma (Database ORM for generated apps), Docker (Database containerization for development), and 3 more. This broad technology surface reflects a mature project with many integration points.

What system dynamics does wasp have?

wasp exhibits 3 data pools (Generated App Templates, Build Artifacts), 2 feedback loops, 3 control points, 3 delays. The feedback loops handle polling and convergence. These runtime behaviors shape how the system responds to load, failures, and configuration changes.

What design patterns does wasp use?

5 design patterns detected: Template Generation, Declarative Configuration, Type-Safe RPC, Component System, Multi-Database Support.

Analyzed on March 31, 2026 by CodeSea. Written by Karolina Sarna.