diff --git a/docs/src/demos/Extensions/Typography/index.spec.js b/docs/src/demos/Extensions/Typography/index.spec.js
new file mode 100644
index 00000000..a5431526
--- /dev/null
+++ b/docs/src/demos/Extensions/Typography/index.spec.js
@@ -0,0 +1,53 @@
+context('/api/extensions/typography', () => {
+  before(() => {
+    cy.visit('/api/extensions/typography')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+  })
+
+  it('should make an em dash from two dashes', () => {
+    cy.get('.ProseMirror')
+      .type('-- emDash')
+      .find('p')
+      .should('contain', '— emDash')
+  })
+
+  it('should make an ellipsis from three dots', () => {
+    cy.get('.ProseMirror')
+      .type('... ellipsis')
+      .find('p')
+      .should('contain', '… ellipsis')
+  })
+
+  it('should make an correct open double quote', () => {
+    cy.get('.ProseMirror')
+      .type('"openDoubleQuote"')
+      .find('p')
+      .should('contain', '“openDoubleQuote')
+  })
+
+  it('should make an correct close double quote', () => {
+    cy.get('.ProseMirror')
+      .type('"closeDoubleQuote"')
+      .find('p')
+      .should('contain', 'closeDoubleQuote”')
+  })
+
+  it('should make an correct open single quote', () => {
+    cy.get('.ProseMirror')
+      .type("'openSingleQuote'")
+      .find('p')
+      .should('contain', '‘openSingleQuote’')
+  })
+
+  it('should make an correct close single quote', () => {
+    cy.get('.ProseMirror')
+      .type("'closeSingleQuote'")
+      .find('p')
+      .should('contain', 'closeSingleQuote’')
+  })
+})
diff --git a/docs/src/demos/Extensions/Typography/index.vue b/docs/src/demos/Extensions/Typography/index.vue
new file mode 100644
index 00000000..f4b01a5e
--- /dev/null
+++ b/docs/src/demos/Extensions/Typography/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Typography from '@tiptap/extension-typography'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        Typography(),
+      ],
+      content: `
+        <p>“I have been suffering from Typomania all my life, a sickness that is incurable but not lethal.”</p>
+        <p>— Erik Spiekermann, December 2008</p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
diff --git a/docs/src/docPages/api/extensions/typography.md b/docs/src/docPages/api/extensions/typography.md
index 2cd372ea..857da46c 100644
--- a/docs/src/docPages/api/extensions/typography.md
+++ b/docs/src/docPages/api/extensions/typography.md
@@ -1,5 +1,5 @@
 # Typography
-
+This extension tries to help with common text patterns with the correct typographic character.
 
 ## Installation
 ```bash
@@ -10,8 +10,18 @@ npm install @tiptap/typography
 yarn add @tiptap/typography
 ```
 
+## Rules
+| 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.                       |
+
 ## Source code
 [packages/typography/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/typography/)
 
 ## Usage
-<demo name="Extensions/Typography" highlight="" />
+<demo name="Extensions/Typography" highlight="12,31" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index f4fe86da..fe1323d3 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -136,7 +136,6 @@
           draft: true
         - title: Typography
           link: /api/extensions/typography
-          draft: true
     - title: Commands
       link: /api/commands
     - title: Events