# Getting Started

This page installs NanoMD and puts a first synchronized editor and viewer on a page.

## Prerequisites

| Item | Requirement |
|---|---|
| Browser | A modern browser with ES2022 private class fields (`#field`): Chrome, Firefox, Safari, Edge |
| Node.js | Only needed to build from source |
| Network | On load the library injects Material Symbols, Mermaid, code-prettify and `NanoMD.css` from CDNs; see [Runtime Dependencies](/runtime-dependencies) |

## Installation

### CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@latest/dist/NanoMD.js"></script>
```

`NanoMD.js` inserts `NanoMD.css` into `<head>` by itself, so no extra `<link>` is required. Three classes are attached to `window`: `MDEditor`, `MDViewer` and `MDParser`.

### npm

```bash
npm i @pardnchiu/nanomd
```

### ESM

```javascript
import { MDEditor, MDViewer, MDParser } from "@pardnchiu/nanomd";
```

`dist/NanoMD.esm.js` is the same bundle with `export` statements appended; it exports the classes already placed on `window`, plus lowercase aliases `editor` (= `MDEditor`) and `viewer` (= `MDViewer`).

### Build from Source

```bash
git clone https://github.com/pardnchiu/NanoMD.git
cd NanoMD
npm install
npm run build:once
```

`build:once` produces `dist/NanoMD.debug.js`, `dist/NanoMD.js` (terser-minified) and `dist/NanoMD.esm.js`; `npm run build` watches `src/` with chokidar and rebuilds on change; `npm run sass` watches and compiles the SCSS.

## First Editor and Viewer

```html
<section id="editor"></section>
<section id="viewer"></section>

<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@latest/dist/NanoMD.js"></script>
<script>
const editor = new MDEditor({
    id: "editor",
    defaultContent: "# Hello\n\nStart editing..."
});

const viewer = new MDViewer({
    id: "viewer",
    sync: { editor: editor, scroll: true }
});
</script>
```

- When `id` matches an existing element, NanoMD uses it as the container and adds the `pd-md-editor` / `pd-md-viewer` class; when it does not, a detached `<section>` is created and you insert it yourself (`editor.body` / `viewer.body`)
- The viewer binds to the editor through `sync.editor`; every input then re-renders after `sync.delay` (300 ms by default)

## Converting a String Only

When no UI is needed, use `MDParser` directly:

```javascript
const html = new MDParser({ standard: false }).parse("# Title\n\n**bold**");
```

`standard` defaults to `true`, which skips the extended syntax (including fenced code blocks); see [Standard Mode](/standard-mode).

## Next Steps

- [Architecture](/architecture): how the three components relate
- [Editor Options](/editor-options), [Viewer Options](/viewer-options)
- [Inline Syntax](/syntax-inline): supported Markdown syntax