A key-value store in 30 lines

The smallest useful app. BIND gives a name to a value. VIEW reads it. That's a key-value store. Type a key and a value, set it, get it.

01Try it

Click SET to bind a key to a value. Click GET to read it.

02The cells

Key	Value	Version	Action
No cells yet.

03The source

This is the whole app. 30 lines. The substrate gives you BIND and VIEW for free. You just have to wire them up to the UI.

const sub = new Substrate();

function set(key, value) {
  sub.bind(key, value);
  render();
}

function get(key) {
  return sub.view(key);
}

function render() {
  const tbody = document.getElementById('cells-table');
  tbody.innerHTML = '';
  for (const [name, cell] of sub.cells) {
    const tr = document.createElement('tr');
    tr.innerHTML = `<td><code>${name}</code></td>
      <td>${JSON.stringify(cell.value)}</td>
      <td>v${cell.version}</td>
      <td><button onclick="del('${name}')">×</button></td>`;
    tbody.appendChild(tr);
  }
}

function del(key) { sub.cells.delete(key); render(); }

That's it. BIND is the only opcode. VIEW is the only reader. The substrate does the rest. The 5 laws give you idempotence, replay, rollback, and persistence for free.

04Take it with you

Click Save to put the state in localStorage. Click Save to cloud to put it in Cloudflare KV and get a share URL. Click Export to download a saddle-bridge JSONL file you can replay on a local instance.

Try it: open this page in two tabs, set keys in tab A, then save and load in tab B. The state follows you.