Studio Tools

Overview

The panel has three modes — "cms" | "studio" | "settings":

• CMS ("cms") — For content editors and operations teams. Shows collections and data management. This is the default.
• Studio ("studio") — For developers. Unlocks the tools below.
• Settings ("settings") — declared in the type, but nothing sets it and nothing reads it. There is no way to enter this mode today. It is listed here because it is part of the public AdminModeController type you will see in your editor, not because it does anything.

The drawer’s toggle switches between the first two.

Toggle between them with the admin mode controller or the drawer toggle. The chosen mode is persisted in localStorage under rebase-admin-mode; a browser that used the panel before 0.17.0 holds the old "content" value and is migrated to "cms" on read.

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/cms";

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

Built-in tools

These ship with Studio and are lazy-loaded by RebaseStudio — each is a separate chunk, fetched the first time you open it. They are not importable on their own: @rebasepro/studio deliberately exports only the orchestrator, so a console you never open costs nothing.

Tab	Slug	Group	What it does
SQL Console	sql	Database	Run raw SQL against your PostgreSQL database and read results in a table
RLS Policies	rls	Database	Inspect and manage Row Level Security policies for your tables
Schema Visualizer	schema-visualizer	Database	Interactive ERD of tables and relations
Branches	branches	Database	Create and manage database branches
Backups	backups	Database	Browse and download database backups
Logs Explorer	logs	Database	Real-time system and query logs
JS Console	js	Compute	Write and execute JavaScript through the Rebase SDK
Cron Jobs	cron	Compute	Inspect and manage scheduled tasks
Storage	storage	Storage	Browse, upload and manage files across your storage backends
API Explorer	api	API	Interactive API documentation, with a request runner
API Keys	api-keys	Access Control	Create and manage scoped service API keys

The Collection Editor is a Studio tool too, but it is not in this list because it is registered differently: RebaseStudio does not lazy-load it. The panel injects it when RebaseCMS is given a collectionEditor prop, because unlike the tools above it needs the project’s collection source at hand to write back to. That is a difference in how it is mounted, not in what it is — it edits schema, and it belongs beside the SQL and RLS editors.

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.

Choosing which tools appear

Omit tools and every tool above is registered. Pass it to register a subset — a hosted console that has its own storage browser, say, can leave that one out:

<RebaseStudio tools={["sql", "rls", "schema-visualizer", "api"]} />

The list is read by contents, not identity, so writing it inline is safe: a re-render of the host does not tear down and remount whichever tool is on screen.

Next Steps

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