# First use

> Draw a .well file into an SVG element with WellRenderer, from parsing the file to redrawing when the data changes.

This page draws a well on a plain HTML page. The same steps apply inside any framework.

## 1. An SVG element

```html
<svg id="profile"></svg>
```

The renderer sizes the element itself: its width is the panel `width` plus the left and right margins, and its height the panel `height` plus the top and bottom margins.

## 2. Parse the file

```ts
import { parseWell } from '@welldot/core';

// a file served with your page, e.g. an example well downloaded from welldot.org/examples
const response = await fetch('/wells/extremoz-rn-barreiras-raso.well');
const well = parseWell(await response.text());
```

`parseWell` validates the file and upgrades v1 files, so the renderer always receives a valid v2 `Well` ([Parsing and validating](/core/guides/parsing-and-validating)).

## 3. Create the renderer and draw

```ts
import {
  INTERACTIVE_RENDER_CONFIG,
  WellRenderer,
  applyRenderLocale,
} from '@welldot/render';

const margins = { top: 24, right: 16, bottom: 20, left: 48 };

const renderer = new WellRenderer(
  [{ selector: '#profile', width: 420, height: 640, margins }],
  {
    locale: 'en',
    renderConfig: applyRenderLocale(INTERACTIVE_RENDER_CONFIG, 'en'),
    onError: error => console.error(error),
  },
);

await renderer.prepareSvg();
renderer.draw(well);
```

- The first argument lists the panels. One panel draws the whole well; [Panels and layout](/render/guides/panels-and-layout) splits long wells over several.
- `INTERACTIVE_RENDER_CONFIG` turns on zoom, pan, tooltips and animation.
- The renderer's labels default to Portuguese. `locale: 'en'` with `applyRenderLocale(config, 'en')` switches every drawn word to English ([Locale and units](/render/guides/locale-and-units)).
- `prepareSvg()` builds the SVG structure and loads the texture patterns. Call it once, after the element exists.
- `draw(well)` renders the profile. Drawing errors are reported to `onError`, not thrown.

The result looks like this:

::well-preview{example="extremoz-rn-barreiras-raso"}
::

## 4. Redraw on change

Call `draw` again with the new data. Layers the well no longer has are removed, and changes animate:

```ts
well.well_screen.push({
  from: 20,
  to: 24,
  type: 'stainless_steel',
  diameter: 219,
  screen_slot: 0.75,
});
renderer.draw(well);
```

To keep animations stable while editing, give array items a `key` (see `RenderableWell` in the [API reference](/render/api/classes/WellRenderer)). Keys are for the renderer only; strip them before saving the file.

`renderer.clear()` empties every panel and keeps the structure, so the next `draw` needs no new `prepareSvg`.

## Next

- [Panels and layout](/render/guides/panels-and-layout)
- [Theming](/render/guides/theming)
- [Using it in a framework](/render/guides/frameworks)