Tiptap subscript and superscript: edit formula indices and exponents

A lab worksheet needs CO₂ in a sentence and cm² in a measurement. Store the editable digits with their script-position marks so an author can correct either number without replacing a whole equation image. A chemical index and an exponent use different positions, even when they happen to contain the same digit.

Add the marks to the application's existing editor

For an existing Tiptap 3 application using compatible package versions, install:

npm install @tiptap/extension-subscript @tiptap/extension-superscript

Add the extensions alongside its current document, text, paragraph, and other required extensions:

import Subscript from '@tiptap/extension-subscript';
import Superscript from '@tiptap/extension-superscript';

// Add these entries to the existing editor's extensions:
const scriptMarks = [Subscript, Superscript];

This fragment supplies marks, not a complete editor schema. Retain the application's existing setup and avoid installing a second copy of an extension already configured elsewhere.

An initial HTML example is:

<p>Compare CO<sub>2</sub> readings across rooms.</p>
<p>Record the area in cm<sup>2</sup>.</p>

The digit remains ordinary text inside a semantic element. A Unicode ₂ character is a different representation from the normal digit 2 carrying a Subscript mark. Decide which representation your storage and downstream readers require rather than mixing them accidentally.

Apply one baseline position deliberately

In an existing editor, toolbar handlers can use these chains:

function applyIndex(editor) {
  return editor.chain().focus()
    .unsetSuperscript()
    .setSubscript()
    .run();
}

function applyExponent(editor) {
  return editor.chain().focus()
    .unsetSubscript()
    .setSuperscript()
    .run();
}

function restoreBaseline(editor) {
  return editor.chain().focus()
    .unsetSubscript()
    .unsetSuperscript()
    .run();
}

Select the digit before choosing the command. These handlers explicitly clear the other script mark, so their intended output is unambiguous. The normal-baseline handler leaves unrelated formatting, such as emphasis, alone.

For a toolbar that toggles the current mark, the extensions also provide toggleSubscript() and toggleSuperscript(). Define what the toolbar should do for a mixed selection and expose its active state through the application's existing controls. A button changing appearance does not by itself prove the document selection received the mark.

With an empty selection, mark commands can affect formatting for subsequent typing. After entering a formula index, restore the baseline before typing the rest of the sentence when that is the intended result.

Inspect the exported sentence

Use editor.getHTML() after editing. For the worksheet's first sentence, confirm that CO is followed by a subscripted ordinary 2, and that the words after it return to the normal baseline. For the measurement, confirm that only the exponent is inside <sup>.

The official extension references state that supported inline vertical-align input is normalized to the corresponding HTML tags. An output serializer or sanitizer must preserve those tags if the delivered worksheet is to retain its meaning. Test the saved reader page as well as the editor, especially if its stylesheet resets sub or sup styling.

This is suitable for short inline indices and exponents. A fraction, matrix, or complete mathematical expression needs a more structured representation; Tiptap mathematics covers that separate node workflow.

Finish by reading the actual formula and its surrounding words in the exported worksheet. Correct positioning should survive saving, and the digit must still be the one the author intended.