# phormat

> Source-canonical block Markdown editor for Svelte 5

Latest version **0.0.32** (published 2026-08-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install phormat
pnpm add phormat
yarn add phormat
bun add phormat
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.32 |
| Published | 2026-08-13 |
| First published | 2026-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | 24.x |
| Dependencies | 9 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | eliwimmer |
| Keywords | markdown, svelte |

## Links

- npm: https://www.npmjs.com/package/phormat
- npm.io page: https://npm.io/package/phormat

## Dependencies (9)

- [mermaid](https://npm.io/package/mermaid.md) ^11.16.1
- [dompurify](https://npm.io/package/dompurify.md) ^3.4.11
- [phoundry-ui](https://npm.io/package/phoundry-ui.md) ^0.1.42
- [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.43.0
- [@lezer/highlight](https://npm.io/package/@lezer/highlight.md) ^1.2.3
- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.6.0
- [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.10.3
- [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.12.3
- [@codemirror/language-data](https://npm.io/package/@codemirror/language-data.md) ^6.5.2

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.0.32 (latest) — 2026-08-13
- 0.0.31 — 2026-08-06
- 0.0.30 — 2026-07-22
- 0.0.29 — 2026-07-21
- 0.0.27 — 2026-07-21
- 0.0.26 — 2026-07-19
- 0.0.25 — 2026-07-15
- 0.0.24 — 2026-07-13
- 0.0.23 — 2026-07-13
- 0.0.22 — 2026-07-10
- 0.0.21 — 2026-06-30
- 0.0.20 — 2026-06-24
- 0.0.19 — 2026-06-24
- 0.0.18 — 2026-06-24
- 0.0.17 — 2026-06-22
- … 10 more at https://npm.io/package/phormat/versions

## README

# Phormat

Source-canonical block Markdown editor for Svelte 5. Markdown source is the persisted representation; a typed block tree is the in-memory editing model.

> **Monorepo note:** The npm package is `phormat`. This repository folder may still be named `md-editor`.

## Install

```bash
npm install phormat
```

**Peer dependencies** (install in your app):

- `svelte` ^5.0.0
- `phoundry-ui` >=0.0.18
- `@iconify/svelte` ^4.0.0 || ^5.0.0

In a Phoundry monorepo, use a `file:` dependency (e.g. `"phormat": "file:../md-editor"`) and run `npm run prepack` in this repo after editing package source.

## Publishing

Maintainers: see [docs/publishing.md](docs/publishing.md). Quick path: `npm run release` after `npm login` and ensuring `phoundry-ui@>=0.0.18` is on npm.

## Styles

Import phoundry-ui styles (host-owned) plus Phormat’s editor CSS / Tailwind `@source` scan:

```css
@import 'phoundry-ui/styles';
@import 'phoundry-ui/themes/default-dark/theme.css';
@import 'phormat/styles';
```

`phormat/styles` does **not** re-import phoundry-ui — that keeps the host’s selected UI package authoritative when nested copies exist.

## Overlay setup

Phormat uses phoundry-ui mono icons, context menus, and inline formatting popovers. Register the mono collection, call `setupOverlays()` once in your root layout, and render the overlay hosts:

```svelte
<script>
  import { ContextMenuOverlay, PopoverOverlay, setupOverlays } from 'phoundry-ui';
  import { registerPhoundryMono } from 'phoundry-ui/icons';

  registerPhoundryMono();
  setupOverlays();
</script>

<ContextMenuOverlay />
<PopoverOverlay />
```

Phormat opens the **inline formatting toolbar** and link-edit chrome via `popover.open({ content })` — empty `PopoverOverlay` is enough. Optional package exports `InlineFormattingToolbar` / `LinkEditPopoverHost` remain for hosts that prefer default-child mounting. See the [demo layout](src/routes/+layout.svelte).

## Quick start

```svelte
<script>
  import { PhormatEditor } from 'phormat';

  let source = $state('# Hello\n\nEdit me.');
</script>

<PhormatEditor value={source} onchange={(next) => (source = next)} />
```

For file-backed apps, the parent owns load/save and passes `value` / `onchange`; call `markSaved()` on the internal state only if you use `MarkdownEditor` directly. With `PhormatEditor`, track persistence against your own on-disk baseline and use `bind:embedder` to prepare a focused inline draft before writing or closing (see [package usage](docs/package-usage.md)).

## Package exports

| Import | Purpose |
|--------|---------|
| `phormat` | `PhormatEditor`, `InlineFormattingToolbar`, `LinkEditPopoverHost`, `MarkdownEditor` state class, model types and helpers |
| `phormat/styles` | Editor CSS + Tailwind `@source` for packaged Phormat components (host imports `phoundry-ui/styles`) |
| `phormat/demo` | Browser-only demo helpers (file load, localStorage drafts, download) — not for production file I/O |

## Documentation

- [Package usage](docs/package-usage.md) — embedder API, props, dirty baseline, demo vs production boundaries
- [Architecture overview](docs/architecture-overview.md) — internal pipeline and extension points (contributors)
- [Context glossary](docs/context/CONTEXT.md) — domain terms

## Demo app

```bash
npm install
npm run dev
```

Dev server: **`http://127.0.0.1:5181/`** (pinned with `strictPort`; see `vite.config.ts`). If you see the Phoundry marketing site instead, a stale `phoundry-website` dev server is squatting on 5181 — stop it and restart Phormat.

The SvelteKit route at `src/routes/+page.svelte` is a reference implementation using `phormat/demo` for browser file upload, draft recovery, and export.

## Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Demo dev server |
| `npm run check` | Typecheck |
| `npm run test` | Unit tests |
| `npm run prepack` | Build library (`dist/`) |
| `npm run pack:local` | Build + create `.tgz` for inspection |
| `npm run release` | Patch version, build, `npm publish` |

---
_Source: https://npm.io/package/phormat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._