On this page

Introduction

Rebask is a Vite plugin and runtime for React Server Components apps.

It adds file based routing, streaming HTML, Partial Pre-Rendering (PPR), Server Functions, and soft navigations.

If you use a coding agent, start with Agents. It points agents at cheatsheet.md , Markdown docs, and the Rebask skill.

Getting started

Get started with a new app using create-rebask-app:

pnpm create rebask-app

Manual setup

1. Install dependencies

pnpm add @rebask/core react react-dom
pnpm add -D vite @vitejs/plugin-rsc @vitejs/plugin-react
PackageRole
rebaskFramework runtime and Vite plugin
react / react-domReact 19
viteBundler and dev server
@vitejs/plugin-rscReact Server Components for Vite
@vitejs/plugin-reactFast Refresh and the automatic JSX runtime

2. Configure Vite

Add the RSC, React, and Rebask plugins in vite.config.ts:

import rsc from "@vitejs/plugin-rsc"
import react from "@vitejs/plugin-react"
import { rebask } from "@rebask/core/vite"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [rsc(), react(), rebask()],
})

3. Create the app entry files

Rebask maps files under app/ to routes. Start with a root layout under app/layout.tsx that will wrap every page and should render <html> and <body>:

import type { ReactNode } from "react"

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>My App</title>
      </head>
      <body>{children}</body>
    </html>
  )
}

app/page.tsx is the / route:

export default function HomePage() {
  return <h1>Hello</h1>
}

4. Add scripts and run

In package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Finally, start the dev server:

pnpm dev