index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pidrang — Generate an Angular admin from your Supabase schema</title>
  <meta name="description" content="Generate an Angular admin from your Supabase schema: pidrang init writes typed resources and CRUD pages. Open-source, headless, signal-first framework for Angular.">
  <link rel="canonical" href="https://pidrang.dev/">

  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Pidrang">
  <meta property="og:url" content="https://pidrang.dev/">
  <meta property="og:title" content="Pidrang — Generate an Angular admin from your Supabase schema">
  <meta property="og:description" content="Generate an Angular admin from your Supabase schema: pidrang init writes typed resources and CRUD pages. Open-source, headless, signal-first framework for Angular.">
  <meta property="og:image" content="https://pidrang.dev/assets/social/social-card.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Pidrang logo and the tagline Build Angular admin applications faster">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https://pidrang.dev/assets/social/social-card.png">

  <link rel="icon" type="image/png" sizes="32x32" href="assets/logo/favicon-32.png">
  <link rel="apple-touch-icon" href="assets/logo/apple-touch-icon-180.png">
  <link rel="alternate" type="application/rss+xml" title="Pidrang blog" href="https://pidrang.dev/blog/index.xml">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <a class="brand" href="/">
      <img src="assets/logo/mark-light-500.png" alt="" width="484" height="500">
      <span>Pidrang</span>
    </a>
    <nav class="site-nav" aria-label="Main">
      <a href="/docs/">Docs</a>
      <a href="https://github.com/pidrang/pidrang/blob/main/ROADMAP.md">Roadmap</a>
      <a href="/demos/">Demo</a>
      <a href="/blog/">Blog</a>
    </nav>
    <a class="button button-small" href="https://github.com/pidrang/pidrang">GitHub</a>
  </header>

  <main>
    <div class="hero">
      <img class="logo" src="assets/logo/mark-light-500.png" alt="Pidrang logo" width="484" height="500">
      <h1 class="headline">Generate an Angular admin from your Supabase schema.</h1>
      <p class="lede">Build Angular admin applications faster: <code>pidrang init</code> reads your Supabase tables and writes typed resources and CRUD pages for Angular Material, on an open-source, headless framework.</p>
      <p class="status">Version 0.1.0 · MIT licensed · Angular 22.1+ (22.x) · pre-1.0</p>
      <div class="actions">
        <a class="button button-primary" href="/docs/getting-started">Get started</a>
        <a class="button" href="https://github.com/pidrang/pidrang">View on GitHub</a>
      </div>
    </div>

    <section aria-labelledby="preview-title">
      <h2 id="preview-title">See it working</h2>
      <img class="preview" src="assets/screenshots/demo-material-products.png" alt="Pidrang list page for a products table, rendered with Angular Material: one column per field, with Show, Edit and Delete actions" width="1100" height="340">
      <p>A <code>products</code> table from Supabase, rendered by <code>ResourceTable</code> of <code>@pidrang/material</code>. The same demo exists with the Tailwind layer.</p>
      <nav id="demos">
        <a class="button button-primary" href="/demo-material/" target="_blank" rel="noopener">Try the live demo<span class="external-mark" aria-hidden="true">↗</span><span class="sr-only"> (opens in a new tab)</span></a>
        <a class="text-link" href="/demo-tailwind/" target="_blank" rel="noopener">Tailwind version<span class="external-mark" aria-hidden="true">↗</span><span class="sr-only"> (opens in a new tab)</span></a>
      </nav>
    </section>

    <section aria-labelledby="start-title">
      <h2 id="start-title">Get started</h2>
      <ol class="steps">
        <li>
          <h3>Install</h3>
          <p>In an Angular 22.1+ standalone app:</p>
          <pre class="code commands"><code>npm install @pidrang/core @pidrang/supabase @pidrang/material @supabase/supabase-js
ng add @angular/material</code></pre>
        </li>
        <li>
          <h3>Generate</h3>
          <p>From the root of the app, connect to your Supabase project and pick your tables. The CLI writes <code>resources.ts</code> and the List, Create, Show and Edit pages, without overwriting a file.</p>
          <pre class="code commands"><code>npx pidrang init</code></pre>
        </li>
        <li>
          <h3>Wire</h3>
          <p>Paste what the CLI prints: <code>...resourceRoutes</code> in your routes, <code>provideRouter(routes, withComponentInputBinding())</code> and <code>providePidrang</code> in your app config. Then run <code>ng serve</code>.</p>
        </li>
      </ol>
      <p>Every table needs an <code>id</code> primary key. <a class="text-link" href="/docs/getting-started">Read the full guide</a></p>
    </section>
  </main>

  <footer class="footer">
    <form class="newsletter" action="https://buttondown.com/api/emails/embed-subscribe/pidrang" method="post">
      <label for="newsletter-email">Get release notes by email</label>
      <div class="newsletter-row">
        <input type="email" name="email" id="newsletter-email" autocomplete="email" required placeholder="you@example.com">
        <button class="button button-primary" type="submit">Subscribe</button>
      </div>
      <p class="newsletter-note">Release notes and articles, about once a month. Double opt-in, unsubscribe anytime. <a href="/privacy/">Privacy</a></p>
    </form>
    <a href="mailto:contact@pidrang.dev">contact@pidrang.dev</a>
    <a href="https://github.com/pidrang/pidrang">GitHub</a>
    <a href="https://www.npmjs.com/org/pidrang">npm</a>
    <a href="https://github.com/pidrang/pidrang/blob/main/LICENSE">MIT License</a>
    <a href="/privacy/">Privacy</a>
    <p class="footer-note">Inspired by Refine. Not affiliated with Angular or Refine.</p>
  </footer>
  <script data-goatcounter="https://pidrang.goatcounter.com/count"
        async src="//gc.zgo.at/count.js"></script>
</body>
</html>