Version Downloads

This extension tries to help with common text patterns with the correct typographic character. Under the hood all rules are input rules.


npm install @tiptap/extension-typography


Name Description
emDash Converts double dashes -- to an emdash .
ellipsis Converts three dots ... to an ellipsis character
openDoubleQuote Smart” opening double quotes.
closeDoubleQuote “Smart closing double quotes.
openSingleQuote Smart’ opening single quotes.
closeSingleQuote ‘Smart closing single quotes.
leftArrow Converts <‐ to an arrow .
rightArrow Converts ‐> to an arrow .
copyright Converts (c) to a copyright sign ©.
registeredTrademark Converts (r) to registered trademark sign ®.
trademark Converts (tm) to registered trademark sign .
servicemark Converts (sm) to registered trademark sign .
oneHalf Converts 1/2 to one half ½.
oneQuarter Converts 1/4 to one quarter ¼.
threeQuarters Converts 3/4 to three quarters ¾.
plusMinus Converts +/- to plus/minus sign ±.
notEqual Converts != to a not equal sign .
laquo Converts << to left-pointing double angle quotation mark «.
raquo Converts >> to right-pointing double angle quotation mark ».
multiplication Converts 2 * 3 or 2x3 to a multiplcation sign 2×3.
superscriptTwo Converts ^2 a superscript two ².
superscriptThree Converts ^3 a superscript three ³.

Keyboard shortcuts

Command Windows/Linux macOS
undoInputRule() Backspace Backspace

Source code



Disabling rules

You can configure the included rules, or even disable a few of them, like shown below.

import { Editor } from '@tiptap/core'
import Typography from '@tiptap/extension-typography'

const editor = new Editor({
  extensions: [
    // Disable some included rules
      oneHalf: false,
      oneQuarter: false,
      threeQuarters: false,