# Markdown Editor An in-page markdown editor with a live preview. As the user types in a `

`, the preview re-renders on every keystroke through the template's
reactive binding. The parser is `marked`, installed via
`elements install marked`; the recipe is the wiring around it, not the parser
itself.

## Install

```bash
elements install marked
```

`elements install` adds the dependency to `package.json` and the project server
rebuilds against it on the next save.

## Page setup

```bash
elements create page markdown
```

The page is a single-template editor: textarea on the left, rendered preview on
the right. No rpc, no database. `marked.parse` runs in the browser on each
keystroke.

`app/pages/markdown/index.ts`:

```ts
import markdown from "./template";

export default function route(req, res) {
  return new markdown();
}
```

The route does nothing but render. All the interactivity is in the template.

`app/pages/markdown/template.html`:

```html
import "./style.css";
import { raw } from "@elements/app";
import { marked } from "marked";

const INITIAL = `# hello, markdown

write *some* **bold** text. add a [link](https://elements.dev) or two.

- bullet one
- bullet two
- bullet three

\`\`\`
let x = 42;
console.log(x);
\`\`\`
`;

<html class="markdown"
      (private text: { value: string } = { value: INITIAL })>
  <h1>markdown editor</h1>

<div class="split">
    <textarea class="source" value={text.value} rows="20"/>
    <div class="preview">{raw(marked.parse(text.value) as string)}</div>
  </div>
</html>
```

`text.value` is the textarea's bound value. Each keystroke updates `text.value`,
the binding re-runs, `marked.parse(...)` renders the new markdown, and
`{raw(...)}` writes the resulting HTML into the preview pane. `marked.parse` is
sync by default and returns `string`; the cast pins the return type for
TypeScript.

`{raw(html)}` is the elements helper for rendering an HTML string without
escaping. The trust boundary is `marked`: by default it escapes HTML in the
input, so its output is safe to pass to `raw()`. If you configure `marked` to
allow raw HTML pass-through in the source, sanitize the output with `DOMPurify`
(or equivalent) before `raw()`.

`app/pages/markdown/style.css`:

```css
@import "#app/shared/styles/page.css";

.markdown .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

.markdown .source {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-4);
}

.markdown .preview {
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow-y: auto;
}

.markdown .preview h1,
.markdown .preview h2,
.markdown .preview h3 {
  margin-top: var(--space-6);
}

.markdown .preview h1:first-child,
.markdown .preview h2:first-child {
  margin-top: 0;
}

.markdown .preview pre {
  background: var(--bg-soft);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.markdown .preview code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
```

The preview is a side-by-side panel matching the textarea height. Styles pick up
the design-system tokens (`--bg`, `--bg-soft`, `--rule`, `--space-*`) so the
preview matches the rest of the app's look.

## Routes

```ts
import markdown from "#app/pages/markdown";

// ...
app.route("/markdown", markdown);
```

## Notes

- **Browser-side rendering.** `marked.parse` runs on every keystroke. For
  typical document sizes (under ~50 KB) it finishes inside a frame; the preview
  keeps up with typing. For very large documents, debounce the binding by piping
  `text.value` through a `setTimeout`-driven `preview.value` and reading
  `preview.value` in the `raw(...)` call.
- **Server-side rendering.** For static content where the user doesn't edit (a
  blog post, a docs page), render in the route handler and pass the HTML string
  to the template:
  `let html = marked.parse(body) as string; return new page({ html });`. The
  first paint shows the rendered output and the parser never runs on the
  browser. See `elements man recipes markdown-blog` for that shape.
- **Sanitization.** Default `marked` escapes HTML in the input, so a user typing
  `<script>` into the textarea ends up as literal text in the preview, not as
  executed JavaScript. If you turn that off (rare, but `marked` supports raw
  HTML), run the output through `DOMPurify` before `raw(...)`.
- **Saving the document.** The recipe is a pure editor; the markdown is held in
  template state and lost on navigation. Persist by adding a `save` `@rpc` that
  writes `text.value` to a database row, and call it from a "save" button or on
  blur.
- **Extending the parser.** `marked` supports custom renderers, code
  highlighting integration, and extensions for non-standard syntax (callouts,
  math, mermaid). All configured through `marked.use(...)` once on app startup;
  the recipe's binding stays the same.