Roost

Write React apps in Scheme.

Roost compiles Scheme to WebAssembly with Hoot, and uses React as it is.

Playground · Live demos · Docs

• React as is: components, Hooks, React 19, any npm library
• Scheme all the way: Hiccup markup, records, modules
• Live development: save a file, the page updates, state is kept; a REPL into the running page, from the terminal
• Small: the complete TodoMVC is about 330 KB gzipped, React included

Status: a working prototype. Not on npm yet; the API may change.

A component

(import (scheme base)
        (prefix (roost dom) h/)
        (only (roost props) props let-props)
        (only (roost hiccup) component)
        (only (roost react) render-root)
        (only (roost hooks) use-state))

(define (counter attributes)
  (let-props attributes ((start 0))
    (let-values (((count set-count!) (use-state start)))
      (h/section
       (h/output count)
       (h/button (props #:on-click (lambda (event) (set-count! (lambda (n) (+ n 1)))))
                 "+1")))))

(render-root (component counter (props #:start 0)) "root")

The page loads the Scheme file directly:

<div id="root"></div>
<script type="module" src="./main.scm"></script>

Quick start

You need Node.js 24, pnpm 10, and Hoot (install: one command on macOS, Debian, Guix).

pnpm install
pnpm dev                  # examples at http://localhost:5173
ROOST_REPL=1 pnpm dev     # the same, with live development

Live development needs Hoot's main branch for now (why).

Examples

Example	Shows
Playground	Write a module, run it, try it in a REPL: in the browser, nothing to install	Live
Counter	State, effects, events	Live
TodoMVC	The complete TodoMVC: editing, routes, persistence	Live
Router + Query	React Router and TanStack Query from Scheme	Live
Checkout	A store in modules: 200-product catalog, cart, coupon, checkout form, quick view	Live

Docs

• Using Roost: components, state, effects, JavaScript libraries
• Live development: reload on save, the REPL, commands
• Setup: requirements, installing Hoot, using Roost without Vite
• Design principles: how Roost works, and why
• Contributing

License

Apache-2.0. Built applications include Hoot's runtime, also Apache-2.0; builds ship its license in hoot/LICENSE.