Visual · Code-backed · Extensible

Rebase Studio

A full-featured admin panel that generates real TypeScript code. Edit visually, ship as code, extend with React.

Try the Demo arrow_forward
Schema-as-Code

Visual Schema Editor

Build your data model visually — every change generates clean, version-controlled TypeScript collection files via AST transformation. What you see is what gets committed.

  • ✓ 20+ built-in field types (text, number, date, enum, map, array, reference…)
  • ✓ Relation editor with cardinality, direction, and cascade controls
  • ✓ RLS security rules defined per collection
  • ✓ Validation rules with Zod schema generation
Built-in SQL View

SQL Editor

Write and execute SQL directly against your Postgres database from the admin UI. Schema-aware autocomplete, result previews, and query history — all integrated.

  • ✓ Monaco-based editor with syntax highlighting
  • ✓ Schema browser sidebar with table/column introspection
  • ✓ Inline result table with sorting and pagination
  • ✓ Saved snippets and query history
Row-Level Security

RLS Policy Editor

Manage Postgres Row-Level Security visually. Define policies per table, sync them between code and database, and see live status at a glance.

  • ✓ Enable/disable RLS per table with one click
  • ✓ Visual USING and WITH CHECK clause editor (Monaco)
  • ✓ Sync code-based policies with live database
  • ✓ PERMISSIVE / RESTRICTIVE modes, role targeting
Code-as-Config

Collection Editor

Every visual change generates clean, version-controlled TypeScript via AST transformation. What you see in the UI is what gets committed to your repo.

  • ✓ Visual edits write to real TypeScript files
  • ✓ Full collection config: properties, callbacks, security rules
  • ✓ Zod schema generation for runtime validation
Collection Editor
orders.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { buildCollection } from "@rebasepro/core";

export const orders = buildCollection({
  name: "Orders",
  properties: {
    customer: { type: "string", name: "Customer" },
    total:    { type: "number", name: "Total" },
    status:   { type: "string",
      enum: { pending: "Pending",
              shipped: "Shipped",
              delivered: "Delivered" } },
  },
  securityRules: [/* ... */],
  callbacks: { onSave: /* ... */ }
});

Every visual change writes back to this file via AST transformation.

Zero-Config Start

Schema Inference

Point Rebase at your existing PostgreSQL database. It introspects your tables, columns, types, and relations — then generates a full admin panel automatically. No config files to write.

# Connect to your existing database
$ npx create-rebase-app ./my-admin
# Rebase introspects your tables…
✓ Found 12 tables, 3 enums, 8 relations
✓ Generated collection definitions
✓ Admin panel ready at localhost:3000

More Studio Features

Everything you need to build and operate your admin panel.

Posts Scheme
id
uuid
title
text

Visual Schema Builder

Create and modify tables, columns, and relationships through a visual interface.

Row Level Security
role === 'admin'ALL
role === 'editor'SELECT, UPDATE
public
DENIED

Row Level Security

Define granular permissions per role, per table — enforced natively in PostgreSQL.

table_rows Spreadsheet View
namestatusviews
Aliceactive1,542
Bobdraft892
Carolactive234

Spreadsheet View

Inline editing, sorting, filtering, and bulk actions — like a supercharged spreadsheet for your database.

history Entity History
alice updated status
2 min ago
bob created record
15 min ago
carol deleted row #42
1 hour ago

Entity History

Full audit trail of every change. See who modified what, when, and revert to any previous state.

See Rebase Studio in action

Open Live Demo arrow_forward All Features arrow_forward