openTagCloud

One engine, every framework

The Svelte, React, Vue, Angular, SolidJS, and Next.js adapters all use the same deterministic layout shown here — click a tag to open its npm package.

Density

density (0–1) sets how tightly words cluster: 0 spreads them evenly across the container, 1 packs them around the centre and leaves the corners empty. Words never overlap at any setting — drag the slider.

These boxes hold their type at one size (via fill factor 0.6), so clustering is the only thing changing: the same words at the same size, drawn further apart or closer together. At full fill the layout would instead grow the type to absorb the space that tighter packing frees up, and the setting would look like it did nothing.

Fill factor

In a fixed-height box the layout scales the type up until the cloud fills it. fillFactor (0–1) says how much of the box to claim: 1 fills it with the largest type that fits, 0 leaves the type at the size you authored and as much negative space as that implies. The default is 0.75.

It also governs whether density is visible — at full fill, growing the type simply absorbs the space that tighter packing frees up.

Full example pages

Complete, viewable pages straight from the repository — open them to see each integration running on its own.

• Svelte component demo — the prerendered SvelteKit demo app: sizing, theming, and per-tag color.
• Vanilla / no-build — a single script tag: mount() and the <otc-tag-cloud> custom element.
• Right-to-left — the layout mirrors automatically under dir="rtl".