Open-source TypeScript · for existing React apps

Add complete features to the React app you already own.

BTST is an open-source TypeScript system that adds routes, backend behavior, data models, and customizable UI to the React application you already own.

Install a released plugin when your product needs a substantial feature. Start with Blog, then add more only when they are useful. Your app, data, deployment, and ejected UI stay yours.

View the live Blog.Install your first feature.
BTST promise above a focused view of the real Blog route from the generated application.
Authentic generated app · Blog at /pages/blog

A full-stack plugin can include:

  • DataSchema + adapter boundary
  • ServerAPI handlers + lifecycle
  • WebRoutes + SSR-aware pages
  • UITyped hooks + ejected views

Payload varies by plugin. Intentional backend-only, client-only, and companion plugins stay within their real boundary.

One plugin, a complete boundary

Generate it. Read it. Make it yours.

BTST is an open-source TypeScript system. Its plugins are installable packages for adding substantial features to an app you already run. It is not a hosted control plane, an app starter, or a UI-only component kit.

TerminalPinned quickstart
npx @btst/codegen@0.2.0 init \
  --framework nextjs \
  --adapter memory \
  --plugins blog

This quickstart uses the in-memory adapter for local evaluation. Choose a versioned database adapter before treating generated data as durable.

Follow the complete quickstart
  1. 01

    Generate a real feature

    The codegen writes the selected plugin integration into your existing application.

  2. 02

    Review the payload

    Inspect the data, server, web, and UI boundaries that plugin actually provides.

  3. 03

    Run it in your app

    Open the generated Blog route at /pages/blog, then keep, fork, or replace each layer.

Use the plugin as shipped
Fork the integration for your product
Replace a boundary without rewriting the rest

Product proof

See the generated result before you install it.

These are captured from the generated applications—not concept art. Blog is the canonical end-to-end proof; the other screens show how plugin boundaries can differ.

Open the live Blog
Real BTST Blog page with three published product-update posts in the generated Next.js application.
Blog · Full-stackBlog is the canonical full-stack proof: one plugin supplies routes, backend behavior, client UI, and a visible published result.
Real BTST Form Builder with Email, Text Area, and Select fields on the canvas and in the live form preview.
Form Builder · Full-stackInspect plugin
The shipped Form Builder provides a drag-and-drop workflow with a live form preview.
Real Scalar API reference generated by the backend-only BTST OpenAPI plugin.
OpenAPI · Backend-onlyInspect plugin
OpenAPI shows that a BTST plugin may add a focused backend capability without a matching client plugin.

Ownership boundary

You own the whole application.

BTST installs code and packages into your React application. There is no hosted control plane between your users and the feature. You can inspect, fork, or replace each boundary as the product evolves.

App
Generated routes and integration code live in your repository.
Data
You select and operate the database adapter and storage.
Deployment
The feature runs with the application you deploy.
Ejected UI
Inspect, fork, restyle, or replace generated views.
Diagram separating the application and operating boundaries a team owns from the BTST runtimes and plugins running inside it.
BTST composes client and backend plugins inside the application; the app shell, ejected views, database, deployment, and external services remain yours.

Stack fit

A maintained path for the React stacks we test.

BTST keeps framework integration explicit. Pick a maintained web integration and a versioned data adapter; each plugin then declares the boundary it provides.

Next.js 15+

Maintained App Router integration

React Router v7

Maintained framework-mode integration

TanStack Start

Maintained full-stack integration

Versioned data adapters

Prisma, Drizzle, and Kysely have versioned adapter packages. MongoDB support is intentionally narrower; the in-memory adapter is for evaluation and tests, not durable data.

Designed to be extended

BTST exposes boundaries for additional frameworks and adapters. That extensibility is separate from the integrations the project maintains and tests today.

Released catalog

Choose the boundary your product needs.

Every plugin below has a released package and a published implementation page. Topology labels describe what the plugin actually installs.

Browse plugin details
Full-stack

Blog

Publish and manage a content section inside the React application you already run.

Full-stack

AI Chat

Add a streaming conversation surface while choosing the model, access policy, and operating limits yourself.

Full-stack

CMS

Define structured content in TypeScript and give operators generated forms for managing it.

Full-stack

Form Builder

Let operators design forms visually, publish them inside your app, and collect validated submissions.

Client-only

UI Builder

Let operators compose pages visually, store the layout through CMS, and render it on routes you own.

Requires CMS

Full-stack

Kanban

Add boards, columns, tasks, priorities, and drag-and-drop workflows inside your product.

Full-stack

Comments

Attach threaded discussion and moderation to a resource your application already owns.

Full-stack

Media

Upload, organize, register, and reuse media through a library that runs with your storage.

Client-only

Route Docs

Generate an explorable reference for the client routes already registered in your BTST stack.

Backend-only

OpenAPI

Expose an OpenAPI 3.1 contract for registered BTST routes and, when useful, an interactive API reference.

Client-only

Better Auth UI

Add auth and account routes to a BTST client stack that already has a Better Auth backend.

Requires Better Auth

Directory

Explore every released plugin

Compare implementation notes, payloads, and setup guidance in the complete plugin directory.

Open directory

Verify the claim

The demo, source, releases, test matrix, and license are open for inspection.

Run the generated Blog

Follow the same route shown in the product proof and inspect its visible behavior.

Open live route

Start with the result

See the feature working, then add it to your app.

Blog is the clearest end-to-end example of the payload. Open it live, then follow the pinned quickstart when you are ready to inspect the integration in your own repository.

View the live Blog. Install your first feature.
Read the source (opens in a new tab)