Vitre JS

Small behavior helpers for semantic Vitre UI components.

Vitre JS provides optional interactivity for semantic HTML. It does not ship component skinning. Pair it with Vitre CSS when you want the full Vitre UI presentation.

WARNING: This is a new library (May 2026) under new development. It is published mostly for testing its own docs and examples from CDNs. You're free to try it, make suggestions, report problems at https://github.com/appurist/vitre-js/issues but it comes as-is and without any stated or implied warrantees. It is a best effort that I made for myself and I'm making it available for everyone to use for free.

Links

• GitHub repo: https://github.com/appurist/vitre-js
• GitHub docs: https://appurist.github.io/vitre-js/
• npmjs.org: https://www.npmjs.com/package/vitre-js
• Vitre CSS: https://www.npmjs.com/package/vitre-css

Install

npm install vitre-js

Use the browser file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vitre-css/vitre.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/vitre-js/vitre.js"></script>

Or import the ESM API:

import { Vitre, apply } from "vitre-js";

Alerts

Semantic alert markup:

<div role="status" dismiss timeout="6">
  Saved successfully.
</div>

Supported roles are alert, status, and note. Add dismiss for a close button and timeout for automatic dismissal. Dismiss controls are generated as right-aligned SVG icon buttons with data-variant="ghost" when paired with Vitre CSS.

API

Vitre.apply();
Vitre.apply(document.querySelector("#dynamic-content"), ["alerts"]);

Vitre.apply() runs automatically on page load for browser script usage. Call it again after inserting dynamic content.

Development

This repo uses a local pnpm link to the sibling ../vitre-css checkout during development. The GitHub Pages docs and examples live under docs/ and use versioned CDN URLs so they render correctly as static Pages content:

pnpm install