Quick Start

Build your first EmberKit app in a few minutes.

1. Create a project

npx @emberkit/cli@latest create my-app
cd my-app && pnpm install && pnpm dev

2. Add a route

Routes live in src/routes/. Edit index.tsx or add new files:

// src/routes/index.tsx
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to EmberKit</h1>
      <p>Fast, light, and zero-JS by default.</p>
    </main>
  );
}

The layout in src/routes/_layout.tsx wraps every page. The client entry (src/index.tsx) calls render() with virtual:emberkit-routes.

3. Dynamic routes

// src/routes/blog/[slug].tsx
import type { RouteParams } from '@emberkit/core';

export default function PostPage({ params }: RouteParams<{ slug: string }>) {
  return <h1>Post: {params.slug}</h1>;
}

Navigate to /blog/hello-world — params.slug is available on the server and client.

4. Signals and hydration

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

function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    <div>
      <p>
        Count: <span data-ek-bind={count}>{count()}</span>
      </p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
}

5. Navigation

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

function Nav() {
  return (
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <button type="button" onClick={() => navigate('/contact')}>
        Contact
      </button>
    </nav>
  );
}

Use standard <a href> for SSR-friendly links, or navigate() for programmatic routing with optional View Transitions.

6. Page metadata

export const metadata = {
  title: 'About — My App',
  description: 'About our team',
};

export default function About() {
  return <h1>About</h1>;
}

Or use <Head> from @emberkit/core inside components — see Head.

7. Build for production

pnpm build      # Output in dist/ (mode from emberkit.config.ts)
pnpm preview    # Local preview server

Set mode: 'static' in emberkit.config.ts for a fully static export, or hybrid (default) for static pages plus SSR for dynamic routes. See SSR & SSG.

What's Next?