# @remirror/dom

> Use remirror directly in the dom.

Latest version **3.0.2** (published 2025-08-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @remirror/dom
pnpm add @remirror/dom
yarn add @remirror/dom
bun add @remirror/dom
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2025-08-02 |
| First published | 2020-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 73.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3035 |
| Maintainers | ifiokjr, ocavue |
| Keywords | remirror, extension |

## Links

- npm: https://www.npmjs.com/package/@remirror/dom
- Repository: https://github.com/remirror/remirror
- Homepage: https://github.com/remirror/remirror/tree/HEAD/packages/remirror__dom
- Issues: https://github.com/remirror/remirror/issues
- npm.io page: https://npm.io/package/@remirror/dom

## Dependencies (3)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.27.0
- [@remirror/core](https://npm.io/package/@remirror/core.md) 3.0.2
- [@remirror/preset-core](https://npm.io/package/@remirror/preset-core.md) 3.0.2

## Recent versions

- 3.0.2 (latest) — 2025-08-02
- 3.0.0-beta.8 (beta) — 2024-07-22
- 0.0.0-pr2271.2 (pr2271) — 2024-07-18
- 0.0.0-pr2222.1 (pr2222) — 2023-12-12
- 0.0.0-pr2223.1 (pr2223) — 2023-12-12
- 0.0.0-pr2169.2 (pr2169) — 2023-11-06
- 0.0.0-pr2166.4 (pr2166) — 2023-10-06
- 0.0.0-pr2128.4 (pr2128) — 2023-07-26
- 0.0.0-pr2118.1 (pr2118) — 2023-07-13
- 0.0.0-pr2100.1 (pr2100) — 2023-06-28
- 0.0.0-pr1966.1 (pr1966) — 2022-12-26
- 0.0.0-pr1948.1 (pr1948) — 2022-11-25
- 0.0.0-pr1942.1 (pr1942) — 2022-11-21
- 0.0.0-pr1938.1 (pr1938) — 2022-11-15
- 0.0.0-pr1922.2 (pr1922) — 2022-10-26
- … 274 more at https://npm.io/package/@remirror/dom/versions

## README

# @remirror/dom

> Use remirror directly in the dom.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/dom
[npm]: https://npmjs.com/package/@remirror/dom
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/dom
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/dom
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/dom/red?icon=npm

## Why

You've heard great things about prosemirror and would like to use it in your app, but you're slightly intimidated by some of the moving parts. You don't really want to deal with Schema, Nodes, Marks, Plugins, Decorations. You just want an editor.

This library provides an abstraction that might be right for you.

The functionality of the prosemirror library is wrapped up into extensions which manage the work for you.

## Installation

```bash
# yarn
yarn add @remirror/dom

# pnpm
pnpm add @remirror/dom

# npm
npm install @remirror/dom
```

## Usage

The following code is a guide to get you started.

```ts
import { createDomEditor, createDomManager } from 'remirror/dom';
import { BoldExtension } from 'remirror/extensions';

const element = document.querySelector('#editor');
const manager = createDomManager([new BoldExtension()]);
const editor = createDomEditor({ manager, element });

editor.addHandler('change', () => log('your editor has changed'));

// Make selected text bold.
editor.commands.toggleBold();
```

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