Storion Studio

Storion Studio is a Chrome extension that gives you a visual database manager for localStorage, sessionStorage, and IndexedDB—think pgAdmin for the browser. Inspect, edit, and manage client-side data with a clean UI. No backend required.

Install the Chrome extension

Install from the Chrome Web Store (recommended):

Storion Studio on Chrome Web Store

Or load the extension from source: clone storionjs/storion-studio, open chrome://extensions/, enable Developer mode, then Load unpacked and select the folder containing manifest.json.

Playground: no-code data management

Storion Studio includes a playground that lets you work with client-side data entirely through the UI—no code required. It’s a handy tool for developers who want to:

Create databases and tables – Define schemas, add columns, and organize data by project or app, all from the extension.
Add, edit, and delete rows – Use the table grid to insert and update data visually instead of writing db.insert or db.update calls.
Export and import data – Backup entire databases as JSON or restore from a backup with one click. Great for fixtures, migrations, or sharing sample data.

You can prototype a schema, seed test data, and then connect your app to the same database via @storion/storion—or use the playground to inspect and tweak data that your app has already written. No scripts, no REPL: everything happens in the extension UI.

What you can do

Manage multiple databases – Create, rename, and delete databases; keep data organized by project or app.
Design tables – Define table schemas (id is always included), add columns (int, float, boolean, string, json), and adjust structure as your app evolves.
Full CRUD in a table grid – Insert, view, edit, and delete rows in a spreadsheet-like grid with pagination.
Run SQL-like queries – Use the built-in query engine with the same JSON query language as db.query() (see Query language).
Export and import – Backup entire databases as JSON or restore from a backup. Useful for migrating data or sharing fixtures.
Monitor storage usage – See real-time usage against the 5MB localStorage limit.
Sync with your web app (optional) – Built on the Storion engine; if your site uses @storion/storion, you can stream change events between the extension and your app for a seamless admin experience.

Using Storion Studio with your app

Storion Studio uses the same data layout as the @storion/storion npm package (by default under the __LS_DB__ key in localStorage). So you can:

Prototype or inspect data in Storion Studio, then point your app at the same database name and storage.
Use the extension as an admin console while your web app uses the library for reads and writes.

Example: create a database named myapp in Storion Studio, then in your app:

import { createDatabase } from '@storion/storion';

const db = await createDatabase({
  name: 'myapp',
  storage: 'localStorage'
});
// Same data is visible in both the extension and your app

Live sync (extension ↔ webapp)

For live updates from Storion Studio into your app (or the other way around), use the cross-context sync APIs:

On the side that makes changes (e.g. the extension): db.setChangeBroadcaster({ broadcastChange(event) { ... } }).
On the side that receives changes (e.g. your page): createChangeListener(transport, onChange) with a custom transport (e.g. postMessage, Chrome messaging).