Quick start

Install

npm install @storion/storion

npm: @storion/storion

Create a database

Create or connect to a database using localStorage, sessionStorage, or indexedDB.

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

const db = await createDatabase({
  name: 'myapp',
  storage: 'localStorage'
});

Create a table

await db.createTable('users', [
  { name: 'id', type: 'int' },
  { name: 'email', type: 'string' },
  { name: 'name', type: 'string' },
  { name: 'active', type: 'boolean' }
]);

If you omit id, an auto-increment integer id column is added.

Insert rows

await db.insert('users', { email: 'alice@example.com', name: 'Alice', active: true });
await db.insert('users', { email: 'bob@example.com', name: 'Bob', active: false });

Fetch and query

const all = await db.fetch('users');
const active = await db.fetch('users', { filter: { active: true }, sortBy: 'name', limit: 10 });

const { rows, totalCount } = await db.query('users', {
  where: { field: 'active', op: 'eq', value: true },
  orderBy: [{ field: 'name', direction: 'asc' }],
  limit: 20,
  offset: 0
});

Update and delete

await db.update('users', 1, { name: 'Alice Smith' });
await db.delete('users', 2);

Subscribe to changes

When multiple components share the same Database instance, subscribe to change events so they stay in sync without polling.

const unsubscribe = db.subscribe('users', (event) => {
  console.log(event.type, event.row); // 'insert' | 'update' | 'delete' | 'tableCreated' | 'tableDeleted'
});

// When done:
unsubscribe();

See API reference and Query language for full details.

Common examples

Todo list using localStorage

A minimal todo database stored entirely in localStorage:

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

const db = await createDatabase({
  name: 'todo-app',
  storage: 'localStorage'
});

await db.createTable('todos', [
  { name: 'id', type: 'int' },
  { name: 'title', type: 'string' },
  { name: 'done', type: 'boolean' }
]);

await db.insert('todos', { title: 'Ship Storion docs', done: false });

const openTodos = await db.fetch('todos', {
  filter: { done: false },
  sortBy: 'id'
});

Admin-style querying

Run a more expressive query over a "users" table, similar to what the query panel in Storion Studio does:

const { rows, totalCount } = await db.query('users', {
  where: {
    and: [
      { field: 'active', op: 'eq', value: true },
      { field: 'name', op: 'contains', value: 'smith' }
    ]
  },
  orderBy: [{ field: 'created_at', direction: 'desc' }],
  limit: 20,
  offset: 0
});