Overview

Getting Started

Bascik requires Node.js v22.18+. Get up and running in under five minutes.

Quick Start

The fastest way to start a new Bascik project with no prompts, just a running site:

npm create bascik@latest my-site -y

That scaffolds the project, installs dependencies, and starts the dev server in one shot. Open http://localhost:8080 in your browser to see your live site.

Pass a different name to use it as both the directory name and the site title. If you omit -y, the CLI steps through the setup prompts interactively.

npm create bascik@latest scaffolds a complete starter site: pages, components with unit tests, Playwright E2E browser tests, global CSS, bascik.config.ts, vite.config.js, and a .gitignore with Vitest, E2E testing, and code coverage pre-configured.

Manual Setup

To add Bascik to an existing project:

npm install @bascik/bascik

Run bascik init to create the starter directory structure, or add "dev": "bascik" and "build": "bascik --build" to your package.json scripts.

html

<!-- src/components/site-nav.html -->
<nav class="nav">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

html

<!-- src/pages/index.html -->
<!DOCTYPE html>
<html>
<head><title>Home</title></head>
<body>
  <site-nav></site-nav>
  <h1>Hello world</h1>
</body>
</html>

At build time, Bascik resolves <site-nav> into its component markup and scopes the class names into dist/index.html:

html

<!-- dist/index.html -->
<!DOCTYPE html>
<html>
<head><title>Home</title></head>
<body>
  <nav class="bascik__site-nav__nav">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <h1>Hello world</h1>
</body>
</html>

Your First Component

Create the component file

The file name becomes the tag name.

html src/components/site-nav.html

<!-- src/components/site-nav.html -->
<nav class="nav">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

Reference it in a page

No imports or registration. Just use the tag.

html src/pages/index.html

<!-- src/pages/index.html -->
<!DOCTYPE html>
<html>
<head><title>Home</title></head>
<body>
  <site-nav></site-nav>
  <h1>Hello world</h1>
</body>
</html>

Start the dev server

npm run dev

The server runs on http://localhost:8080 and live-reloads on every change.

Build for production

npm run build

Output is written to the dist/ directory. Deploy it anywhere that serves static files.

Next Step

Learn How Components Work

Discover how Bascik resolves custom tags, passes props, scopes CSS and JS, and handles slots with zero runtime footprint.

Explore Components →