Overview

Getting Started

Node.js 24 LTS is recommended. The minimum supported version is Node.js 22.18.

Quick Start

Create a new site with Bascik:

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.

Edit a page or a component and save. The browser updates on its own, with no manual refresh:

Create Bascik Command

npm create bascik@latest my-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, vite.config.js, .vscode/extensions.json recommending the official Bascik extension, and a .gitignore with Vitest, npm run lint (bascik --check, with the @bascik/language-server linter installed), E2E testing, and code coverage pre-configured.

It does not create bascik.config.ts because the starter uses Bascik's built-in defaults.

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.

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

<!-- 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:

<!-- 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>

See Working Components

The Example Components are tested components to read and learn from, from a site header to a contact form.

Your First Component

1. 1

   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>

2. 2

   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>

3. 3

   Start the dev server

   sh

   npm run dev

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

4. 4

   Build for production

   sh

   npm run build

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