Installation

pnpm add @welldot/core @welldot/render

npm install @welldot/core @welldot/render

yarn add @welldot/core @welldot/render

@welldot/render draws Well objects from @welldot/core, which you use to parse the files. D3 7, d3-tip, textures and sanitize-html install with the package; @welldot/utils comes along as a dependency.

Requirements

• A browser DOM. The renderer draws into an existing <svg> element with D3. It runs in the browser, or in tests with jsdom; it does not render on a server by itself.
• ES modules and CommonJS are both published, with TypeScript declarations.

Server-side rendering

In Nuxt, Next.js, SvelteKit and similar frameworks, create the renderer only on the client, after the SVG element is mounted. Importing the package dynamically there also keeps D3 and the texture definitions out of your server bundle and main chunk:

// inside onMounted / useEffect / onMount
const { WellRenderer, INTERACTIVE_RENDER_CONFIG } =
  await import('@welldot/render');

Using it in a framework shows complete Vue and React components.

Versions

The current release is 0.4.1. It accepts Well objects from @welldot/core 0.5.0, including files written as format 2.4. See the changelog.

Next

First use