Drizzle Studio NPM Package 📦

If you're looking for a Drizzle Studio NPM package to install into your product - you're in the right place!

Drizzle Studio is a web based modern database browser which comes in a form of:

1. Drizzle Studio for Local Development for your Drizzle ORM projects
2. Drizzle Studio Chrome Extension which lets you browse PlanetScale, Cloudflare D1, Vercel Postgres and AWS Data API directly in their native consoles
3. Drizzle Studio Gateway(work in progress) is a deployable Dockerized version of Studio on steroids, which you can put into your infrastructure and connect privately to your databases
4. Drizzle Studio Component <- you're here

Drizzle Studio embeddable Component - is a pre-bundled framework agnostic web component of Drizzle Studio which you can embed into your UI(React/Vue/Svelte/VanillaJS/whatever). That is an extremely powerful UI element that can elevate your offering if you provide Database as a SaaS or a data centric SaaS solutions based on SQL or for private non-customer facing in-house usage.

Database platforms using Drizzle Studio:

• Turso, our first customers since Oct 2023!
• Neon, launch post
• Hydra, undergoing integration

Data Centric platforms using Drizzle Studio:

• Nuxt Hub, Sébastien Chopin's lauch post
• Deco, undergoing integration

We also have a set of companies using embeddable Drizzle Studio components for internal use cases

Customisations

Drizzle Studio is highly customisable and we have an advanced theming platform, we have an opt-in SQL query runner and we can add various partner-specific customizations on demand 👍

Drizzle Studio has an opt-in SQL query runner:

in-place editable JSON support:

Advanced filtering and lots of other useful stuff:

Integration

We distribute Drizzle Studio as a private npm package and here's how in-code integration looks like:

import type { DrizzleStudioRef } from '@drizzle-team/your-company-studio';
import StudioScript from '@drizzle-team/your-company-studio?raw';


const lightCssVariables = {
  "--background": "#ffffff",
  ...
};
const darkCssVariables = { ... };


function App() {
  // create a ref to the drizzle-studio component
  const studioRef = useRef<DrizzleStudioRef>(null);
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  return (
    <div style={{
      height: '100%',
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
    }}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Change theme
      </ button>
      <drizzle-studio
        ref={studioRef}
        css-variables={JSON.stringify(theme === 'light' ? lightCssVariables : darkCssVariables)} // styling 
        title="Drizzle Studio"
        style={{
          flexGrow: 1,
          minHeight: 0,
        }}
      />
    </div>
  )
}

export default App

Pricing

Pricing depends on the size of you platform and if it's going to be customer facing or internal, and we do have reduced pricing for Sponsors if you you're interested in supporting our OSS venue and have brand awareness and a relevant traffic to your offering!

Feel free to reach out on 𝕏, in our Discord or via mail!