Ramonda

Examples

Each one is a real component in apps/docs/src/demos/, rendered live and printed from the same file. Open the source under any of them.

State and a handler

@compute — derived values, cached

  • apples — 3
  • bread — 2
  • coffee — 9

total: 14total computed 1× · visible computed 1× — typing in the filter recomputes only one of them

@create, @mount, @destroy — in order

    @Host — the element a component is

    I am a <section>
    I have the default host.

    Inspect the elements: the first is a real <section>, the second is <ramonda-host>.

    Refs — reaching the element

    0 characters

    @onWindow — a global listener

    window is 0px wideresize the browser

    @onDocument — a keyboard shortcut

    last key: —pressed 0 times — type anywhere on the page

    @timeout — cancelled on unmount

    waiting 1.5 seconds…

    @interval — and the two-pass pattern

    —updates every second

    @effect — the cleanup contract

      @watchProp — reacting to a prop

      showing adano change yet — @watchProp does not fire on mount

      Context — a value without threading

      a component two levels down:light / pink

      @memoizedHandler — stable handler identity

      • apples
      • bread
      • coffee

      —

      createSubscriptionDecorator — external stores

      0

      store listeners: 0 — unmounting the component removes its subscription, with nothing in the component to remember it

      ErrorBoundary — containing a failure

      this row is outside the boundary

      Fragile is fine.

      @persist — a value from the server

      prerendered at 2026-07-24 09:32:54 UTCclient @create ran 0 time(s) — the value above came from the server

      list() — lists without keys

      click a few counters, then reverse — each count moves with its task

      • write the docs
      • fix the diff
      • ship it

      list() — a filtered, conditional list

      star a row, then filter — a row that stays keeps its own star, and no row inherits one from a person the filter removed

      • Ada compilers
      • Grace runtimes
      • Edsger semantics
      • Barbara genomics
      • Katherine trajectories

      focusOn — what an immutable edit copies

      last: nothing yet

        Only what is ON the path gets a new object. `state.users` and `state.posts[0]` come out of every edit as the very same objects, so a shallow compare rejects those branches without looking inside them — which is what makes the diff cheap. Write a value that is already there and nothing is copied at all, not even the root.

        RouteHook — the live route of this site

        pathname/examples

        searchParams(none)

        → State→ Lists→ back here, with a query

        Reads are per key: a component reading only pathname is not re-rendered when the query changes.

        Inheritance — the unit of reuse

        three classes, one render() between them — the third is a <mark>

        AsyncLoad — a component in its own chunk

        open the network tab — the chunk is preloaded from <head> and fetched once

        Loaded at 9:32:54 AM.fetched on demand