f fluffy-ts

React framework, built in public

Learn how routing, SSR, and hydration fit together.

fluffy-ts is a small framework project built to teach the moving pieces behind modern React frameworks without trying to become the next production mega-framework.

Read the phase notes Try the packages

Try it

pnpm dlx @fluffy-ts/create-app my-app
cd my-app
pnpm install
pnpm dev

What this teaches

The framework path, one request at a time.

  1. 01

    Page file

    src/pages/index.tsx exports a React component.

  2. 02

    Route

    The file path becomes a URL route and is matched on request.

  3. 03

    SSR

    React renders the matched route into an HTML document.

  4. 04

    Hydration

    The browser imports the same page and makes the HTML interactive.

Route discovery

File conventions are a framework API, not just folder structure.

Server rendering

The first response is already useful HTML before JavaScript runs.

Hydration

React reconnects event handlers to the server-rendered tree.

Client navigation

Later phases can navigate without throwing the document away.

Phase 1

First working vertical slice.

The current release proves the smallest useful loop: scaffold an app, run fluffy dev, render a file-based route on the server, and hydrate that same route in the browser.

Packages publish through Changesets and npm trusted publishing.

The example app acts as the permanent smoke-test fixture.

The CLI starts a Vite-powered development server.

Route discovery maps src/pages files to URLs.

Packages

Small pieces with clear jobs.

@fluffy-ts/core

Runtime code for route discovery, server rendering, hydration, and the development server.

@fluffy-ts/cli

The developer command surface. Today it exposes fluffy dev.

@fluffy-ts/create-app

The project scaffolder that creates a small app ready to run against the local framework loop.

Roadmap

Built in phases, written down as it grows.

Each phase has a goal, scope, verification path, and release note. That keeps the project teachable and keeps the framework from drifting into vague ambition.

  1. Active Phase 1: vertical slice

    Scaffold, dev server, route discovery, SSR, and hydration.

  2. Planned Phase 2: route data

    Server data loading, serialization, and clearer route failures.

  3. Planned Phase 3: production build

    Build output, asset manifests, and production start commands.

Learning log

Decisions worth remembering.

fluffy-ts uses Vite instead of rebuilding bundling from scratch, chooses file-based routing for the first convention, keeps static generation out of phase 1, and uses a real example app as the regression fixture.

Read the full roadmap