# Installation

> Install @welldot/render, its runtime requirements, and how to keep it out of server-side rendering.

::code-group

```bash [pnpm]
pnpm add @welldot/core @welldot/render
```

```bash [npm]
npm install @welldot/core @welldot/render
```

```bash [yarn]
yarn add @welldot/core @welldot/render
```

::

`@welldot/render` draws `Well` objects from [`@welldot/core`](/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:

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

[Using it in a framework](/render/guides/frameworks) 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](/render/changelog).

## Next

[First use](/render/getting-started/first-use)