├── package.json
└── README.md


/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "@drizzle-team/studio",
3 |   "version": "1.0.3"
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Drizzle Studio NPM Package 📦
  2 | If you're looking for a Drizzle Studio NPM package to install into your product - you're in the right place!
  3 | <br>
  4 | 
  5 | ![image](https://github.com/drizzle-team/drizzle-studio-npm/assets/4045375/9ac739e0-ec3d-4902-840d-abb3b71e3f17)
  6 | 
  7 |   
  8 | Drizzle Studio is a web based modern database browser which comes in a form of:
  9 |   1. [Drizzle Studio for Local Development](https://orm.drizzle.team/drizzle-studio/overview) for your Drizzle ORM projects
 10 |   2. [Drizzle Studio Chrome Extension](https://driz.link/extension) which lets you browse PlanetScale, Cloudflare D1, Vercel Postgres and AWS Data API directly in their native consoles
 11 |   3. [Drizzle Studio Gateway](https://gateway.drizzle.team) is a deployable Dockerized version of Studio on steroids, which you can put into your infrastructure and connect privately to your databases
 12 |   4. Drizzle Studio Component <- you're here
 13 |   
 14 | 
 15 | <br>
 16 | 
 17 | `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.  
 18 |   
 19 | **Database platforms using Drizzle Studio:**
 20 | - [Turso](https://turso.tech), our first customers since Oct 2023!
 21 | - [Neon](https://neon.tech), [launch post](https://neon.tech/docs/changelog/2024-05-24)
 22 | - [SQLite Cloud](https://sqlitecloud.io/), [launch post](https://blog.sqlitecloud.io/release-notes-introducing-database-studio-in-sqlite-cloud)
 23 | - [Hydra](https://www.hydra.so/)
 24 | - [Tembo](https://tembo.io), [launch post](https://tembo.io/blog/announcing-sql-editor)
 25 |   
 26 | **AI powered platforms for building apps and websites**
 27 | - [Replit](https://repl.it), [launch post](https://blog.replit.com/database-editor)
 28 | - [Deno](https://deno.com/deploy), [launch post](https://x.com/rough__sea/status/1950231545807327329)
 29 | - [Kinsta](https://kinsta.com/)
 30 | - [Create.xyz](https://create.xyz), [launch post](https://x.com/create_xyz/status/1889479526499098830)
 31 | - [Gibsonai](https://www.gibsonai.com/), [blog post](https://www.gibsonai.com/blog/announcing-gibsonai-2-0-your-database-supercharged) [video](https://www.youtube.com/watch?v=87g5tL3SWhI)
 32 | - [Sevalla](https://sevalla.com/)
 33 | - [Zapi](https://heyzapi.com/)
 34 | 
 35 | **Data centric platforms using Drizzle Studio:**
 36 | - [Nuxt Hub](https://hub.nuxt.com), Sébastien Chopin's [lauch post](https://x.com/Atinux/status/1768663789832929520)
 37 | - [Deco](https://deco.cx/), undergoing integration
 38 | 
 39 | **Startups using Drizzle Studio:**
 40 | - [Sample Health Care](https://samplehc.com/)
 41 | 
 42 | <br>
 43 | 
 44 | We also have a set of companies using embeddable Drizzle Studio components for internal use cases
 45 | 
 46 | ### Customisations
 47 | Drizzle Studio is highly customisable and we have an advanced [theming platform](https://drizzle.studio), we have an opt-in SQL query runner and we can add various partner-specific customizations on demand 👍  
 48 | 
 49 | Drizzle Studio has an **opt-in SQL query runner**:
 50 | ![image](https://github.com/drizzle-team/drizzle-studio-npm/assets/4045375/6e179d12-5026-4b9f-8e52-f4aa8ae8e883)
 51 | 
 52 | in-place editable **JSON** support:
 53 | <img width="1447" alt="Screenshot 2024-06-12 at 14 39 16" src="https://github.com/drizzle-team/drizzle-studio-npm/assets/4045375/f91bd27b-c868-4010-8309-465876529e81">
 54 | 
 55 | **Advanced filtering** and lots of other useful stuff:
 56 | ![image](https://github.com/drizzle-team/drizzle-studio-npm/assets/4045375/8bbc4146-e66d-4231-9240-253335002032)
 57 | 
 58 | ### Integration
 59 | We distribute Drizzle Studio as a private npm package and here's how in-code integration looks like:
 60 | ```ts
 61 | import type { DrizzleStudioRef } from '@drizzle-team/your-company-studio';
 62 | import StudioScript from '@drizzle-team/your-company-studio?raw';
 63 | 
 64 | 
 65 | const lightCssVariables = {
 66 |   "--background": "#ffffff",
 67 |   ...
 68 | };
 69 | const darkCssVariables = { ... };
 70 | 
 71 | 
 72 | function App() {
 73 |   // create a ref to the drizzle-studio component
 74 |   const studioRef = useRef<DrizzleStudioRef>(null);
 75 |   const [theme, setTheme] = useState<'light' | 'dark'>('light');
 76 | 
 77 |   return (
 78 |     <div style={{
 79 |       height: '100%',
 80 |       width: '100%',
 81 |       display: 'flex',
 82 |       flexDirection: 'column',
 83 |     }}>
 84 |       <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
 85 |         Change theme
 86 |       </ button>
 87 |       <drizzle-studio
 88 |         ref={studioRef}
 89 |         css-variables={JSON.stringify(theme === 'light' ? lightCssVariables : darkCssVariables)} // styling 
 90 |         title="Drizzle Studio"
 91 |         style={{
 92 |           flexGrow: 1,
 93 |           minHeight: 0,
 94 |         }}
 95 |       />
 96 |     </div>
 97 |   )
 98 | }
 99 | 
100 | export default App
101 | ```
102 | 
103 | ### Pricing
104 | 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!
105 |   
106 | Feel free to reach out on [𝕏](https://x.com/drizzleorm), in our [Discord](https://driz.link/discord) or via [mail](mailto:aleksandrblokh@gmail.com)!
107 | 


--------------------------------------------------------------------------------