fluffy-ts
A tiny learning-focused React framework for understanding file-based routing, server rendering, hydration, CLI tooling, and package publishing.
Overview
fluffy-ts is a small React framework built for learning.
It is not trying to compete with production frameworks. The goal is more useful than that: rebuild one complete vertical slice slowly enough that the parts become visible.
The first milestone answers one question:
What has to happen for a file in
src/pagesto become server-rendered HTML and then hydrate in the browser?
What it includes
The project is split into a few focused packages:
@fluffy-ts/coreowns routing, SSR, hydration, and the development server.@fluffy-ts/cliexposes developer commands such asfluffy dev.@fluffy-ts/create-appscaffolds new projects.
Vite owns the bundling and dev-server substrate. React owns rendering. fluffy-ts owns the framework stitching: route discovery, request handling, rendering, client entry generation, and the browser hydration path.
Phase 1
Phase 1 is the smallest useful framework loop:
create app
|
v
fluffy dev
|
v
src/pages/index.tsx
|
v
server render -> HTML -> client entry -> hydrateRoot
That path now exists as a working slice, with tests, an example app fixture, Changesets, GitHub workflow automation, and npm publishing infrastructure around it.
Writing
I am writing about the build as I go:
The long-term idea is to turn the framework into both a working package and a teaching artifact: something small enough to inspect, but real enough to explain why frameworks are shaped the way they are.