diff --git a/src/json-crdt-extensions/peritext/block/Inline.ts b/src/json-crdt-extensions/peritext/block/Inline.ts
index 70bdc0dec7..5b9b8c96d9 100644
--- a/src/json-crdt-extensions/peritext/block/Inline.ts
+++ b/src/json-crdt-extensions/peritext/block/Inline.ts
@@ -160,12 +160,12 @@ export class Inline extends Range implements Printable {
             stack.push(this.createAttr(slice));
             break;
           }
-          case SliceBehavior.Stack: {
+          case SliceBehavior.Many: {
             const stack: InlineAttrStack = attr[type] ?? (attr[type] = []);
             stack.push(this.createAttr(slice));
             break;
           }
-          case SliceBehavior.Overwrite: {
+          case SliceBehavior.One: {
             attr[type] = [this.createAttr(slice)];
             break;
           }
diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index 3d699c4513..9ed5be3368 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -6,12 +6,32 @@ import {isLetter, isPunctuation, isWhitespace} from './util';
 import {Anchor} from '../rga/constants';
 import {MarkerOverlayPoint} from '../overlay/MarkerOverlayPoint';
 import {UndefEndIter, type UndefIterator} from '../../../util/iterator';
+import {PersistedSlice} from '../slice/PersistedSlice';
+import type {SliceType} from '../slice';
 import type {ChunkSlice} from '../util/ChunkSlice';
 import type {Peritext} from '../Peritext';
 import type {Point} from '../rga/Point';
 import type {Range} from '../rga/Range';
 import type {CharIterator, CharPredicate, Position, TextRangeUnit} from './types';
 
+/**
+ * For inline boolean ("Overwrite") slices, both range endpoints should be
+ * attached to {@link Anchor.Before} as per the Peritext paper. This way, say
+ * bold text, automatically extends to include the next character typed as
+ * user types.
+ *
+ * @param range The range to be adjusted.
+ */
+const makeRangeExtendable = <T>(range: Range<T>): void => {
+  if (range.end.anchor !== Anchor.Before || range.start.anchor !== Anchor.Before) {
+    const start = range.start.clone();
+    const end = range.end.clone();
+    start.refBefore();
+    end.refBefore();
+    range.set(start, end);
+  }
+};
+
 export class Editor<T = string> {
   public readonly saved: EditorSlices<T>;
   public readonly extra: EditorSlices<T>;
@@ -461,6 +481,82 @@ export class Editor<T = string> {
     if (unit) this.select(unit);
   }
 
+  // --------------------------------------------------------------- formatting
+
+  protected getSliceStore(slice: PersistedSlice<T>): EditorSlices<T> | undefined {
+    const sid = slice.id.sid;
+    if (sid === this.saved.slices.set.doc.clock.sid) return this.saved;
+    if (sid === this.extra.slices.set.doc.clock.sid) return this.extra;
+    if (sid === this.local.slices.set.doc.clock.sid) return this.local;
+    return;
+  }
+
+  public toggleExclusiveFormatting(type: SliceType, data?: unknown, store: EditorSlices<T> = this.saved): void {
+    // TODO: handle mutually exclusive slices (<sub>, <sub>)
+    const overlay = this.txt.overlay;
+    overlay.refresh(); // TODO: Refresh for `overlay.stat()` calls. Is it actually needed?
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+      const [complete] = overlay.stat(cursor, 1e6);
+      const needToRemoveFormatting = complete.has(type);
+      makeRangeExtendable(cursor);
+      const contained = overlay.findContained(cursor);
+      for (const slice of contained) {
+        if (slice instanceof PersistedSlice && slice.type === type) {
+          const deletionStore = this.getSliceStore(slice);
+          if (deletionStore) deletionStore.del(slice.id);
+        }
+      }
+      if (needToRemoveFormatting) {
+        overlay.refresh();
+        const [complete2, partial2] = overlay.stat(cursor, 1e6);
+        const needsErase = complete2.has(type) || partial2.has(type);
+        if (needsErase) store.insErase(type);
+      } else {
+        if (cursor.start.isAbs() || cursor.end.isAbs()) continue;
+        store.insOverwrite(type, data);
+      }
+    }
+  }
+
+  public eraseFormatting(store: EditorSlices<T> = this.saved): void {
+    const overlay = this.txt.overlay;
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+      overlay.refresh();
+      const contained = overlay.findContained(cursor);
+      for (const slice of contained) {
+        if (slice instanceof PersistedSlice) {
+          switch (slice.behavior) {
+            case SliceBehavior.One:
+            case SliceBehavior.Many:
+            case SliceBehavior.Erase: {
+              const deletionStore = this.getSliceStore(slice);
+              if (deletionStore) deletionStore.del(slice.id);
+            }
+          }
+        }
+      }
+      overlay.refresh();
+      const overlapping = overlay.findOverlapping(cursor);
+      for (const slice of overlapping) {
+        switch (slice.behavior) {
+          case SliceBehavior.One:
+          case SliceBehavior.Many: {
+            store.insErase(slice.type);
+          }
+        }
+      }
+    }
+  }
+
+  public clearFormatting(store: EditorSlices<T> = this.saved): void {
+    const overlay = this.txt.overlay;
+    overlay.refresh();
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+      const overlapping = overlay.findOverlapping(cursor);
+      for (const slice of overlapping) store.del(slice.id);
+    }
+  }
+
   // ------------------------------------------------------------------ various
 
   public point(at: Position<T>): Point<T> {
diff --git a/src/json-crdt-extensions/peritext/overlay/Overlay.ts b/src/json-crdt-extensions/peritext/overlay/Overlay.ts
index 7464d062b0..aa988f058d 100644
--- a/src/json-crdt-extensions/peritext/overlay/Overlay.ts
+++ b/src/json-crdt-extensions/peritext/overlay/Overlay.ts
@@ -355,7 +355,7 @@ export class Overlay<T = string> implements Printable, Stateful {
         if (typeof type === 'object') continue LAYERS;
         const behavior = slice.behavior;
         BEHAVIOR: switch (behavior) {
-          case SliceBehavior.Overwrite:
+          case SliceBehavior.One:
             current.add(type);
             break BEHAVIOR;
           case SliceBehavior.Erase:
diff --git a/src/json-crdt-extensions/peritext/rga/Point.ts b/src/json-crdt-extensions/peritext/rga/Point.ts
index 77120630c4..7d3154fdd7 100644
--- a/src/json-crdt-extensions/peritext/rga/Point.ts
+++ b/src/json-crdt-extensions/peritext/rga/Point.ts
@@ -1,7 +1,7 @@
 import {compare, type ITimestampStruct, printTs, equal, tick, containsId} from '../../../json-crdt-patch/clock';
 import {Anchor} from './constants';
 import {ChunkSlice} from '../util/ChunkSlice';
-import {updateId} from '../../../json-crdt/hash';
+import {hashId, updateId} from '../../../json-crdt/hash';
 import {Position} from '../constants';
 import type {AbstractRga, Chunk} from '../../../json-crdt/nodes/rga';
 import type {Stateful} from '../types';
@@ -481,6 +481,10 @@ export class Point<T = string> implements Pick<Stateful, 'refresh'>, Printable {
     return this.step(length / 2);
   }
 
+  public key(): number {
+    return hashId(this.id) + (this.anchor ? 0 : 1);
+  }
+
   // ----------------------------------------------------------------- Stateful
 
   public refresh(): number {
diff --git a/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts b/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
index 0548e24705..b8d12c4b51 100644
--- a/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
+++ b/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
@@ -4,7 +4,14 @@ import {Range} from '../rga/Range';
 import {updateNode} from '../../../json-crdt/hash';
 import {printTree} from 'tree-dump/lib/printTree';
 import type {Anchor} from '../rga/constants';
-import {SliceHeaderMask, SliceHeaderShift, SliceBehavior, SliceTupleIndex, SliceBehaviorName} from './constants';
+import {
+  SliceHeaderMask,
+  SliceHeaderShift,
+  SliceBehavior,
+  SliceTupleIndex,
+  SliceBehaviorName,
+  CommonSliceType,
+} from './constants';
 import {CONST} from '../../../json-hash';
 import {Timestamp} from '../../../json-crdt-patch/clock';
 import type {VecNode} from '../../../json-crdt/nodes';
@@ -165,7 +172,10 @@ export class PersistedSlice<T = string> extends Range<T> implements MutableSlice
   // ---------------------------------------------------------------- Printable
 
   public toStringName(): string {
-    return 'Range';
+    if (typeof this.type === 'number' && Math.abs(this.type) <= 64 && CommonSliceType[this.type]) {
+      return `slice [${SliceBehaviorName[this.behavior]}] <${CommonSliceType[this.type]}>`;
+    }
+    return `slice [${SliceBehaviorName[this.behavior]}] ${JSON.stringify(this.type)}`;
   }
 
   protected toStringHeaderName(): string {
diff --git a/src/json-crdt-extensions/peritext/slice/Slices.ts b/src/json-crdt-extensions/peritext/slice/Slices.ts
index 9a94169987..901fffd3c9 100644
--- a/src/json-crdt-extensions/peritext/slice/Slices.ts
+++ b/src/json-crdt-extensions/peritext/slice/Slices.ts
@@ -107,11 +107,11 @@ export class Slices<T = string> implements Stateful, Printable {
   }
 
   public insStack(range: Range<T>, type: SliceType, data?: unknown | ITimestampStruct): PersistedSlice<T> {
-    return this.ins(range, SliceBehavior.Stack, type, data);
+    return this.ins(range, SliceBehavior.Many, type, data);
   }
 
   public insOverwrite(range: Range<T>, type: SliceType, data?: unknown | ITimestampStruct): PersistedSlice<T> {
-    return this.ins(range, SliceBehavior.Overwrite, type, data);
+    return this.ins(range, SliceBehavior.One, type, data);
   }
 
   public insErase(range: Range<T>, type: SliceType, data?: unknown | ITimestampStruct): PersistedSlice<T> {
@@ -139,6 +139,7 @@ export class Slices<T = string> implements Stateful, Printable {
     this.list.del(id);
     const set = this.set;
     const api = set.doc.api;
+    if (!set.findById(id)) return;
     // TODO: Is it worth checking if the slice is already deleted?
     api.builder.del(set.id, [tss(id.sid, id.time, 1)]);
     api.apply();
diff --git a/src/json-crdt-extensions/peritext/slice/__tests__/Slices.spec.ts b/src/json-crdt-extensions/peritext/slice/__tests__/Slices.spec.ts
index 96cd84e769..50ee4c4df8 100644
--- a/src/json-crdt-extensions/peritext/slice/__tests__/Slices.spec.ts
+++ b/src/json-crdt-extensions/peritext/slice/__tests__/Slices.spec.ts
@@ -17,11 +17,11 @@ describe('.ins()', () => {
   test('can insert a slice', () => {
     const {peritext, slices} = setup();
     const range = peritext.rangeAt(12, 7);
-    const slice = slices.ins(range, SliceBehavior.Stack, 'b', {bold: true});
+    const slice = slices.ins(range, SliceBehavior.Many, 'b', {bold: true});
     expect(peritext.savedSlices.size()).toBe(1);
     expect(slice.start).toStrictEqual(range.start);
     expect(slice.end).toStrictEqual(range.end);
-    expect(slice.behavior).toBe(SliceBehavior.Stack);
+    expect(slice.behavior).toBe(SliceBehavior.Many);
     expect(slice.type).toBe('b');
     expect(slice.data()).toStrictEqual({bold: true});
   });
@@ -80,7 +80,7 @@ describe('.ins()', () => {
     const ranges = [r1, r2, r3, r4];
     const types = ['b', ['li', 'ul'], 0, 123, [1, 2, 3]];
     const datas = [{bold: true}, {list: 'ul'}, 0, 123, [1, 2, 3], null, undefined];
-    const behaviors = [SliceBehavior.Stack, SliceBehavior.Erase, SliceBehavior.Overwrite, SliceBehavior.Marker];
+    const behaviors = [SliceBehavior.Many, SliceBehavior.Erase, SliceBehavior.One, SliceBehavior.Marker];
     for (const range of ranges) {
       for (const type of types) {
         for (const data of datas) {
@@ -176,8 +176,8 @@ describe('.refresh()', () => {
   };
 
   testSliceUpdate('slice behavior change', ({slice}) => {
-    slice.update({behavior: SliceBehavior.Stack});
-    expect(slice.behavior).toBe(SliceBehavior.Stack);
+    slice.update({behavior: SliceBehavior.Many});
+    expect(slice.behavior).toBe(SliceBehavior.Many);
   });
 
   testSliceUpdate('slice type change', ({slice}) => {
diff --git a/src/json-crdt-extensions/peritext/slice/constants.ts b/src/json-crdt-extensions/peritext/slice/constants.ts
index 4fd36bf551..a3adf9852c 100644
--- a/src/json-crdt-extensions/peritext/slice/constants.ts
+++ b/src/json-crdt-extensions/peritext/slice/constants.ts
@@ -13,7 +13,7 @@ export enum CursorAnchor {
  * Built-in slice types.
  */
 export enum CommonSliceType {
-  // Block slices
+  // ---------------------------------------------------- block slices (0 to 64)
   p = 0, // <p>
   blockquote = 1, // <blockquote>
   codeblock = 2, // <pre><code>
@@ -36,7 +36,7 @@ export enum CommonSliceType {
   aside = 19, // <aside>
   embed = 20, // <embed>, <iframe>, <object>, <video>, <audio>, etc.
 
-  // Inline slices
+  // ------------------------------------------------ inline slices (-64 to -1)
   Cursor = -1,
   RemoteCursor = -2,
   b = -3, // <b>
@@ -77,27 +77,43 @@ export enum SliceHeaderShift {
 
 export enum SliceBehavior {
   /**
-   * A Split slice, which is used to mark a block split position in the document.
-   * For example, paragraph, heading, blockquote, etc.
+   * The `Marker` slices are used to mark a block split position in the
+   * document. For example, paragraph, heading, blockquote, etc. It separates
+   * adjacent blocks and is used to determine the block type of the contents
+   * following the marker, until the next marker is encountered.
    */
   Marker = 0b000,
 
   /**
-   * Appends attributes to a stack of attributes for a specific slice type. This
-   * is useful when the same slice type can have multiple attributes, like
-   * inline comments, highlights, etc.
+   * The `Many` slices are inline formatting annotations, which allow one
+   * or more annotations of the same type to apply to the same text. Slices with
+   * behavior `Many` are appended to the stack of attributes for a specific
+   * slice type. With the most recent annotation on top.
+   *
+   * Slices with behavior `Many` are used for inline formatting, like for links,
+   * comments, etc. Where multiple annotations of the same type can be applied
+   * to the same text.
    */
-  Stack = 0b001,
+  Many = 0b001,
 
   /**
-   * Overwrites the stack of attributes for a specific slice type. Could be used
-   * for simple inline formatting, like bold, italic, etc.
+   * The slices with behavior `One` are used for inline formatting annotations,
+   * they overwrite the stack of attributes for a specific slice type. This type
+   * of slice is used when only one annotation of a specific type can be applied
+   * to the same text. For example, those could be used for simple inline
+   * formatting, like bold, italic, etc.
    */
-  Overwrite = 0b010,
+  One = 0b010,
 
   /**
-   * Removes all attributes for a specific slice type. For example, could be
-   * used to reverse inline formatting, like bold, italic, etc.
+   * The `Erase` slices are used to soft remove all annotations
+   * (`Many` or `One`) of the same type which are applied to the same text
+   * range. The erase slices soft remove only the annotations which were applied
+   * before the erase slice, as determined by the logical clock (there could
+   * be many layers of annotations applied and erased).
+   *
+   * Usually slices with behavior `Erase` are used to reverse inline exclusive
+   * (`One`) inline formatting, like bold, italic, etc.
    */
   Erase = 0b011,
 
@@ -111,8 +127,8 @@ export enum SliceBehavior {
 
 export enum SliceBehaviorName {
   Marker = SliceBehavior.Marker,
-  Stack = SliceBehavior.Stack,
-  Overwrite = SliceBehavior.Overwrite,
+  Many = SliceBehavior.Many,
+  One = SliceBehavior.One,
   Erase = SliceBehavior.Erase,
   Cursor = SliceBehavior.Cursor,
 }
diff --git a/src/json-crdt-extensions/quill-delta/QuillDeltaApi.ts b/src/json-crdt-extensions/quill-delta/QuillDeltaApi.ts
index 07a142f14a..2f54e8524c 100644
--- a/src/json-crdt-extensions/quill-delta/QuillDeltaApi.ts
+++ b/src/json-crdt-extensions/quill-delta/QuillDeltaApi.ts
@@ -29,7 +29,7 @@ const updateAttributes = (txt: Peritext, attributes: QuillDeltaAttributes | unde
     if (value === null) {
       savedSlices.ins(range, SliceBehavior.Erase, key);
     } else {
-      savedSlices.ins(range, SliceBehavior.Overwrite, key, konst(value));
+      savedSlices.ins(range, SliceBehavior.One, key, konst(value));
     }
   }
 };
diff --git a/src/json-crdt-extensions/quill-delta/util.ts b/src/json-crdt-extensions/quill-delta/util.ts
index b9f45d5a43..e1723739a4 100644
--- a/src/json-crdt-extensions/quill-delta/util.ts
+++ b/src/json-crdt-extensions/quill-delta/util.ts
@@ -14,7 +14,7 @@ export const getAttributes = (overlayPoint: OverlayPoint): QuillDeltaAttributes
     const slice = layers[i];
     if (!(slice instanceof PersistedSlice)) continue;
     switch (slice.behavior) {
-      case SliceBehavior.Overwrite: {
+      case SliceBehavior.One: {
         const tag = slice.type as PathStep;
         if (tag) attributes[tag] = slice.data();
         break;
diff --git a/src/json-crdt-peritext-ui/__demos__/components/App.tsx b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
index fd93dd004e..0edea7d3db 100644
--- a/src/json-crdt-peritext-ui/__demos__/components/App.tsx
+++ b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import {Provider, GlobalCss} from 'nano-theme';
 import {ModelWithExt, ext} from '../../../json-crdt-extensions';
 import {PeritextView} from '../../react';
-import {renderers} from '../../renderers/default';
-import {renderers as debugRenderers} from '../../renderers/debug';
+import {renderers} from '../../plugins/minimal';
+import {renderers as debugRenderers} from '../../plugins/debug';
 
 export const App: React.FC = () => {
   const [[model, peritext]] = React.useState(() => {
@@ -17,7 +17,7 @@ export const App: React.FC = () => {
     <Provider theme={'light'}>
       <GlobalCss />
       <div style={{maxWidth: '640px', fontSize: '21px', margin: '32px auto'}}>
-        <PeritextView peritext={peritext} renderers={[debugRenderers({enabled: false}), renderers]} />
+        <PeritextView peritext={peritext} renderers={[debugRenderers({enabled: true}), renderers]} />
       </div>
     </Provider>
   );
diff --git a/src/json-crdt-peritext-ui/dom/InputController.ts b/src/json-crdt-peritext-ui/dom/InputController.ts
index 1947d5aa4b..2ce3177fa1 100644
--- a/src/json-crdt-peritext-ui/dom/InputController.ts
+++ b/src/json-crdt-peritext-ui/dom/InputController.ts
@@ -1,7 +1,7 @@
 import {unit} from './util';
 import type {Peritext} from '../../json-crdt-extensions/peritext';
 import type {PeritextEventTarget} from '../events/PeritextEventTarget';
-import type {TypedEventTarget} from '../events/TypedEventTarget';
+import type {TypedEventTarget} from '../../util/events/TypedEventTarget';
 import type {CompositionController} from './CompositionController';
 import type {UiLifeCycles} from './types';
 
diff --git a/src/json-crdt-peritext-ui/dom/RichTextController.ts b/src/json-crdt-peritext-ui/dom/RichTextController.ts
index 514ac29fb1..b805ebd6f8 100644
--- a/src/json-crdt-peritext-ui/dom/RichTextController.ts
+++ b/src/json-crdt-peritext-ui/dom/RichTextController.ts
@@ -31,15 +31,15 @@ export class RichTextController implements UiLifeCycles {
       switch (key) {
         case 'b':
           event.preventDefault();
-          et.inline(CommonSliceType.b);
+          et.format(CommonSliceType.b);
           return;
         case 'i':
           event.preventDefault();
-          et.inline(CommonSliceType.i);
+          et.format(CommonSliceType.i);
           return;
         case 'u':
           event.preventDefault();
-          et.inline(CommonSliceType.u);
+          et.format(CommonSliceType.u);
           return;
       }
     }
@@ -47,7 +47,7 @@ export class RichTextController implements UiLifeCycles {
       switch (key) {
         case 'x':
           event.preventDefault();
-          et.inline(CommonSliceType.s);
+          et.format(CommonSliceType.s);
           return;
       }
     }
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
index 01ff7d6b95..0c89ccb02d 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
@@ -1,7 +1,6 @@
+import {CursorAnchor} from '../../json-crdt-extensions/peritext/slice/constants';
 import type {Peritext} from '../../json-crdt-extensions/peritext';
 import type {EditorSlices} from '../../json-crdt-extensions/peritext/editor/EditorSlices';
-import {Anchor} from '../../json-crdt-extensions/peritext/rga/constants';
-import {CursorAnchor} from '../../json-crdt-extensions/peritext/slice/constants';
 import type {PeritextEventHandlerMap, PeritextEventTarget} from './PeritextEventTarget';
 import type * as events from './types';
 
@@ -99,31 +98,30 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
     }
   };
 
-  public readonly inline = (event: CustomEvent<events.InlineDetail>) => {
-    const {type, store = 'saved', behavior = 'overwrite', data} = event.detail;
+  public readonly format = (event: CustomEvent<events.FormatDetail>) => {
+    const {type, store = 'saved', behavior = 'one', data} = event.detail;
     const editor = this.txt.editor;
     const slices: EditorSlices = store === 'saved' ? editor.saved : store === 'extra' ? editor.extra : editor.local;
     switch (behavior) {
-      case 'stack':
+      case 'many': {
+        if (type === undefined) throw new Error('TYPE_REQUIRED');
         slices.insStack(type, data);
         break;
-      case 'erase':
-        slices.insErase(type, data);
+      }
+      case 'one': {
+        if (type === undefined) throw new Error('TYPE_REQUIRED');
+        editor.toggleExclusiveFormatting(type, data, slices);
         break;
-      default:
-        for (let i = editor.cursors0(), cursor = i(); cursor; cursor = i()) {
-          // For inline boolean slices, ref endpoint "before" the next character
-          // as per the Peritext paper, so that, say, bold text automatically
-          // includes the next character typed.
-          if (cursor.end.anchor !== Anchor.Before || cursor.start.anchor !== Anchor.Before) {
-            const start = cursor.start.clone();
-            const end = cursor.end.clone();
-            start.refBefore();
-            end.refBefore();
-            cursor.set(start, end);
-          }
-        }
-        slices.insOverwrite(type, data);
+      }
+      case 'erase': {
+        if (type === undefined) editor.eraseFormatting(slices);
+        else slices.insErase(type, data);
+        break;
+      }
+      case 'clear': {
+        editor.clearFormatting(slices);
+        break;
+      }
     }
   };
 
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts b/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
index 0df4a0628e..4b172502c6 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
@@ -1,5 +1,5 @@
-import {TypedEventTarget} from './TypedEventTarget';
-import type {PeritextEventMap, CursorDetail, InlineDetail, DeleteDetail} from './types';
+import {TypedEventTarget} from '../../util/events/TypedEventTarget';
+import type {PeritextEventMap, CursorDetail, FormatDetail, DeleteDetail} from './types';
 
 export type PeritextEventHandlerMap = {
   [K in keyof PeritextEventMap]: (event: CustomEvent<PeritextEventMap[K]>) => void;
@@ -51,15 +51,15 @@ export class PeritextEventTarget extends TypedEventTarget<PeritextEventMap> {
     this.cursor({len, unit, edge});
   }
 
-  public inline(type: InlineDetail['type'], behavior?: InlineDetail['behavior'], data?: InlineDetail['data']): void;
-  public inline(detail: InlineDetail): void;
-  public inline(
-    a: InlineDetail | InlineDetail['type'],
-    behavior?: InlineDetail['behavior'],
-    data?: InlineDetail['data'],
+  public format(type: FormatDetail['type'], behavior?: FormatDetail['behavior'], data?: FormatDetail['data']): void;
+  public format(detail: FormatDetail): void;
+  public format(
+    a: FormatDetail | FormatDetail['type'],
+    behavior?: FormatDetail['behavior'],
+    data?: FormatDetail['data'],
   ): void {
-    const detail: InlineDetail =
-      typeof a === 'object' && !Array.isArray(a) ? (a as InlineDetail) : ({type: a, behavior, data} as InlineDetail);
-    this.dispatch('inline', detail);
+    const detail: FormatDetail =
+      typeof a === 'object' && !Array.isArray(a) ? (a as FormatDetail) : ({type: a, behavior, data} as FormatDetail);
+    this.dispatch('format', detail);
   }
 }
diff --git a/src/json-crdt-peritext-ui/events/__tests__/inline.spec.ts b/src/json-crdt-peritext-ui/events/__tests__/inline.spec.ts
index 7cba41189b..b569f4b076 100644
--- a/src/json-crdt-peritext-ui/events/__tests__/inline.spec.ts
+++ b/src/json-crdt-peritext-ui/events/__tests__/inline.spec.ts
@@ -14,7 +14,7 @@ const testSuite = (getKit: () => Kit) => {
   test('can add annotation to the current selection', async () => {
     const kit = setup();
     kit.et.cursor({at: 3, len: 3});
-    kit.et.inline({type: 'bold'});
+    kit.et.format({type: 'bold'});
     kit.peritext.refresh();
     const slices = kit.peritext.overlay.findOverlapping(kit.peritext.rangeAt(5));
     console.log([...slices]);
diff --git a/src/json-crdt-peritext-ui/events/types.ts b/src/json-crdt-peritext-ui/events/types.ts
index 34a44a29ff..2f8904cb84 100644
--- a/src/json-crdt-peritext-ui/events/types.ts
+++ b/src/json-crdt-peritext-ui/events/types.ts
@@ -6,7 +6,7 @@ import type {SliceType} from '../../json-crdt-extensions/peritext/slice/types';
  * Dispatched every time any other event is dispatched.
  */
 export interface ChangeDetail {
-  ev?: CustomEvent<InsertDetail | DeleteDetail | CursorDetail | InlineDetail | MarkerDetail>;
+  ev?: CustomEvent<InsertDetail | DeleteDetail | CursorDetail | FormatDetail | MarkerDetail>;
 }
 
 /**
@@ -174,12 +174,64 @@ export interface CursorDetail {
 /**
  * Event dispatched to insert an inline rich-text annotation into the document.
  */
-export interface InlineDetail {
-  type: SliceType;
+export interface FormatDetail {
+  /**
+   * Type of the annotation. The type is used to determine the visual style of
+   * the annotation, for example, the type `'bold'` may render the text in bold.
+   *
+   * For common formatting use the {@link CommonSliceType} enum. It contains
+   * a unique numeric value for each common formatting types. Numeric values
+   * are best for performance and memory usage. Values in the rage -64 to 64 are
+   * reserved for common formatting types.
+   *
+   * For custom formatting, you can use a string value, for example,
+   * `'highlight'`. Or use an integer with absolute value greater than 64.
+   *
+   * Inline formatting types are restricted to a single string or integer value.
+   * Nester formatting, say `['p', 'blockquote', 'h1']` is reserved for block
+   * formatting, in which case a nested structure like
+   * `<p><blockquote><h1>text</h1></blockquote></p>` is created.
+   */
+  type?: number | string;
+
+  /**
+   * Arbitrary data associated with the formatting. Usually, stored with
+   * annotations of "stack" behavior, for example, an "<a>" tag annotation may
+   * store the href attribute in this field.
+   *
+   * @default undefined
+   */
   data?: unknown;
-  behavior?: 'stack' | 'overwrite' | 'erase';
+
+  /**
+   * Specifies the behavior of the annotation. If `'many'`, the annotation of
+   * this type will be stacked on top of each other, and all of them will be
+   * applied to the text, with the last annotation on top. If `'one'`,
+   * the annotation is not stacked, only one such annotation can be applied per
+   * character. The `'erase'` behavior is used to remove the `'many`' or
+   * `'one'` annotation from the the given range.
+   *
+   * The special `'clear'` behavior is used to remove all annotations
+   * that intersect with any part of any of the cursors in the document. Usage:
+   *
+   * ```js
+   * {type: 'clear'}
+   * ```
+   *
+   * @default 'one'
+   */
+  behavior?: 'one' | 'many' | 'erase' | 'clear';
+
+  /**
+   * The slice set where the annotation will be stored. `'saved'` is the main
+   * document, which is persisted and replicated across all clients. `'extra'`
+   * is an ephemeral document, which is not persisted but can be replicated
+   * across clients. `'local'` is a local document, which is accessible only to
+   * the local client, for example, for storing cursor or selection information.
+   *
+   * @default 'saved'
+   */
   store?: 'saved' | 'extra' | 'local';
-  pos?: [start: Position, end: Position][];
 }
 
 // biome-ignore lint: empty interface is expected
@@ -205,6 +257,7 @@ export type PeritextEventMap = {
   insert: InsertDetail;
   delete: DeleteDetail;
   cursor: CursorDetail;
-  inline: InlineDetail;
+  format: FormatDetail;
+  // remove: FormatDetail;
   marker: MarkerDetail;
 };
diff --git a/src/json-crdt-peritext-ui/renderers/debug/RenderBlock.tsx b/src/json-crdt-peritext-ui/plugins/debug/RenderBlock.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/debug/RenderBlock.tsx
rename to src/json-crdt-peritext-ui/plugins/debug/RenderBlock.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/debug/RenderInline.tsx b/src/json-crdt-peritext-ui/plugins/debug/RenderInline.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/debug/RenderInline.tsx
rename to src/json-crdt-peritext-ui/plugins/debug/RenderInline.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/debug/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/debug/RenderPeritext.tsx
rename to src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/debug/context.ts b/src/json-crdt-peritext-ui/plugins/debug/context.ts
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/debug/context.ts
rename to src/json-crdt-peritext-ui/plugins/debug/context.ts
diff --git a/src/json-crdt-peritext-ui/renderers/debug/index.tsx b/src/json-crdt-peritext-ui/plugins/debug/index.tsx
similarity index 86%
rename from src/json-crdt-peritext-ui/renderers/debug/index.tsx
rename to src/json-crdt-peritext-ui/plugins/debug/index.tsx
index 7fc232b485..69308820ee 100644
--- a/src/json-crdt-peritext-ui/renderers/debug/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/debug/index.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import {RenderInline} from './RenderInline';
 import {RenderBlock} from './RenderBlock';
 import {RenderPeritext, type RenderPeritextProps} from './RenderPeritext';
-import type {RendererMap} from '../../react/types';
+import type {PeritextPlugin} from '../../react/types';
 
-export const renderers = (options?: Pick<RenderPeritextProps, 'enabled'>): RendererMap => ({
+export const renderers = (options?: Pick<RenderPeritextProps, 'enabled'>): PeritextPlugin => ({
   inline: (props, children) => <RenderInline {...props}>{children}</RenderInline>,
   block: (props, children) => <RenderBlock {...props}>{children}</RenderBlock>,
   peritext: (props, children, ctx) => (
diff --git a/src/json-crdt-peritext-ui/renderers/default/Button/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/Button/index.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/Button/index.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/Button/index.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/Chrome/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/Chrome/index.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/Chrome/index.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/Chrome/index.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderAnchor.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
similarity index 83%
rename from src/json-crdt-peritext-ui/renderers/default/RenderAnchor.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
index de18e5e2d1..34ad670399 100644
--- a/src/json-crdt-peritext-ui/renderers/default/RenderAnchor.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
@@ -1,12 +1,21 @@
 // biome-ignore lint: React is used for JSX
 import * as React from 'react';
-import {rule} from 'nano-theme';
+import {rule, keyframes} from 'nano-theme';
 import {Char} from '../../constants';
 import {DefaultRendererColors} from './constants';
 import {usePeritext} from '../../react';
 import {useSyncStore} from '../../react/hooks';
 import type {AnchorViewProps} from '../../react/selection/AnchorView';
 
+export const fadeInAnimation = keyframes({
+  from: {
+    tr: 'scale(0)',
+  },
+  to: {
+    tr: 'scale(1)',
+  },
+});
+
 const blockClass = rule({
   pos: 'relative',
   d: 'inline-block',
@@ -26,6 +35,8 @@ const innerClass = rule({
   h: 'calc(min(16px,0.5em))',
   bdrad: '50%/30%',
   bg: DefaultRendererColors.ActiveCursor,
+  an: fadeInAnimation + ' .25s ease-out',
+  animationFillMode: 'forwards',
 });
 
 export interface RenderAnchorProps extends AnchorViewProps {}
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
similarity index 84%
rename from src/json-crdt-peritext-ui/renderers/default/RenderCaret.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
index 8fb101d4ad..d055e7faa4 100644
--- a/src/json-crdt-peritext-ui/renderers/default/RenderCaret.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import useHarmonicIntervalFn from 'react-use/lib/useHarmonicIntervalFn';
-import {rule} from 'nano-theme';
+import {keyframes, rule} from 'nano-theme';
 import {usePeritext} from '../../react/context';
 import {useSyncStore} from '../../react/hooks';
 import type {CaretViewProps} from '../../react/selection/CaretView';
@@ -8,6 +8,15 @@ import {DefaultRendererColors} from './constants';
 
 const ms = 350;
 
+export const moveAnimation = keyframes({
+  from: {
+    tr: 'scale(1.2)',
+  },
+  to: {
+    tr: 'scale(1)',
+  },
+});
+
 const blockClass = rule({
   pos: 'relative',
   d: 'inline-block',
@@ -28,6 +37,8 @@ const innerClass = rule({
   bg: DefaultRendererColors.ActiveCursor,
   bdrad: '0.0625em',
   'mix-blend-mode': 'multiply',
+  an: moveAnimation + ' .25s ease-out',
+  animationFillMode: 'forwards',
 });
 
 export interface RenderCaretProps extends CaretViewProps {
@@ -49,7 +60,7 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, children}) => {
   };
 
   if (italic) {
-    style.transform = 'rotate(11deg)';
+    style.rotate = '11deg';
   }
 
   return (
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderFocus.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
similarity index 97%
rename from src/json-crdt-peritext-ui/renderers/default/RenderFocus.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
index 77fdfa88b5..2ca403d744 100644
--- a/src/json-crdt-peritext-ui/renderers/default/RenderFocus.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
@@ -51,7 +51,7 @@ export const RenderFocus: React.FC<RenderFocusProps> = ({left, italic, children}
   const style: React.CSSProperties = focus ? {} : {background: DefaultRendererColors.InactiveCursor, animation: 'none'};
 
   if (italic) {
-    style.transform = 'rotate(11deg)';
+    style.rotate = '11deg';
   }
 
   return (
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderInline.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/RenderInline.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderPeritext.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/RenderPeritext.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/RenderPeritext.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
similarity index 77%
rename from src/json-crdt-peritext-ui/renderers/default/TopToolbar/index.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
index 845e06bc43..976233d99c 100644
--- a/src/json-crdt-peritext-ui/renderers/default/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
@@ -29,11 +29,13 @@ export const TopToolbar: React.FC<TopToolbarProps> = () => {
   const [complete] = ctx.peritext.overlay.stat(ctx.peritext.editor.cursor);
 
   const button = (type: string | number, name: React.ReactNode) => (
-    <Button
-      onClick={() => ctx.dom.et.inline({type})}
-      onMouseDown={(e) => e.preventDefault()}
-      active={complete.has(type)}
-    >
+    <Button onClick={() => ctx.dom.et.format(type)} onMouseDown={(e) => e.preventDefault()} active={complete.has(type)}>
+      {name}
+    </Button>
+  );
+
+  const button2 = (name: React.ReactNode, onClick: React.MouseEventHandler) => (
+    <Button onClick={onClick} onMouseDown={(e) => e.preventDefault()}>
       {name}
     </Button>
   );
@@ -53,6 +55,12 @@ export const TopToolbar: React.FC<TopToolbarProps> = () => {
       {button(CommonSliceType.math, 'Math')}
       {button(CommonSliceType.hidden, 'Spoiler')}
       {button(CommonSliceType.bookmark, 'Bookmark')}
+      {button2('Erase', () => {
+        ctx.dom.et.format({behavior: 'erase'});
+      })}
+      {button2('Clear', () => {
+        ctx.dom.et.format({behavior: 'clear'});
+      })}
     </div>
   );
 };
diff --git a/src/json-crdt-peritext-ui/renderers/default/constants.ts b/src/json-crdt-peritext-ui/plugins/minimal/constants.ts
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/constants.ts
rename to src/json-crdt-peritext-ui/plugins/minimal/constants.ts
diff --git a/src/json-crdt-peritext-ui/renderers/default/context.ts b/src/json-crdt-peritext-ui/plugins/minimal/context.ts
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/context.ts
rename to src/json-crdt-peritext-ui/plugins/minimal/context.ts
diff --git a/src/json-crdt-peritext-ui/renderers/default/index.ts b/src/json-crdt-peritext-ui/plugins/minimal/index.ts
similarity index 93%
rename from src/json-crdt-peritext-ui/renderers/default/index.ts
rename to src/json-crdt-peritext-ui/plugins/minimal/index.ts
index 35edd63bea..b3299dfddc 100644
--- a/src/json-crdt-peritext-ui/renderers/default/index.ts
+++ b/src/json-crdt-peritext-ui/plugins/minimal/index.ts
@@ -5,11 +5,11 @@ import {RenderAnchor} from './RenderAnchor';
 import {RenderInline} from './RenderInline';
 import {RenderPeritext} from './RenderPeritext';
 import {CommonSliceType} from '../../../json-crdt-extensions';
-import type {RendererMap} from '../../react/types';
+import type {PeritextPlugin} from '../../react/types';
 
 const h = React.createElement;
 
-export const renderers: RendererMap = {
+export const renderers: PeritextPlugin = {
   text: (props, inline) => {
     const style = (props.style || (props.style = {})) as React.CSSProperties;
     const attr = inline.attr();
diff --git a/src/json-crdt-peritext-ui/react/BlockView.tsx b/src/json-crdt-peritext-ui/react/BlockView.tsx
index 8fa9e99bec..00f741b45b 100644
--- a/src/json-crdt-peritext-ui/react/BlockView.tsx
+++ b/src/json-crdt-peritext-ui/react/BlockView.tsx
@@ -1,9 +1,14 @@
 import * as React from 'react';
 import {LeafBlock} from '../../json-crdt-extensions/peritext/block/LeafBlock';
-import type {Block} from '../../json-crdt-extensions/peritext/block/Block';
 import {InlineView} from './InlineView';
 import {Char} from '../constants';
 import {usePeritext} from './context';
+import {CommonSliceType} from '../../json-crdt-extensions';
+import {CaretView} from './selection/CaretView';
+import {FocusView} from './selection/FocusView';
+import {InlineAttrEnd, InlineAttrPassing, InlineAttrStart} from '../../json-crdt-extensions/peritext/block/Inline';
+import {AnchorView} from './selection/AnchorView';
+import type {Block} from '../../json-crdt-extensions/peritext/block/Block';
 
 export interface BlockViewProps {
   hash: number;
@@ -18,7 +23,48 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
 
     const elements: React.ReactNode[] = [];
     if (block instanceof LeafBlock) {
-      for (const inline of block.texts()) elements.push(<InlineView key={inline.key()} inline={inline} />);
+      for (const inline of block.texts()) {
+        const hasCursor = inline.hasCursor();
+        if (hasCursor) {
+          const attr = inline.attr();
+          const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
+          const cursorStart = inline.cursorStart();
+          if (cursorStart) {
+            const k = cursorStart.start.key() + '-a';
+            let element: React.ReactNode;
+            if (cursorStart.isStartFocused()) {
+              if (cursorStart.isCollapsed()) element = <CaretView key={k} italic={!!italic} />;
+              else
+                element = (
+                  <FocusView key={k} italic={italic instanceof InlineAttrEnd || italic instanceof InlineAttrPassing} />
+                );
+            } else element = <AnchorView key={k} />;
+            elements.push(element);
+          }
+        }
+        elements.push(<InlineView key={inline.key()} inline={inline} />);
+        if (hasCursor) {
+          const cursorEnd = inline.cursorEnd();
+          const attr = inline.attr();
+          const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
+          if (cursorEnd) {
+            const k = cursorEnd.end.key() + '-b';
+            let element: React.ReactNode;
+            if (cursorEnd.isEndFocused()) {
+              if (cursorEnd.isCollapsed()) element = <CaretView key={k} italic={!!italic} />;
+              else
+                element = (
+                  <FocusView
+                    key={k}
+                    left
+                    italic={italic instanceof InlineAttrStart || italic instanceof InlineAttrPassing}
+                  />
+                );
+            } else element = <AnchorView key={k} />;
+            elements.push(element);
+          }
+        }
+      }
     } else {
       const children = block.children;
       const length = children.length;
diff --git a/src/json-crdt-peritext-ui/react/InlineView.tsx b/src/json-crdt-peritext-ui/react/InlineView.tsx
index 66685a67a6..6dad76767a 100644
--- a/src/json-crdt-peritext-ui/react/InlineView.tsx
+++ b/src/json-crdt-peritext-ui/react/InlineView.tsx
@@ -2,15 +2,9 @@ import * as React from 'react';
 import {put} from 'nano-theme';
 import {CssClass, ElementAttr} from '../constants';
 import {usePeritext} from './context';
-import {CaretView} from './selection/CaretView';
-import {FocusView} from './selection/FocusView';
-import {AnchorView} from './selection/AnchorView';
-import {InlineAttrEnd, InlineAttrStart, type Inline} from '../../json-crdt-extensions/peritext/block/Inline';
-import {CommonSliceType} from '../../json-crdt-extensions';
+import type {Inline} from '../../json-crdt-extensions/peritext/block/Inline';
 import type {SpanProps} from './types';
 
-const {createElement: h, Fragment} = React;
-
 put('.' + CssClass.Inline, {
   /**
    * Font *kerning* is the variable distance between every pair of characters.
@@ -70,45 +64,5 @@ export const InlineView: React.FC<InlineViewProps> = (props) => {
   for (const map of renderers) attr = map.text?.(attr, inline, ctx) ?? attr;
   let children: React.ReactNode = <span {...attr}>{text}</span>;
   for (const map of renderers) children = map.inline?.(props, children) ?? children;
-
-  if (inline.hasCursor()) {
-    const elements: React.ReactNode[] = [];
-    const attr = inline.attr();
-    const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
-    const key = inline.key();
-    const cursorStart = inline.cursorStart();
-    if (cursorStart) {
-      const k = key + 'a';
-      elements.push(
-        cursorStart.isStartFocused() ? (
-          cursorStart.isCollapsed() ? (
-            <CaretView key={k} italic={!!italic} />
-          ) : (
-            <FocusView key={k} italic={italic instanceof InlineAttrEnd} />
-          )
-        ) : (
-          <AnchorView key={k} />
-        ),
-      );
-    }
-    elements.push(h(Fragment, {key}, children));
-    const cursorEnd = inline.cursorEnd();
-    if (cursorEnd) {
-      const k = key + 'b';
-      elements.push(
-        cursorEnd.isEndFocused() ? (
-          cursorEnd.isCollapsed() ? (
-            <CaretView key={k} italic={!!italic} />
-          ) : (
-            <FocusView key={k} left italic={italic instanceof InlineAttrStart} />
-          )
-        ) : (
-          <AnchorView key={k} />
-        ),
-      );
-    }
-    children = h(Fragment, null, elements);
-  }
-
   return children;
 };
diff --git a/src/json-crdt-peritext-ui/react/PeritextView.tsx b/src/json-crdt-peritext-ui/react/PeritextView.tsx
index 6e90880493..bf71d407f0 100644
--- a/src/json-crdt-peritext-ui/react/PeritextView.tsx
+++ b/src/json-crdt-peritext-ui/react/PeritextView.tsx
@@ -4,9 +4,9 @@ import {context, type PeritextSurfaceContextValue} from './context';
 import {CssClass} from '../constants';
 import {BlockView} from './BlockView';
 import {DomController} from '../dom/DomController';
-import {renderers as defaultRenderers} from '../renderers/default';
+import {renderers as defaultRenderers} from '../plugins/minimal';
 import type {Peritext} from '../../json-crdt-extensions/peritext/Peritext';
-import type {RendererMap} from './types';
+import type {PeritextPlugin} from './types';
 
 put('.' + CssClass.Editor, {
   out: 0,
@@ -29,7 +29,7 @@ put('.' + CssClass.Editor, {
  */
 export interface PeritextViewProps {
   peritext: Peritext;
-  renderers?: RendererMap[];
+  renderers?: PeritextPlugin[];
   onRender?: () => void;
 }
 
diff --git a/src/json-crdt-peritext-ui/react/context.ts b/src/json-crdt-peritext-ui/react/context.ts
index dfff404c26..e3569c47e8 100644
--- a/src/json-crdt-peritext-ui/react/context.ts
+++ b/src/json-crdt-peritext-ui/react/context.ts
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import type {RendererMap} from './types';
+import type {PeritextPlugin} from './types';
 import type {Peritext} from '../../json-crdt-extensions/peritext/Peritext';
 import type {DomController} from '../dom/DomController';
 
 export interface PeritextSurfaceContextValue {
   peritext: Peritext;
-  renderers: RendererMap[];
+  renderers: PeritextPlugin[];
   dom: DomController;
   rerender: () => void;
 }
diff --git a/src/json-crdt-peritext-ui/react/types.ts b/src/json-crdt-peritext-ui/react/types.ts
index c0fc283bb5..b0ef43c1b2 100644
--- a/src/json-crdt-peritext-ui/react/types.ts
+++ b/src/json-crdt-peritext-ui/react/types.ts
@@ -8,7 +8,7 @@ import type {PeritextViewProps} from './PeritextView';
 import type {PeritextSurfaceContextValue} from './context';
 import type {Inline} from '../../json-crdt-extensions/peritext/block/Inline';
 
-export interface RendererMap {
+export interface PeritextPlugin {
   focus?: (props: FocusViewProps, children: React.ReactNode) => React.ReactNode;
   caret?: (props: CaretViewProps, children: React.ReactNode) => React.ReactNode;
   anchor?: (props: AnchorViewProps, children: React.ReactNode) => React.ReactNode;
diff --git a/src/json-crdt-peritext-ui/events/TypedEventTarget.ts b/src/util/events/TypedEventTarget.ts
similarity index 100%
rename from src/json-crdt-peritext-ui/events/TypedEventTarget.ts
rename to src/util/events/TypedEventTarget.ts