Pidrang GitHub

Generate an Angular admin from your Supabase schema.

Build Angular admin applications faster: pidrang init reads your Supabase tables and writes typed resources and CRUD pages for Angular Material, on an open-source, headless framework.

Version 0.1.0 · MIT licensed · Angular 22.1+ (22.x) · pre-1.0

Get started View on GitHub

See it working

Pidrang list page for a products table, rendered with Angular Material: one column per field, with Show, Edit and Delete actions

A products table from Supabase, rendered by ResourceTable of @pidrang/material. The same demo exists with the Tailwind layer.

Get started

  1. Install

    In an Angular 22.1+ standalone app:

    npm install @pidrang/core @pidrang/supabase @pidrang/material @supabase/supabase-js
ng add @angular/material

  2. Generate

    From the root of the app, connect to your Supabase project and pick your tables. The CLI writes resources.ts and the List, Create, Show and Edit pages, without overwriting a file.

    npx pidrang init

  3. Wire

    Paste what the CLI prints: ...resourceRoutes in your routes, provideRouter(routes, withComponentInputBinding()) and providePidrang in your app config. Then run ng serve.

Every table needs an id primary key. Read the full guide