Web apps in TypeScript, served by Rust.

No JavaScript, Just Fast IR

Real sources and the IR the compiler produced from them, regenerated on every build of this site. The last tab is a loader the compiler refuses and the error it reports.

import type { Ctx } from "@snapfire/fsr";

export async function load({ session }: Ctx) {
  const count = Object.values(session.cart).reduce((n, q) => n + q, 0n);
  return { count };
}

(let count (reduce (values (session cart)) 0 (fn (n q) (+ n q))))

FSR against React on the server

The same pages with the same props, rendered by the FSR interpreter, by React in V8 and by React in QuickJS.

How FSR compares

Pick a question. FSR's answer comes first with what backs it up, then how five other frameworks answer it.

rendered  routes/page.tsx                lowered  static
          src/ui/home/ReactCounter.tsx   lowered
          src/ui/RequestTrace.tsx        client
islands   src/ui/home/ServerCounter.tsx  server   2 handlers

[sites.docs]
artifact = "sites/docs"

[sites.learn]
artifact = "sites/learn"

shop                the binary
config/             app.toml
app/generated/      plan.sexp
serve/static/       static files

React, Vue, Web Components or Tera

An island is the interactive part of a page. Write it in React, in Vue or as a web component. A server island runs on the server instead, so the browser downloads no code for it. Pages are TSX or Tera templates. Every kind of island shares the page and the store.

import { useStore } from "@snapfire/fsr-client/react";
import { demoCount } from "@src/store";

export function ReactCounter() {
  const [n, setN] = useStore(demoCount, 0);
  return (
    <div className="forge-counter">
      <button onClick={() => setN(n - 1)}>−</button>
      <output>{n}</output>
      <button onClick={() => setN(n + 1)}>+</button>
    </div>
  );
}

// in the page
<Island when="visible"><ReactCounter /></Island>

// A server island written in React
import { useStore } from "@snapfire/fsr-client/react";
import { demoCount } from "@src/store";

export function ServerCounter() {
  const [n, setN] = useStore(demoCount, 0);
  return (
    <div className="forge-counter">
      <button onClick={() => setN(n - 1)}>−</button>
      <output>{n}</output>
      <button onClick={() => setN(n + 1)}>+</button>
    </div>
  );
}

// in the page
<Island when="visible" mode="server"><ServerCounter /></Island>

<script setup lang="ts">
import { useStore } from "@snapfire/fsr-client/vue";
import { demoCount } from "@src/store";

const n = useStore(demoCount, 0);
</script>

<template>
  <div class="forge-counter">
    <button @click="n.value--">−</button>
    <output>{{ n.value }}</output>
    <button @click="n.value++">+</button>
  </div>
</template>

import { get, set, subscribe }
  from "@snapfire/fsr-client/store";
import { demoCount } from "@src/store";

const count = () => get(demoCount) ?? 0;

export class ForgeCounter extends HTMLElement {
  connectedCallback() {
    const out = this.querySelector("output")!;
    const [down, up] = this.querySelectorAll("button");
    down.onclick = () => set(demoCount, count() - 1);
    up.onclick = () => set(demoCount, count() + 1);
    out.textContent = String(count());
    subscribe(demoCount, (n) => (out.textContent = n));
  }
}
customElements.define("forge-counter", ForgeCounter);

// in the page
<Island when="visible"
  define="@src/elements/forge-counter.ts">
  <forge-counter>
    <div className="forge-counter">
      <button aria-label="Decrease">−</button>
      <output>0</output>
      <button aria-label="Increase">+</button>
    </div>
  </forge-counter>
</Island>

<!-- routes/demos/counter/page.tera -->
<div class="forge-counter" id="tera-counter">
  <button hx-get="/demos/counter?__fragment"
    hx-vals='{"by": -1}' hx-target="#tera-counter"
    hx-swap="outerHTML">−</button>
  <output>{{ n }}</output>
  <button hx-get="/demos/counter?__fragment"
    hx-vals='{"by": 1}' hx-target="#tera-counter"
    hx-swap="outerHTML">+</button>
</div>

// routes/demos/counter/page.loader.ts
export async function load({ query }: Ctx) {
  return { n: Number(query.n ?? "0")
    + Number(query.by ?? "0") };
}
export const store = ({ data }) =>
  ({ "home/count": data.n });

Four commands

The CLI makes the project, serves it with reload, checks it and writes the tree you copy to a server.

Built into the host

The stock host handles sessions, identity, service calls, caching and deployment checks, so the application code doesn't implement them.

dist/
  shop        the binary
  config/
  app/        plan.sexp, read at boot
  serve/      static files

This site runs on FSR

The docs and the tutorials are separate FSR applications mounted inside this one. Each has its own routes and content. They share this site's layout, session and store.

/fsrmain app

The main app, React pages rendered by the host

/fsr/docsmounted

Docs, its own app at /fsr/docs

/fsr/learnmounted

Tutorials, its own app at /fsr/learn

Other projects