Tech Stack
The major technologies behind SyntaxKit, organized by product layer.
Last updated on
3 min readThis page is a map of the stack, not a setup guide. SyntaxKit combines a modern Next.js product app, a typed backend flow, and the integrations most SaaS teams eventually need - the goal here is to show how the pieces fit together, organized by the layer they live in.
App Foundation
One monorepo, one product app, one docs app, and a shared UI layer keeping the whole workspace moving in the same direction.
pnpm
Workspace package manager that links the monorepo into one system.
Turborepo
Task runner and build caching across the whole workspace.
Next.js
App Router foundation for the product app in apps/web.
React
The component model the entire UI is built on.
Tailwind CSS
Utility-first styling shared across the product and docs.
Radix UI
Accessible, unstyled primitives behind the components.
Fumadocs
Powers this documentation site as its own Next.js app.
Data And Backend Flow
A strongly typed path from validation to API contract to database access - the reason the starter stays customizable without getting messy.
PostgreSQL
The primary relational data store.
Prisma
Schema management, migrations, generated client, and seeds.
Better Auth
Sessions, email/password, OAuth, and passkey support.
oRPC
Defines the type-safe application API.
TanStack Query
Client-side fetching aligned to the typed API contract.
Zod
Runtime validation for everything crossing the wire.
Product Infrastructure
The integrations most SaaS products need anyway, already wired in - this is where the starter saves the most time.
Stripe
Subscriptions, checkout, the billing portal, and webhooks.
React Email
Component-based transactional email templates.
Plunk
Delivery for transactional and lifecycle email.
AWS S3
Uploads via the S3 SDK, so storage stays vendor-agnostic.
next-intl
Locale-aware routing and translated content.
PostHog
Product analytics and event tracking.
Upstash
Redis-backed rate limiting and throttling.
Cloudflare Turnstile
Bot and abuse protection on public forms.
Vercel AI SDK
Streaming, chat-style AI workflows as a real product capability.
Quality And Delivery
The guardrails that keep a starter reliable once real customization begins.
Vitest
Unit and integration testing with fast feedback.
Playwright
End-to-end browser coverage for real workflows.
ESLint
Linting baked into the default workflow.
Prettier
Consistent formatting across the repo.
Lefthook
Git hooks for commit-time checks.
TypeScript
Static types across every layer of the stack.
Stack At A Glance
The whole stack in one scan:
Why This Stack Fits SyntaxKit
- It keeps the main path practical: one product app, one docs app, and focused packages for each major subsystem.
- It preserves typed boundaries across forms, API contracts, and database work, which makes customization safer.
- It covers the integrations SaaS teams usually need anyway: auth, billing, email, storage, analytics, localization, and AI.
- It gives you a strong default foundation without pretending every product has the same feature depth or deployment shape.
Where To Go Next
Project Structure
See how the apps and packages in the monorepo are organized in practice.
Quickstart
Go from clone to a running local app with the minimum number of steps.
Setup
Configure the services and integrations that sit behind these stack choices.
Environment Variables
See where environment variables and feature configuration fit into the system.