Installation

Use Node.js 20.19 or newer (or 22.12 or newer) for Tavo.js development, builds, and server rendering. The application uses TypeScript and npm by default, but the CLI can record another package manager when your team has standardized on one.

bashnode --version
npm --version

The create command writes the route directory, application entry, TypeScript and Vite configuration, development scripts, starter page, and agent-facing project guidance. Install dependencies after reviewing the target directory.

Open the URL printed by Vite and try the counter. Stop the development server with Ctrl+C before continuing to the installation commands below.

bashnpx @tavojs/cli create app project-dashboard
cd project-dashboard
npm install
npm run dev

The rest of this guide uses npm and runs project-local tools with npx tavo and npx tavo-ui. The equivalents are pnpm exec tavo, yarn tavo, or bunx tavo for the framework and pnpm exec tavo-ui, yarn tavo-ui, or bunx tavo-ui for UI tooling.

Tavo.js Framework owns routing, data, rendering, and application behavior. Tavo.js UI supplies interface components and project theme tooling. Install @tavojs/ui, then initialize its theme configuration.

The tavo-ui command comes with @tavojs/ui through its package dependencies. Do not install or independently version @tavojs/ui-cli in the application.

bashnpm install @tavojs/ui
npx tavo-ui web init

Merge tavoUi() into the generated configuration. Keep src/styles.css, diagnostics, build options, and every existing plugin. During development and production builds, the plugin reads the default tavo-ui.config.ts file and injects the generated theme variables; no generated theme file belongs in cssEntries for this setup.

tsimport { defineConfig } from "@tavojs/core/config";
import { tavoUi } from "@tavojs/ui/plugin";

export default defineConfig({
  pagesDir: "src/pages",
  cssEntries: ["src/styles.css"],
  diagnostics: {
    devOverlay: true,
    traces: false,
  },
  plugins: [tavoUi()],
});

The standard development command is the fastest client iteration loop. Use SSR development as soon as you add server loaders, actions, middleware, sessions, or request-time metadata.

bashnpm run dev
# Stop the CSR server, then start SSR development:
npm run dev:ssr