Examples

The repository's examples/ folder contains runnable apps. Run them from a clone of the repository after pnpm install.

Delivery modes side by side

examples/modes/ holds four small apps with the same layout, the same pages and a switcher bar that links them together:

Start all four with one command:

pnpm examples:modes           # development servers
pnpm examples:modes:preview   # production builds, served with fuzor preview

Things to try:

• Navigate between Home and About and watch the footer's document loads counter. It stays the same in the SPAs and goes up on every MPA navigation.
• Open Guestbook in a server app. The form posts to api/guestbook.ts, which validates the body with Effect Schema. It works without JavaScript (the endpoint redirects back to the page), and the island submits it in place when JavaScript runs.
• Build a server app and look inside dist-*-server/client/: the same prerendered pages as the static build are there. The server adds endpoints, not page rendering.

Mixed frameworks

examples/basic/ combines vanilla, React, Solid and Vue islands, compiler-rendered previews, a Markdown page, a dynamic route (pages/notes/[slug]/), a custom not-found page and a redirect.

pnpm example:dev:mpa:server
pnpm --filter @fuzor/example dev:spa

View the page source on the home page: every counter's initial markup is already in the HTML before any framework loads.

Server data

examples/server-data/ shows request-time data for prerendered pages: <fuzor-data> slots, an island reading routeData(), and a dynamic route whose server.ts is an Effect that returns notFound() for unknown users.

pnpm build
pnpm --filter @fuzor/example-server-data build:mpa
pnpm --filter @fuzor/example-server-data start:mpa

This website

website/ is a Fuzor app too. Its docs are Markdown folders with a generated sidebar; see building the website.