Getting Started

Get up and running with Kaori in seconds! 🚀

Prerequisites

Before you begin, make sure you have:

• Node.js 18 or higher

Creating a New Project

The easiest way to start a Kaori project is using create-kaori:

pnpm

pnpm create kaori my-kaori-app
cd my-kaori-app
pnpm install
pnpm dev

npm

npm create kaori my-kaori-app
cd my-kaori-app
npm install
npm run dev

yarn

yarn create kaori my-kaori-app
cd my-kaori-app
yarn install
yarn dev

This will scaffold a new Kaori project with:

• Vite for blazing-fast development
• TypeScript configuration
• Kaori compiler setup
• Example components to get you started

Manual Installation

If you prefer to add Kaori to an existing project:

pnpm

pnpm add kaori.js
pnpm add -D kaori-compiler

npm

npm install kaori.js
npm install --save-dev kaori-compiler

yarn

yarn add kaori.js
yarn add --dev kaori-compiler

Vite Configuration

Add the Kaori Vite plugin to your vite.config.ts:

import { defineConfig } from 'vite';
import { kaori } from 'kaori-compiler/vite';

export default defineConfig({
  plugins: [kaori()],
});

TypeScript Configuration

Update your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "kaori.js"
  }
}

Your First Component

Create a file src/App.tsx:

import { signal, render } from 'kaori.js';

function App() {
  const count = signal(0);

  function increment() {
    count.value++;
  }

  return () => (
    <div>
      <h1>Hello Kaori! ✨</h1>
      <p>Count: {count.value}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

const root = document.getElementById('root')!;
render(<App />, root);

Development Server

Start your development server:

pnpm dev

Your app will be running at http://localhost:5173 🎉

What's Next?

Now that you have Kaori set up, you can:

• Learn about Reactivity in Kaori
• Understand Components patterns
• Explore Props handling
• Check out Examples for inspiration

Project Structure

A typical Kaori project looks like this:

my-kaori-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── App.tsx          # Root component
│   ├── main.tsx         # Entry point
│   └── style.css        # Global styles
├── index.html           # HTML template
├── package.json
├── tsconfig.json
└── vite.config.ts

Need more help? Check out our GitHub Issues or join the community!