CRUD & tables

These examples mirror the CRUD & tables section in Storion Studio’s documentation, adapted for both the visual UI and the @storion/storion API.

Create database

Create a new database from the sidebar. Each database is a separate namespace for tables. Choose a name (for example, myAppDB) and click Create.

In the Studio UI

1. Click "+ New" under Databases
2. Enter database name (e.g. myAppDB)
3. Click Create

In your app code

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

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

Create table

After selecting a database, create a table with columns. Each column has a name and a type: int, float, boolean, string, or json.

An id column (integer, auto-generated) is added if you do not define it. You can optionally set a foreign key reference to another table.

Example columns

name   → type: string
email  → type: string
active → type: boolean
amount → type: float
meta   → type: json
Optional: reference another table (e.g. user_id → users.id)

In your app code

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

Insert row

When viewing a table, click + Add Row. Fill in values for each column. The id column is auto-generated if left empty. Values are validated and coerced to the column type (for example, json columns accept valid JSON text).

In the Studio UI

1. Open a table
2. Click "+ Add Row"
3. Fill in values (id is auto-generated if empty)
4. Click Save

In your app code

await db.insert('users', {
  email: 'alice@example.com',
  name: 'Alice',
  active: true,
  meta: { plan: 'pro' }
});

Fetch rows

Opening a table loads all its rows. Use the Query panel in Storion Studio to filter and sort. The table view shows paginated results (for example, 50 per page). Row count and pagination are shown at the bottom.

Studio steps

1. Select a database, then a table
2. All rows are loaded; use Query panel to filter/sort
3. Use where, orderBy, limit, offset in the query JSON

In your app code

const allRows = await db.fetch('users');

const recentActive = await db.query('users', {
  where: { field: 'active', op: 'eq', value: true },
  orderBy: [{ field: 'created_at', direction: 'desc' }],
  limit: 50,
  offset: 0
});

Update row

Click the edit (pencil) icon on a row to change its values. You cannot change the id. Other columns are validated and coerced to their types.

In the Studio UI

1. Find the row in the table
2. Click the edit (pencil) icon
3. Change values in the form
4. Click Save

In your app code

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

Delete row

Click the delete (trash) icon on a row to remove it. If another table has a foreign key pointing to this row, the delete may be blocked to keep referential integrity.

In the Studio UI

1. Find the row in the table
2. Click the delete (trash) icon
3. Confirm deletion

In your app code

await db.delete('users', 1);

Column types

Supported column types:

int     → integer
float   → number
boolean → true / false
string  → text
json    → object or array (stored and compared as JSON)

For json columns, query operators work on the stringified form; in the table view and edit form, values are shown as formatted JSON.