Installation

Scaffolding (Recommended)

The fastest way to start:

# npm
npm create whisq@latest my-app

# pnpm
pnpm create whisq my-app

# bun
bun create Whisq my-app

This creates a project with Vite, TypeScript, and a counter example.

Adding to an Existing Project

Package Manager

# npm
npm install @whisq/core

# pnpm
pnpm add @whisq/core

# yarn
yarn add @whisq/core

# bun
bun add @whisq/core

With Vite

If you already have a Vite project, just install the package — no plugin needed for basic usage:

npm install @whisq/core

import { signal, div, button, span, mount } from "@whisq/core";

const count = signal(0);

mount(
  div(
    button({ onclick: () => count.value++ }, "Click me"),
    span(() => `Count: ${count.value}`),
  ),
  document.getElementById("app")!,
);

For file-based routing, add the Vite plugin:

npm install @whisq/vite-plugin

import { defineConfig } from "vite";
import { Whisq } from "@whisq/vite-plugin";

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

TypeScript Configuration

Whisq is written in TypeScript and ships with types. Recommended tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "isolatedModules": true
  },
  "include": ["src"]
}

CDN (No Build)

For prototyping or small projects, use Whisq directly via CDN:

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script type="module">
      import {
        signal, div, button, span, mount
      } from "https://esm.sh/@whisq/core";

      const count = signal(0);

      mount(
        div(
          button({ onclick: () => count.value++ }, "+"),
          span(() => ` ${count.value} `),
        ),
        document.getElementById("app"),
      );
    </script>
  </body>
</html>

Optional Packages

Package	Purpose	Install
`@whisq/router`	Client-side routing	`npm i @whisq/router`
`@whisq/ssr`	Server-side rendering	`npm i @whisq/ssr`
`@whisq/testing`	Component testing	`npm i -D @whisq/testing`
`@whisq/vite-plugin`	File routing, HMR	`npm i -D @whisq/vite-plugin`
`@whisq/devtools`	Runtime debugging	`npm i -D @whisq/devtools`

Next Steps

Your First Component — Build something real
Signals — Understand reactive state