Introduction
What is Borda?
Borda is an embeddable onboarding widget that guides users through your interface step by step. It renders a spotlight overlay around target elements, paired with a tooltip that displays a title, description, image, and navigation buttons — all configurable per step.
Borda works on any type of site — SaaS dashboards, landing pages, e-commerce stores, documentation portals — without requiring a specific framework. The widget mounts into any container or directly into document.body as a floating overlay.
Built with Svelte 5, Borda compiles down to vanilla JavaScript with no framework runtime. The output integrates into React, Vue, Angular, or plain HTML without dependency conflicts. Distribution formats include ES Module, UMD, and CommonJS.
See it in action
The only required field is steps — an array of step definitions. Each step specifies a target element, a title, a description, and a placement for the tooltip. This tour runs on the page you're reading right now: every target below is a real heading or feature card further down, and each step uses a different placement to show the tooltip positioning itself around its target.
import { useBorda, ComponentPlacement } from '@retoo/borda';
import '@retoo/borda/styles';
const borda = useBorda();
const instance = await borda.mount({
steps: [
{
target: '#page-header',
title: 'Page header',
description: 'Every page has a header with a title and description — Borda spotlights it as the starting point of the tour.',
placement: ComponentPlacement.BOTTOM_CENTER,
},
{
target: '#what-is-borda',
title: 'What is Borda?',
description: 'The first section heading on the page. Borda can target any element with a CSS selector.',
placement: ComponentPlacement.BOTTOM_START,
},
{
target: '#what-is-borda-description',
title: 'Description',
description: 'A paragraph of text right below the heading. The spotlight wraps around just this block.',
placement: ComponentPlacement.BOTTOM_START,
},
{
target: '#features',
title: 'Features',
description: 'The entire Features section wrapped in a single spotlight. One step can cover a large area.',
placement: ComponentPlacement.MIDDLE_START,
},
{
target: '#bundle-size',
title: 'Bundle size',
description: '~42 KB gzipped. Zero runtime dependencies.',
placement: ComponentPlacement.TOP_START,
},
{
target: '#bundle-callout',
title: 'Full breakdown',
description: 'Callouts, links, and inline elements are valid targets too.',
placement: ComponentPlacement.TOP_CENTER,
},
],
});
Features
highlight() shortcut.Bundle size
The production bundle weighs ~42 KB gzipped (JS + CSS combined). Zero runtime dependencies — nothing is loaded beyond the assets you provide.