BUILD — a counter with persistence

Combine all 5 opcodes to make a working counter. Save it to the cloud. Take it offline. Come back. The state is yours.

01The shape

Combine all 5 opcodes to make a working counter. Save it to the cloud. Take it offline. Come back. The state is yours.

02Try it

// Lesson 7: Your first app
// A counter that persists across page reloads.

const sub = new Substrate();

// Init from saved state
const saved = localStorage.getItem('counter-app');
if (saved) {
  sub.fromJSONL(saved);
}

// A counter cell
if (!sub.has('count')) {
  sub.bind('count', 0);
}

// EFFECT: increment
function inc() {
  sub.effect('count', (n) => (n || 0) + 1);
  sub.tick();
  save();
}

// EFFECT: decrement
function dec() {
  sub.effect('count', (n) => (n || 0) - 1);
  sub.tick();
  save();
}

// EFFECT: reset
function reset() {
  sub.effect('count', () => 0);
  sub.tick();
  save();
}

// VIEW: read the current count
function getCount() {
  return sub.view('count') || 0;
}

// Persist
function save() {
  localStorage.setItem('counter-app', sub.toJSONL());
}

// Wire to the UI
document.getElementById('inc').onclick = inc;
document.getElementById('dec').onclick = dec;
document.getElementById('reset').onclick = reset;

function render() {
  document.getElementById('count').textContent = getCount();
}
render();

// Re-render on every event
sub.on('count', render);
sub.on('count', () => sub.tick(0.01));

03What you've built

A working counter. It uses all 5 opcodes:

• BIND to create the count cell
• EFFECT for increment, decrement, reset
• VIEW to read the current value
• TICK to advance time on each change
• LINK would be used to chain counters together (try it!)

It saves to localStorage, so it survives a page reload. Click Save to cloud below to put it in Cloudflare KV and get a share URL.

04What you can build

A counter. It seems small, but it's the seed of every reactive UI, every versioned config, every CRDT, every game state. The substrate doesn't know about counters. It knows about 5 opcodes. You composed them into a counter. The composition is yours.

05Next

You finished the Academy. Try the full REPL → · See the 5 apps → · Visual playground →