Formats

Borda is distributed in three module formats. Each format has a development build (readable, with comments) and a minified production build. All variants export the same API surface — the difference is how the module is loaded by the consumer.

ES Module

The recommended format for projects using a bundler (Vite, Webpack 5+, Rollup, esbuild). ES Modules support static analysis, tree-shaking, and modern import/export syntax.

The main and module fields in package.json point to this build, so bundlers resolve it automatically.

import { useBorda } from '@retoo/borda';

import '@retoo/borda/styles';

const borda = useBorda();

UMD

Universal Module Definition — works via <script> tags in the browser, AMD loaders, and CommonJS require(). Use this for environments without a bundler: static HTML pages, WordPress, Webflow, Squarespace, or any CMS that allows custom scripts.

<link rel="stylesheet" href="https://unpkg.com/@retoo/borda/dist/borda.css" />
<script src="https://unpkg.com/@retoo/borda/dist/borda.min.umd.js"></script>
<script>
  const borda = window.bordaWidget();

  borda.mount({
    steps: [
      {
        target: '#element',
        title: 'Welcome',
        description: 'Getting started.',
        placement: 'bottom-center',
      },
    ],
  });
</script>

CommonJS

For Node.js environments, SSR frameworks, or legacy build systems that use require().

const { useBorda } = require('@retoo/borda');

const borda = useBorda();

Custom Element

Register Borda as a native Web Component to use it in any framework — or vanilla HTML:

import { defineBordaElement } from '@retoo/borda';

import '@retoo/borda/styles';

defineBordaElement();

<borda-tour-widget></borda-tour-widget>

Stylesheets

CSS must be imported separately regardless of the JS format. Without styles, the widget mounts into the DOM but renders without any visual appearance.

// ES Module / bundler
import '@retoo/borda/styles';        // dev
import '@retoo/borda/styles/min';    // prod

<!-- UMD / script tag -->
<link rel="stylesheet" href="https://unpkg.com/@retoo/borda/dist/borda.css" />