Studio Tools

Overview

Rebase has two modes:

• Content Mode — For content editors and operations teams. Shows collections and data management.
• Studio Mode — For developers. Unlocks developer-facing tools.

Toggle between modes using the admin mode controller or the UI toggle in the app bar.

Built-in Studio Tools

Collection Editor

A visual schema editor that lets you create and modify collections through a drag-and-drop UI. When you save changes, it uses ts-morph to update your TypeScript source files via AST manipulation — preserving all existing code and custom logic.

import { RebaseCMS } from "@rebasepro/admin";

// The Collection Editor is automatically enabled when you provide the
// collectionEditor configuration to your RebaseCMS component
<RebaseCMS
    collections={collections}
    collectionEditor={{
        getAuthToken: authController.getAuthToken
    }}
/>

SQL Console

Run raw SQL queries against your PostgreSQL database and see results in a table:

import { SQLEditor } from "@rebasepro/studio";

{ slug: "sql", name: "SQL Console", view: <SQLEditor /> }

JS Console

Write and execute JavaScript using the Rebase SDK:

import { JSEditor } from "@rebasepro/studio";

{ slug: "js", name: "JS Console", view: <JSEditor /> }

RLS Policy Editor

Visualize and manage Row Level Security policies for your PostgreSQL tables:

import { RLSEditor } from "@rebasepro/studio";

{ slug: "rls", name: "RLS Policies", view: <RLSEditor /> }

Storage Browser

Browse, upload, and manage files in your storage backends:

import { StorageView } from "@rebasepro/studio";

{ slug: "storage", name: "Storage", view: <StorageView /> }

Adding Studio Views

Studio tools are automatically available when you include the RebaseStudio component inside your app:

import { RebaseStudio } from "@rebasepro/studio";

export function App() {
    return (
        <Rebase client={client} authController={authController}>
            {/* Custom views are injected and studio mode is managed automatically */}
            <RebaseStudio />
            {/* ... */}
        </Rebase>
    );
}

These views appear in the sidebar navigation when Studio mode is active.

Next Steps

• Plugins — Extend the framework with plugins
• Collections — Collection configuration