@reckona/create-mreact-app

Mreact

Mreact is a React-flavored framework for building server-rendered apps.

It takes inspiration from Marko's compiler-first and streaming model, with additional influence from Solid and Qwik. It is not a resumability framework; instead, it uses compiler-assisted server/client splitting to keep server-rendered routes free of browser runtime when they do not need it.

The codebase was largely generated by an AI agent, so one thing is certain: there are absolutely no typos. Good luck.

Motivations

• Fine-grained reactivity - Use a dependency graph to update only the parts that need to change.
• Automatic server/client boundary inference - Infer which route modules and components need browser runtime so static server-rendered paths can stay server-only by default.
• Modular runtime - Avoid shipping client runtime for routes that do not need it. A route with no client-side signals can stay server-rendered without a client route bundle.
• Compile-time over runtime - Focus on the compiler rather than the runtime to avoid a fat runtime.
• Chunk-based streaming SSR - Favor memory efficiency and incremental delivery by sending HTML in chunks instead of buffering the full document, similar to Marko's streaming model.
• Dual environment optimization - Compile server and browser output separately. The server output specializes in HTML, loaders, middleware, metadata, and server actions, while the browser output specializes in DOM updates and route-local interactivity.

Status

Experimental. APIs may change.

We are dogfooding it in our own products and have tested deployments on Cloud Run, Cloudflare, and AWS Lambda.

Performance

Mreact aims to stay small and fast: small client bundles, low server rendering cost, streaming-friendly HTML, and short deployment startup paths.

See the Benchmarks page for the latest benchmark results.

Documentation

• Documentation site: https://t-k.github.io/mreact/
• Getting started: https://t-k.github.io/mreact/getting-started/
• Basics: https://t-k.github.io/mreact/guides/basics/
• App Router: https://t-k.github.io/mreact/guides/app-router/
• Deployments: https://t-k.github.io/mreact/deployments/static-hosting/
• Benchmarks: https://t-k.github.io/mreact/benchmarks/
• API reference: https://t-k.github.io/mreact/api/

Quick Start

Create a project:

npx @reckona/create-mreact-app my-app --template basic --src-dir
cd my-app
pnpm install
pnpm dev

Examples

The examples/ directory contains focused applications:

Example	Purpose
examples/app-router	Full app-router tour covering routing, layouts, metadata, loaders, actions, middleware, forms, auth, i18n, and deployments
examples/hacker-news	Hacker News clone using streaming SSR, Tailwind CSS, router navigation, and Cloudflare Workers deployment. Live demo: https://mreact-hacker-news.t-kaniwa-e16.workers.dev
examples/docs-site	This documentation site with MDX, static export, Pagefind search, API reference rendering, and benchmark result cards
examples/react-libraries	React ecosystem libraries running through Mreact compatibility boundaries
examples/reactive-primitives	cell, computed, effect, and DOM updates
examples/store	Shared store, selectors, transactions, and subscriptions
examples/virtual-grid	Responsive grid virtualization

More details: https://t-k.github.io/mreact/examples/

Packages

Core packages:

• @reckona/mreact
• @reckona/mreact-dom
• @reckona/mreact-router
• @reckona/mreact-reactive-core
• @reckona/mreact-reactive-dom
• @reckona/mreact-server
• @reckona/create-mreact-app

Companion packages:

• @reckona/mreact-auth
• @reckona/mreact-forms
• @reckona/mreact-query
• @reckona/mreact-store
• @reckona/mreact-virtual
• @reckona/mreact-compat
• @reckona/mreact-vite
• @reckona/mreact-test-utils

API reference: https://t-k.github.io/mreact/api/

Benchmarks

Mreact tracks primitive reactivity behavior, browser DOM costs, app-router throughput, client bundle size, route artifact shape, and deployment startup paths.

See the benchmark dashboard and interpretation notes: https://t-k.github.io/mreact/benchmarks/

Local benchmark commands:

pnpm bench:primitive
pnpm bench:primitive-browser
pnpm bench:non-router
pnpm bench:router
pnpm bench:lambda-routes
pnpm bench:all

Development

Install dependencies and build packages:

pnpm install
pnpm build

Run tests:

pnpm test
pnpm test:e2e:smoke
pnpm test:e2e

Build the documentation site locally:

pnpm --filter @reckona/example-docs-site build

Generate and check API documentation:

pnpm docs:api
pnpm docs:api:check
pnpm api:report
pnpm api:report:check

Generated TypeDoc output is committed under docs/api. API Extractor reports live under etc/api.

License

MIT