Getting started
Start a new project
To quickly scaffold a new project, head to the CSR Template or the SSR/SSG Template repository and select 'Use this template'.
Alternatively, you can clone a template via the following:mkdir my-app
cd my-app
git clone https://github.com/CrimsonChi/kaioken-csr-template.git .
rm -rf .git
pnpm i
pnpm dev
Add to an existing project
The following example demonstrates adding Kaioken to a Vite project.
Add Kaioken and the Kaioken Vite plugin (for HMR):
pnpm add kaioken
pnpm add vite-plugin-kaioken -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 kaioken from "vite-plugin-kaioken"
export default defineConfig({
plugins: [kaioken()],
})
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 "kaioken"
import { App } from "./App"
const root = document.getElementById("app")
mount(App, root)
Getting help
Reach out to us or get involved on Discord