Quick Start

Manic is a fullstack React framework optimized for the Bun runtime. To ensure the best development experience, Bun must be installed on your system.

Automatic Installation

The fastest way to scaffold a new Manic project is using the create manic utility.

bun create manic ./my-app
cd my-app
bun dev

This command will:

Initialize a new project with the Starter Template.
Install all necessary dependencies.
Set up the mandatory ~manic.ts and manic.config.ts files.

Manual Installation

If you prefer to set up your project manually, follow these steps.

1. Initialize your project

Create a directory and initialize a new Bun project.

mkdir my-app && cd my-app
bun init

2. Install Dependencies

Add manicjs and its peer dependencies.

bun add manicjs react react-dom
bun add -d @types/react @types/react-dom

3. Setup Entry Points

Create the mandatory server entry point ~manic.ts in the root.

// ~manic.ts
import {  } from 'manicjs/server';

const  = await ({ : '<!doctype html><html><body><div id="root"></div></body></html>' });

export default {
  : .. || 6070,
  : .,
};

4. Create your first page

Create the app/routes directory and add an index.tsx file.

// app/routes/index.tsx
export default function () {
  return <>Hello from Manic!</>;
}

5. Launch the Dev Server

Run the development command to start the high-speed OXC watcher.

bunx manic dev

How it Works

When you run manic dev, several things happen under the hood to ensure performance:

Discovery: Manic scans your app/ directory and creates a virtual route manifest.
Plugin Initialization: Any plugins in manic.config.ts are loaded and their preload scripts are injected.
Transformation: The OXC transformer begins on-demand transpilation of your TSX/TS files into ES2022 JavaScript.
Hono Instance: A Hono server is launched, wrapping the Manic routing engine and serving both your React app and API routes.

Next Steps

Now that you have your first page running, explore the following topics to build a complete application:

Routing

Learn about dynamic routes, nested layouts, and scoring.

API Routes

Build high-performance backends with the built-in Hono integration.

Configuration

Customize your build pipeline and deployment settings.

Quick Start

Routing

API Routes

Configuration

On this page