Skip to main content
State is the data that flows through your app at runtime. It comes from two sources: user input and query results. Understanding state helps you build interactive apps that respond to user actions.

​
State sources

​
Input state

Input state comes from components that capture user input:
ComponentState storedDescription
Input{ value }The text the user has typed
Select{ value, displayName }The selected option’s value and display label
When a user types in an Input or selects an option in a Select, the value is immediately stored in state.

​
Query state

Query state comes from database queries. Each query stores its results: 
{
  columns: string[];              // Column names
  rows: Record<string, unknown>[]; // Data rows
  count: number;                  // Row count
  executedAt: string;             // When the query ran
}
Queries run automatically when your app loads.

​
Accessing state

State is accessed in code mode transforms using two functions:

​
query(slug)

Returns data from a query by its slug: 
const users = query('users-query');

console.log(users.columns);    // ['id', 'name', 'email']
console.log(users.rows);       // [{ id: 1, name: 'Alice', ... }, ...]
console.log(users.count);      // 100
console.log(users.executedAt); // '2024-01-15T10:30:00Z'

​
input(slug)

Returns the value from an input component by its slug: 
const search = input('simple-input-abc');
const filter = input('simple-select-def');

console.log(search.value);       // 'search term'
console.log(filter.value);       // 'active'
console.log(filter.displayName); // 'Active Status'
Find slugs in the “State” tab in the editor.

​
Example: Search and filter

This example shows state flowing from inputs to a filtered table: Components:
  • Input (slug: simple-input-abc) — search term
  • Select (slug: simple-select-def) — status filter
  • Table — displays filtered results
Table transform: 
function transform(): { headers: string[]; rows: RowObject[] } {
  const data = query('users-query');
  const search = input('simple-input-abc');
  const status = input('simple-select-def');

  let rows = data.rows;

  // Filter by search term
  if (search.value) {
    rows = rows.filter(row =>
      String(row.name).toLowerCase().includes(search.value.toLowerCase())
    );
  }

  // Filter by status
  if (status.value !== 'all') {
    rows = rows.filter(row => row.status === status.value);
  }

  return {
    headers: ['Name', 'Email', 'Status'],
    rows,
  };
}

​
Persistence

State is automatically persisted to the browser’s IndexedDB with a 10-minute TTL. This means:
  • Refreshing the page preserves recent input values
  • Stale data is automatically cleaned up
  • No manual save/load required