Vanilla HTML

TypeScript Configuration

Add the Web Component types to your TypeScript configuration:

{
  "compilerOptions": {
    "types": [
      // Optional: Adds native DOM types (e.g. `querySelector`, `document`)
      "@staticview/ui/types/dom",

      // Optional: Exposes component types globally (no imports needed)
      "@staticview/ui/types/global",
    ],
  },
}

Importing Web Components

With a Build Tool

If you are using a build tool such as Vite, import the component as an ES module.
The component self-registers when the module is evaluated.

import "@staticview/ui/[component-name]";

Without a Build Tool

Staticview CLI

Use the sv add command to copy the minified component files into your project:

npx sv add --components [component-name] --outdir public/ui

Then reference the file directly in your HTML. Staticview components work with both classic and module scripts.

<script type="module" src="/ui/[component-name].js"></script>

<!-- Or classic script -->
<script src="/ui/[component-name].js"></script>

CDN

You can load components directly from a CDN that mirrors the npm registry — no installation needed.

unpkg

<script type="module" src="https://unpkg.com/@staticview/ui/[component-name]"></script>

jsDelivr

<script type="module" src="https://cdn.jsdelivr.net/npm/@staticview/ui/[component-name]"></script>

esm.sh (ES modules only)

<script type="module" src="https://esm.sh/@staticview/ui/[component-name]"></script>