# Viewer Options

This page lists the options, instance methods and properties of `new MDViewer(config)`, and how to bind an editor.

## Construction

```javascript
const viewer = new MDViewer({
    id: "viewer",
    emptyContent: "# Nothing yet",
    style: { mode: "auto", fill: true, fontFamily: "sans-serif" },
    sync: { editor: editor, delay: 300, scroll: true },
    hashtag: { path: "/tags/", target: "_blank" }
});
```

The constructor calls `init()` once before returning.

## Options

| Option | Type | Default | Description |
|---|---|---|---|
| `id` | `string` | None | Container element ID; if not found, a detached `<section>` is created; get it from `viewer.body` |
| `emptyContent` | `string` | `""` | Markdown rendered when there is no `txt` argument and the editor has no text |
| `style.mode` | `string` | `"auto"` | `"auto"` / `"light"` / `"dark"`; see [Theming](/theming) |
| `style.fill` | `boolean` | `true` | Written to `data-fill` to fill the parent |
| `style.fontFamily` | `string` | `"sans-serif"` | Inserted as a `<style>` with the global `.pd-md-viewer` selector; with several viewers on a page, the last one wins |
| `sync.editor` | `MDEditor` | `null` | The editor to bind; anything that is not an `MDEditor` instance counts as unbound |
| `sync.delay` | `number` | `300` | Render delay in milliseconds; `0` or an unparsable value falls back to `300` |
| `sync.scroll` | `boolean` | `false` | Wheel scroll sync; see [Rendering and Sync](/rendering-and-sync) |
| `hashtag.path` | `string` | `""` | Hashtag link prefix; an empty string disables conversion; see [Hashtag Links](/hashtag-links) |
| `hashtag.target` | `string` | `""` | `"_blank"` opens a new tab; any other value means `_self` |

## Methods

| Method | Description |
|---|---|
| `init(txt = "")` | Schedules a render; renders `txt` when given, otherwise the editor text or `emptyContent` |
| `clear()` | Empties the container |
| `unsave()` | Sets `data-saved` to `0` |
| `changeMode(mode = "light")` | Writes `data-mode` directly; `"dark"` is dark, any other value (including an empty string) is light |

## Properties

| Property | Type | Description |
|---|---|---|
| `body` | `HTMLElement` | The viewer container |
| `editor` | `MDEditor` | The bound editor; can be assigned after construction |
| `vbody` | `vDOM` | Virtual DOM snapshot of the container; unused by the current render path |

## Binding and Unbinding an Editor

```javascript
viewer.editor = editor;
```

Assigning `editor` also points `editor.viewer` back at this viewer and sets up wheel sync according to `sync.scroll`. Rebinding to another editor clears the previous editor's `onwheel`. Assigning `null` only clears the previous `onwheel`; the old editor reference is kept internally and its text is still read on render.

## Standalone Use

Without an editor, the viewer is simply a Markdown rendering container:

```javascript
const viewer = new MDViewer({ id: "viewer" });
viewer.init("# Title\n\nRendered **once**.");
```

Deprecated top-level options (`pre`, `delay`, `scrollSync`, `tagPath`, ...) are listed in [Deprecations](/deprecations).