Getting started

Start a new project

# Interactive mode
pnpm create kiru

# Or specify options directly
pnpm create kiru -d my-kiru-app --template CSR --install --start

Add to an existing project

The following example demonstrates adding Kiru to a Vite project.

Add Kiru and the Kiru Vite plugin (for HMR and Devtools):

pnpm add kiru
pnpm add vite-plugin-kiru -D

Update your vite.config.ts (or add it in the top level of your project) and add the HMR plugin:

import { defineConfig } from "vite"
import kiru from "vite-plugin-kiru"

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

Add the "jsx" entry in your tsconfig.json:

{
  "compilerOptions": {
    ...
    "jsx": "preserve",
    ...
  }
}

Create a simple app:

export function App() {
  return <h1>Hello world!</h1>
}

Mount your app to the DOM:

import { mount } from "kiru"
import { App } from "./App"

mount(<App />, document.getElementById("app")!)

Getting help

Reach out to us or get involved on Discord