rwsdk

A React Framework for Cloudflare.

It begins as a Vite plugin that unlocks SSR, React Server Components, Server Functions, and realtime features.

✨ RedwoodSDK

RedwoodSDK is the missing React framework for Cloudflare — bringing SSR, React Server Components, Server Functions, and Realtime APIs to the edge with the power of Vite.

It features:

• ⚡️ Zero-config Vite integration
• 🔁 Realtime server functions
• 🧠 Smart, composable router with middleware and interruptors
• 🔥 Blazing-fast SSR and RSC support

📦 Quickstart

Start a new project:

npx create-rwsdk my-project-name

Install dependencies:

cd my-project-name
pnpm install

Run the dev server:

pnpm dev

VITE v6.2.0  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

That's it, your RedwoodSDK is up and running!

Add more routes?

As long as you return a valid Response, RedwoodSDK is happy!

// worker.tsx

import { defineApp } from "rwsdk/worker";
import { route, render } from "rwsdk/router";
import MyReactPage from "@app/pages/MyReactPage";

export default defineApp([
  render(Document, [
    route("/", () => new Response("Hello, World!")),
    route("/ping", function () {
      return <h1>Pong!</h1>;
    }),
    route("/react", MyReactPage)
    route("/docs", async () => {
      return new Response(null, {
        status: 301,
        headers: {
          "Location": "https://docs.rwsdk.com",
        },
      });
    }),
    route("/sitemap.xml", async () => {
      return new Response(sitemap, {
        status: 200,
        headers: {
          "Content-Type": "application/xml",
        },
      });
    }),
    route("/robots.txt", async () => {
      const robotsTxt = `User-agent: *
        Allow: /
        Disallow: /search
        Sitemap: https://rwsdk.com/sitemap.xml`;

      return new Response(robotsTxt, {
        status: 200,
        headers: {
          "Content-Type": "text/plain",
        },
      });
    }),
  ]),
]);

Start building immediately → Quick start guide

React Server Components

RedwoodSDK is true Javascript full-stack:

// users.ts (server function)
"use server";
import { db } from "@/db";

export async function getUsers() {
  const users = await db.users.findAll();
  return users;
}

// UserList.tsx (React server component)
import { getUsers } from "./users";

export default async function UsersPage() {
  const users = await getUsers();
  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Setup a database now → React Server Components

⭐️ Like it? Star it!

If this project saves you time or sparks ideas, please ⭐ star the repo — it really helps us grow the community.

🛠 Contributing

This is a monorepo. To contribute or explore packages:

• Fix bugs or propose features
• Join our community on Discord