# @oakjs/addon-remirror

> 🌳 Modern, lightweight & modulable page builder

Latest version **3.16.1** (published 2026-07-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @oakjs/addon-remirror
pnpm add @oakjs/addon-remirror
yarn add @oakjs/addon-remirror
bun add @oakjs/addon-remirror
```

## 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.

## Facts

| | |
|---|---|
| Version | 3.16.1 |
| Published | 2026-07-09 |
| First published | 2023-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 20 |
| Dependencies | 0 |
| Unpacked size | 99.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ugo Stephant |
| Maintainers | ugo.poool |

## Links

- npm: https://www.npmjs.com/package/@oakjs/addon-remirror
- Repository: https://github.com/p3ol/oak
- Homepage: https://github.com/p3ol/oak#readme
- Issues: https://github.com/p3ol/oak/issues
- npm.io page: https://npm.io/package/@oakjs/addon-remirror

## Recent versions

- 3.16.1 (latest) — 2026-07-09
- 3.11.0-beta.0 (next) — 2024-10-29
- 3.0.0-alpha.33 (v3) — 2023-04-25
- 3.16.0 — 2026-06-16
- 3.15.3 — 2026-05-05
- 3.15.2 — 2026-04-16
- 3.15.1 — 2025-12-15
- 3.15.0 — 2025-12-03
- 3.14.5 — 2025-10-23
- 3.14.4 — 2025-10-22
- 3.14.3 — 2025-09-22
- 3.14.0 — 2025-09-11
- 3.13.0 — 2025-07-31
- 3.12.5 — 2025-06-17
- 3.12.4 — 2025-06-11
- … 70 more at https://npm.io/package/@oakjs/addon-remirror/versions

## README

<div align="center">

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.junipero.design/images/oak-logo-light.svg" />
  <img src="https://cdn.junipero.design/images/oak-logo.svg" height="50" />
</picture>

<br />
<br />

[![GitHub](https://img.shields.io/github/license/p3ol/oak.svg)](https://github.com/p3ol/oak)
[![npm](https://img.shields.io/npm/v/@oakjs/addon-remirror.svg)](https://www.npmjs.com/package/@oakjs/addon-remirror)
[![CI](https://github.com/p3ol/oak/actions/workflows/ci.yml/badge.svg)](https://github.com/p3ol/oak/actions/workflows/ci.yml)
[![codecov](https://codecov.io/gh/p3ol/oak/branch/master/graph/badge.svg)](https://codecov.io/gh/p3ol/oak)

### @oakjs/addon-remirror
An addon to use [Remirror](https://remirror.io/) as an oak field

</div>

# Installation

```sh
yarn add @oakjs/addon-remirror remirror @remirror/react @remirror/pm
```

# Usage

```jsx
import { Builder, baseAddon } from '@oakjs/react';
import { remirrorFieldAddon } from '@oakjs/addon-remirror';

import '@oakjs/theme/dist/oak.min.css';
import '@oakjs/addon-remirror/dist/oak-addon-remirror.min.css';

const myAddon = () => ({
  overrides: [{
    type: 'component',
    targets: ['title', 'text', 'button'],
    fields: [{
      key: 'content',
      type: 'remirror',
    }],
  }],
});

export default () => {
  const [content, setContent] = useState([]);

  return (
    <Builder
      addons={[baseAddon(), remirrorFieldAddon(), myAddon()]}
      value={content}
      onChange={setContent}
    />
  );
};
```

# Documentation

The `remirrorFieldAddon()` addon adds a new field with the `remirror` type.

You can then either directly create component settings with the `remirror` field type:

```jsx
import { BuilderField, baseAddon } from '@oakjs/react';
import { remirrorFieldAddon } from '@oakjs/addon-remirror';

const myAddon = () => ({
  settings: [{
    id: 'my-setting',
    type: 'remirror',
    key: 'property.subProperty',
  }],
});

export default () => (
  <BuilderField
    addons={[baseAddon(), remirrorFieldAddon(), myAddon()]}
    value={content}
    onChange={setContent}
  />
);
```

Or override existing component settings:

```jsx
import { Builder, baseAddon } from '@oakjs/react';
import { remirrorFieldAddon } from '@oakjs/addon-remirror';

const myAddon = () => ({
  overrides: [{
    type: 'component',
    targets: ['title', 'text', 'button'],
    fields: [{
      key: 'content',
      type: 'remirror',
    }],
  }],
});

export default () => (
  <Builder
    addons={[baseAddon(), remirrorFieldAddon(), myAddon()]}
    value={content}
    onChange={setContent}
  />
);
```

# Contributing

[![](https://contrib.rocks/image?repo=p3ol/oak)](https://github.com/p3ol/oak/graphs/contributors)

Please check the [CONTRIBUTING.md](https://github.com/p3ol/oak/blob/master/CONTRIBUTING.md) doc for contribution guidelines.


# License

This software is licensed under [MIT](https://github.com/p3ol/oak/blob/master/LICENSE).

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