Installation

Get up and running with EmberKit in minutes.

Requirements

  • Node.js 18+ (Bun and Deno supported for running tools)
  • pnpm (recommended), npm, or yarn

Quick Install

# Scaffold a new project (starter kit with Tailwind)
npx @emberkit/cli@latest create my-app
cd my-app
pnpm install
pnpm dev

The CLI generates vite.config.ts, src/index.tsx, src/routes/, and scripts wired to emberkit dev, emberkit build, and emberkit preview.

Manual Setup

mkdir my-app && cd my-app
pnpm init

pnpm add @emberkit/core
pnpm add -D @emberkit/cli vite typescript

vite.config.ts

import { defineConfig } from 'vite';
import { emberkitVitePlugin } from '@emberkit/core/vite-plugin';

export default defineConfig({
  plugins: [emberkitVitePlugin()],
  server: { port: 3000, host: 'localhost' },
  esbuild: { jsxImportSource: '@emberkit/core' },
});

emberkit.config.ts

Optional but recommended for build mode and server settings:

import { defineConfig } from '@emberkit/core';

export default defineConfig({
  mode: 'hybrid', // 'static' | 'ssr' | 'spa' | 'hybrid'
  server: { port: 3000, host: 'localhost' },
  build: { outDir: 'dist', target: 'esnext' },
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My App</title>
</head>
<body id="app">
  <script type="module" src="/src/index.tsx"></script>
</body>
</html>

src/index.tsx

import { render } from '@emberkit/core';
import { routes } from 'virtual:emberkit-routes';
import App from './routes/_layout';

const root = document.getElementById('app');
if (root) {
  render(App, root, { routes });
}

package.json scripts

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

Use emberkit serve after build for a production-style server with SSR manifest routing (see SSR & SSG).

Project Structure

my-app/
├── emberkit.config.ts    # mode, server, build (optional)
├── vite.config.ts        # Vite + emberkitVitePlugin()
├── index.html
├── src/
│   ├── index.tsx         # Client entry
│   └── routes/
│       ├── index.tsx     # → /
│       ├── about.tsx     # → /about
│       └── _layout.tsx   # Wraps routes
└── package.json

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "jsxImportSource": "@emberkit/core",
    "strict": true,
    "noEmit": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"]
  },
  "include": ["src"]
}

Verify Installation

pnpm dev

Open http://localhost:3000. In hybrid or SSR mode, view page source — you should see rendered HTML inside #app, not an empty shell.

Troubleshooting