HTML components. Zero runtime.
Bascik is a build tool for HTML components with automatically scoped CSS and JavaScript. You write vanilla HTML, CSS, and JavaScript. Bascik scopes and assembles reusable component files into plain static HTML pages at build time, with no framework runtime, no Shadow DOM, and no virtual DOM. The code that ships is the code you wrote.
Documentation: bascik.dev
Package: @bascik/bascik
npm create bascik@latest my-siteThe CLI scaffolds a starter site and starts the dev server with live reload. See the Getting Started guide for manual setup in an existing project.
Building with an AI assistant? Install the Bascik agent skills so GitHub Copilot, Claude Code, Cursor, or Codex knows the component and scoping rules:
npx skills add bascikdev/bascikA component is an HTML file named after its tag. Its <style> and <script> are scoped to it at build time, so class names and DOM queries never collide with other components.
<!-- src/components/site-nav.html -->
<style>
.nav { display: flex; gap: 1rem; }
</style>
<nav class="nav">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>Use the tag in any page or component. There is no import, export, or registration step.
<!-- src/pages/index.html -->
<!DOCTYPE html>
<html lang="en">
<head><title>Home</title></head>
<body>
<site-nav />
</body>
</html>- Components and Slots
- Scoped CSS without Shadow DOM and Scoped JavaScript
- Build Scripts, Dynamic Routes, and Deployment
- Bascik vs React, Vue, Svelte, and Astro
| Package / Suite | Lines | Functions | Branches |
|---|---|---|---|
@bascik/bascik Unit |
 |
 |
 |
@bascik/bascik E2E |
 |
 |
 |
create-bascik Unit |
 |
 |
 |
bascik-vscode Extension |
 |
 |
 |
@bascik/adapter-cloudflare Unit |
 |
 |
 |
@bascik/language-server Unit |
 |
 |
 |
| Directory | Purpose |
|---|---|
pkg/ |
The @bascik/bascik npm package — source, tests, benchmarks — see pkg/README.md |
create/ |
The create-bascik scaffolding CLI — npm create bascik@latest — see create/README.md |
extensions/vscode-bascik/ |
The VS Code extension — see extensions/vscode-bascik/README.md |
lsp/ |
The @bascik/language-server LSP server — editor-agnostic intelligence for any LSP-compatible editor — see lsp/README.md |
docs/ |
Documentation site at bascik.dev — built with Bascik itself |
skills/ |
Public agent skills for AI assistants, installed with npx skills add bascikdev/bascik. See skills/README.md |
Requires Node.js ≥ 22.18 and Yarn ≥ 4 (pinned to yarn@4.6.0 in package.json). The repo uses Yarn workspaces, one install at the root wires everything up.
corepack enable
yarn installnode_modules/@bascik/bascik is symlinked directly to pkg/, so changes to pkg/src/ are immediately available to the docs site after a rebuild — no pack or reinstall step.
yarn pkg:build # build the package (start here)
yarn pkg:typecheck # TypeScript type check
yarn pkg:unit # unit tests (single run)
yarn pkg:test # unit tests in watch mode
yarn pkg:e2e # run e2e tests
yarn docs:dev # start docs dev serveryarn typecheck:all # typecheck all packages (pkg, create, docs, extension)
yarn check:all # spelling (codespell) and web standards (webhint)
yarn unit:all # unit tests across all packages
yarn e2e:all # E2E tests across all packages
yarn coverage:all # update coverage across all packages
yarn test:all # run typechecks, checks, unit tests, E2E tests, and Lighthouse CLI auditsAfter any pkg/src/ change, rebuild the package and the docs server will pick it up automatically (it watches for changes).
Before committing changes that edited source code, tests, or documentation, run this custom prompt:
/pre-pushThis runs a comprehensive pre-push checklist covering code review, documentation updates, spelling/web standards, test execution, coverage updates, and skill file synchronization.