Word Cloud

Write and render word clouds.

This component is using D3 and d3-cloud to render these.

Table of contents


How the Word Cloud Generator Works The layout algorithm for positioning words without overlap is available on GitHub under an open source license as d3-cloud. Note that this is the only the layout algorithm and any code for converting text into words and rendering the final output requires additional development.


This component could be added to your web application using the following methods.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo word cloud component from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/word-cloud@latest/dist/deckdeckgo-word-cloud/deckdeckgo-word-cloud.esm.js"></script>

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/word-cloud

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:


import '@deckdeckgo/word-cloud';


import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/word-cloud/dist/loader'; deckDeckGoElement();


The "Word Cloud" Web Component could be integrated using the tag <deckgo-word-cloud/>.

<deckgo-word-cloud> <code slot="words"> Each Word entered it will become part of the cloud </code> </deckgo-word-cloud>

Becomes editable by setting the "editable" property to "true".

<deckgo-word-cloud editable="true"> <code slot="words"></code> </deckgo-word-cloud>


The words have to be provided using the slot words.


This component offers the following options which could be set using attributes:

editablebooleanfalseTo set the component has being editable (contenteditable will be applied on the slot on click)
marginTopnumber32Margin top in pixels
marginBottomnumber32Margin bottom in pixels
marginLeftnumber32Margin left in pixels
marginRightnumber32Margin right in pixels


The <deckgo-word-cloud/> component triggers the following event.

wordCloudDidChangeEmit the host element when modified.CustomEvent<HTMLElement>


The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--deckgo-word-cloud-empty-text"Click to add your words"Place holder in case editable is set to true