React Notebook

An interactive React playground built directly into Visual Studio Code.

React Notebook lets you write React components in notebook-style cells, run them instantly, and see the rendered UI directly below your code.

No project setup. No Vite. No Webpack. No npm install. Create a notebook, write a component, and run it.

✨ Features

• ⚡ Zero Configuration — Start writing JSX or TSX without creating a React project.
• 📓 Notebook Experience — Combine Markdown notes with interactive React components in a single file.
• ⚛️ Interactive React Components — Use state, effects, event handlers, forms, browser APIs, Canvas, and other React features.
• 🔷 JSX & TSX Support — Write components using JSX or TypeScript JSX syntax.
• 🎨 Tailwind CSS Support — Use Tailwind utility classes directly with no configuration required.
• 🧩 Independent Cells — Each code cell is compiled and mounted independently, making experiments self-contained.
• 🚀 Fast Transpilation — JSX and TypeScript syntax are transformed using Sucrase.
• 🐛 Inline Runtime Errors — React rendering errors are displayed directly in the cell output.
• 📚 Built-in Examples — Explore ready-to-run examples covering React concepts and browser APIs.

🚀 Getting Started

1. Create a React Notebook

Create a new file with either of these extensions:

.reactbook
.rnb

or

Open the VS Code Command Palette with:

Ctrl + Shift + P

Then run:

React Notebook: Create New React Notebook

A new notebook will be created with starter content to help you begin experimenting immediately.

VS Code will automatically open the file as a React Notebook.

2. Add a Code Cell

Create a code cell and write a React component.

Your component must be exported as the default export:

export default function App() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">Hello React Notebook!</h1>
    </div>
  );
}

3. Run the Cell

Click the ▶ Play button next to the cell.

The rendered React component will appear directly below your code.

You can use standard React features such as:

State Event handlers Conditional rendering Lists JSX and TSX syntax Tailwind CSS utility classes 🔷 TypeScript Support

React Notebook supports TypeScript syntax directly inside cells:

📚 Explore Examples

Want to see what React Notebook can do?

Open the Command Palette and run:

React Notebook: Create Example React Notebook

The example notebook contains interactive demonstrations of concepts such as:

State and event handling Components and props Forms and controlled inputs React effects Async API requests Browser APIs Canvas Animations Tailwind CSS

You can edit and experiment with every example directly inside the notebook.

interface GreetingProps {
  name: string;
}

function Greeting({ name }: GreetingProps) {
  return <h1 className="text-2xl font-bold">Hello, {name}!</h1>;
}

export default function App() {
  return <Greeting name="React Notebook" />;
}

TypeScript is transpiled at runtime. React Notebook currently does not perform full TypeScript type checking during cell execution.

🎨 Tailwind CSS

Tailwind CSS is available automatically, so you can use utility classes without creating a configuration file:

export default function Card() {
  return (
    <div className="p-6 rounded-xl shadow-lg bg-white">
      <h2 className="text-xl font-bold">Zero-config styling</h2>

      <p className="text-gray-600 mt-2">Styled directly with Tailwind CSS.</p>
    </div>
  );
}

No Tailwind installation or configuration is required.

An internet connection is currently required to load Tailwind CSS.

📦 No Project Setup Required

React Notebook is designed for quick, isolated component experiments.

You do not need to create a React project or install project dependencies:

• No npm install
• No package.json
• No Vite
• No Webpack
• No node_modules

Just create a .reactbook or .rnb file and start experimenting.

⚠️ Current Limitations

React Notebook currently focuses on isolated, single-cell React components.

The following features are not yet supported:

• Importing local files such as ./Button.tsx
• Importing npm packages directly inside cells
• Sharing variables or components between cells
• Full TypeScript type checking

Each cell is intentionally executed independently.

📋 Requirements

Visual Studio Code 1.120.0 or later Internet connection for Tailwind CSS

React component execution itself works locally without requiring a development server.

🤝 Contributing

Bug reports, feature requests, and contributions are welcome.

If you encounter an issue or have an idea for React Notebook, please open an issue on the GitHub repository.

📄 License

MIT