Your admin panel shouldn't
make you write CRUD.

Pure React and TypeScript. Schema-as-code. Full control — from custom fields to entire pages.

Trusted by developers at forward-thinking companies

Self-Hosted by Design

Deploy Rebase on your own infrastructure for maximum control, deep customization, and full data privacy.

  • Full source code access (MIT license)
  • Deploy anywhere on your own infrastructure
  • Extend with custom React components & logic
View Docs arrow_forward

A Toolkit That Just Works

Everything you need. Nothing you don't.

Stop reinventing the wheel. Rebase provides a production-ready toolkit of components and logic, so you can focus on the features that make your app unique.

typescript
import { buildProperty } from "@rebasepro/core";

const price = buildProperty({
name: "Price",
description: "Price with range validation",
dataType: "number",
validation: {
    required: true,
    requiredMessage: "Price must be between 0 and 1000",
    min: 0,
    max: 1000
}
});
Price textfield preview

Schema as Code, Backed by Git

Define your data models in pure TypeScript, or construct them visually using the Rebase Studio GUI. Even when non-technical users add fields via the UI, Rebase uses AST mutation to surgically write clean TypeScript back to your repo. Your code remains the single source of truth, fully versioned in Git.

From a single collection definition, Rebase instantly generates:

  • Admin Views & Forms for data management
  • DB Schema synchronization
  • Instant APIs (REST & GraphQL)
  • Typed SDK for end-to-end type safety

Radical React Extensibility

If you can build it in React, you can build it in Rebase. Create your own custom form fields or build entirely new top-level views (like a custom dashboard) and add them to the main navigation. No black boxes, no weird proprietary templating languages. Just standard React components.

typescript
import { buildCollection } from "@rebasepro/core";

export const productsCollection = buildCollection({
    name: "Products",
    path: "products",
    callbacks: {
        onSave: async ({ values }) => {
            // e.g., send a notification
            await sendSlackMessage("Product updated: ${values.name}");

            // e.g., modify data before saving
            values.updatedAt = new Date();
            return values;
        }
    }
    // ...properties
});

Built-in Business Logic

Run your custom code during the data lifecycle. Use onSave, onDelete, and other callbacks to trigger cloud functions, send notifications, clean data, or integrate with third-party APIs right from your CMS configuration.

A Truly Typed Client SDK

Query your database from any frontend securely with the Universal Client SDK. Powered by Drizzle ORM, it provides perfect TypeScript autocomplete and eliminates N+1 query issues instantly by effortlessly resolving deep relational data with the with clause.

typescript
import { createRebaseClient } from "@rebasepro/client";

// Perfect type inference automatically applied!
const posts = await rebaseClient.data.posts.findMany({
    // Type-safe deep relation fetching. No N+1 queries.
    with: {
        author: true,
        comments: {
            with: { author: true }
        }
    },
    where: "status = 'published'",
    orderBy: "createdAt DESC",
    limit: 10
});

console.log(posts[0].author.name); // 100% type-safe
sync_alt Isomorphic

One SDK. Every environment.

The same @rebasepro/client runs in your CMS plugins, your user-facing apps, and your Node.js backend. No wrappers, no adapters — one API everywhere.

dashboard_customize
CMS Plugin
Admin panel extension
// CMS custom view
const { data } = await
rebase.data.posts.find({
orderBy: "createdAt:desc"
});
devices
Frontend App
React, Next.js, Vue…
// User-facing app
const { data } = await
rebase.data.posts.find({
orderBy: "createdAt:desc"
});
dns
Node.js Backend
API routes, cron jobs…
// Server-side script
const { data } = await
rebase.data.posts.find({
orderBy: "createdAt:desc"
});

Same types. Same queries. Same auth. Zero platform-specific code.

Explore the SDK arrow_forward

Everything for your
UI needs

If you need to create custom views or components, you can use our battle-tested Rebase UI components.

Build Custom Views

Use all the built-in data hooks to create your own React components and add them directly to the main navigation, or to documents

typescript
export function ProductDetailPreview({ modifiedValues }: {
    modifiedValues?: EntityValues<Product>;
}) {

    const snackbarController = useSnackbarController();
    const [quantity, setQuantity] = React.useState(1);

    if (!modifiedValues) {
        return <CenteredView>Please add some data to see the preview</CenteredView>;
    }

    const { name, price, description, images } = modifiedValues;
    const mainImage = images?.[0];

    return (
        <div className="p-8">
            <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">

                {/* Product Image */}
                {mainImage && (
                    <img
                        alt="Product"
                        className="aspect-square object-cover w-full rounded-lg"
                        src={mainImage}
                    />
                )}

                {/* Product Details */}
                <div className="grid gap-4 content-center">
                    <div className="flex items-start">
                        <h1 className="flex-grow text-3xl font-bold">
                            {name ?? "Product name"}
                        </h1>
                        <div className="text-3xl font-semibold ml-auto">
                            ${price}
                        </div>
                    </div>

                    <Markdown source={description ?? ""} />

                    <QuantitySelect onSelected={(quantity) => snackbarController.open({
                                                    type: "success",
                                                    message: `Added \${ quantity } items to cart`
                                                })}/>
                </div>
            </div>
        </div>
    );
}
Custom React component demo

Over 20+ Powerful Data Fields

We've built all the complex fields you don't want to. Get a Notion-style rich text editor, file uploads and storage, relational data (references), enums, arrays, maps, and more, all as pre-built components.

Start Your Self-Hosted Project

npx create-rebase-app
View Full Documentation

Ready to Build?

Dive into the open-source framework. Perfect for custom builds, agencies, and full control.

Read the Docs arrow_forward