diff --git a/examples/03-ui-components/13-equation/.bnexample.json b/examples/03-ui-components/13-equation/.bnexample.json
new file mode 100644
index 0000000000..1e4b6d5d3e
--- /dev/null
+++ b/examples/03-ui-components/13-equation/.bnexample.json
@@ -0,0 +1,11 @@
+{
+  "playground": true,
+  "docs": false,
+  "author": "matthewlipski",
+  "tags": ["Equation", "Inline Equation", "Custom Schemas", "Latex", "Slash Menu"],
+  "dependencies": {
+    "katex": "^0.16.11",
+    "@types/katex": "^0.16.7",
+    "react-icons": "^5.2.1"
+  }
+}
diff --git a/examples/03-ui-components/13-equation/App.tsx b/examples/03-ui-components/13-equation/App.tsx
new file mode 100644
index 0000000000..42c3fcc292
--- /dev/null
+++ b/examples/03-ui-components/13-equation/App.tsx
@@ -0,0 +1,91 @@
+import {
+  BlockNoteSchema,
+  defaultInlineContentSpecs,
+  filterSuggestionItems,
+} from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
+import {
+  SuggestionMenuController,
+  getDefaultReactSlashMenuItems,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import { RiFormula } from "react-icons/ri";
+import "@blocknote/mantine/style.css";
+
+import { InlineEquation } from "./Equation";
+
+// Our schema with block specs, which contain the configs and implementations for blocks
+// that we want our editor to use.
+const schema = BlockNoteSchema.create({
+  inlineContentSpecs: {
+    ...defaultInlineContentSpecs,
+    inlineEquation: InlineEquation,
+  },
+});
+
+// Slash menu item to insert an Alert block
+const insertLaTex = (editor: typeof schema.BlockNoteEditor) => ({
+  icon: <RiFormula size={18}/>,
+  title: "Inline Equation",
+  key: "inlineEquation",
+  subtext: "Insert mathematical symbols in text.",
+  aliases: ["equation", "latex", "katex"],
+  group: "Other",
+  onItemClick: () => {
+    const view = editor._tiptapEditor.view;
+    const pos = editor._tiptapEditor.state.selection.from;
+    const tr = view.state.tr.insert(
+        pos,
+        view.state.schema.nodes.inlineEquation.create(),
+    );
+    view.dispatch(tr);
+  },
+});
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    schema,
+    initialContent: [
+      {
+        type: "paragraph",
+        content: [
+          "This is an example inline equation ",
+          {
+            type: "inlineEquation",
+            content: "c = \\pm\\sqrt{a^2 + b^2}",
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: "Press the '/' key to open the Slash Menu and add another",
+      },
+      {
+        type: "paragraph",
+      },
+      {
+        type: "paragraph",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  // Renders the editor instance.
+  return (
+    <BlockNoteView editor={editor} slashMenu={false}>
+      <SuggestionMenuController
+        triggerCharacter={"/"}
+        getItems={async (query: any) =>
+          filterSuggestionItems(
+            [...getDefaultReactSlashMenuItems(editor), insertLaTex(editor)],
+            query
+          )
+        }
+      />
+    </BlockNoteView>
+  );
+}
diff --git a/examples/03-ui-components/13-equation/Equation.tsx b/examples/03-ui-components/13-equation/Equation.tsx
new file mode 100644
index 0000000000..7eace7beb3
--- /dev/null
+++ b/examples/03-ui-components/13-equation/Equation.tsx
@@ -0,0 +1,326 @@
+import { useComponentsContext,useEditorContentOrSelectionChange } from "@blocknote/react";
+import { NodeView } from "prosemirror-view";
+import { BlockNoteEditor } from "@blocknote/core";
+import {
+  NodeViewProps,
+  NodeViewRenderer,
+  NodeViewWrapper,
+  ReactNodeViewRenderer,
+} from "@tiptap/react";
+import {
+  createStronglyTypedTiptapNode,
+  createInternalInlineContentSpec,
+} from "@blocknote/core";
+import { mergeAttributes } from "@tiptap/core";
+import {ChangeEvent, useEffect, useState, useRef, useCallback, forwardRef, MouseEvent as ReactMouseEvent} from "react";
+import katex from "katex";
+import { AiOutlineEnter } from "react-icons/ai";
+import "katex/dist/katex.min.css";
+import "./styles.css";
+
+
+const TextareaView = forwardRef((props: any, ref: any) => {
+  const { autofocus, ...rest } = props;
+  useEffect(() => {
+    if (autofocus && ref.current) {
+      ref.current.setSelectionRange(0, ref.current.value.length);
+      ref.current.focus()
+    }
+  }, [autofocus, ref]);
+
+  return (
+      <textarea
+          ref={ref}
+          className={"equation-textarea"}
+          value={props.value}
+          onChange={props.onChange}
+          {...rest}
+      />
+  )
+});
+
+function InlineEquationView() {
+  const nodeView:
+      | ((this: {
+    name: string;
+    options: any;
+    storage: any;
+    editor: any;
+    type: any;
+    parent: any;
+      }) => NodeViewRenderer)
+    | null = function () {
+    const BlockContent = (props: NodeViewProps & { selectionHack: any }) => {
+      /* eslint-disable react-hooks/rules-of-hooks */
+      const editor: BlockNoteEditor<any> = this.options.editor;
+      const content = props.node.textContent;
+      const nodeSize = props.node.nodeSize;
+      const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+      const contentRef = useRef<HTMLElement | null>(null);
+      const containerRef = useRef<HTMLElement | null>(null);
+      const [html, setHtml] = useState("");
+      const [focus, setFocus] = useState(!content);
+      const [curEdge, setCurEdge] = useState(!content);
+      const Components = useComponentsContext()!;
+
+      const getTextareaEdge = () => {
+        const $textarea = textareaRef.current;
+        if (!$textarea) {
+          return {};
+        }
+
+        return {
+          isLeftEdge: $textarea.selectionStart === 0 && $textarea.selectionEnd === 0,
+          isRightEdge: $textarea.selectionStart === $textarea.value.length && $textarea.selectionEnd === $textarea.value.length,
+        }
+      }
+
+      useEffect(() => {
+        const html = katex.renderToString(content, {
+          throwOnError: false,
+        });
+        setHtml(html);
+      }, [content]);
+
+      useEditorContentOrSelectionChange(() => {
+        const pos = props.getPos?.();
+        const courPos = editor._tiptapEditor.state.selection.from;
+        const selection = editor.getSelection();
+
+        setCurEdge(!selection && (courPos === pos + nodeSize || courPos === pos));
+      })
+
+
+      useEffect(() => {
+        if (focus) {
+          contentRef.current?.click();
+        }
+      }, [focus]);
+
+      const handleEnter = useCallback((event: ReactMouseEvent | KeyboardEvent) => {
+        const pos = props.getPos?.();
+        event.preventDefault();
+        if (!content) {
+          const node = props.node;
+          const view = editor._tiptapEditor.view;
+
+          const tr = view.state.tr.delete(
+              pos,
+              pos + node.nodeSize
+          );
+
+          view.dispatch(tr);
+          editor._tiptapEditor.commands.setTextSelection(pos);
+        } else {
+          editor._tiptapEditor.commands.setTextSelection(pos + nodeSize);
+        }
+        editor.focus();
+        setFocus(false);
+        setCurEdge(true);
+      }, [content, editor, nodeSize, props]);
+
+      const handleMenuNavigationKeys = useCallback((event: KeyboardEvent) => {
+        const textareaEdge = getTextareaEdge();
+        const pos = props.getPos?.();
+        const courPos = editor._tiptapEditor.state.selection.from;
+
+        if (event.key === "ArrowLeft") {
+          if (courPos === pos + nodeSize && !focus) {
+            setFocus(true);
+          }
+          if (textareaEdge.isLeftEdge) {
+            event.preventDefault();
+            editor.focus();
+            editor._tiptapEditor.commands.setTextSelection(pos);
+            setFocus(false);
+          }
+          return true;
+        }
+
+        if (event.key === "ArrowRight") {
+          if (courPos === pos && !focus) {
+            setFocus(true);
+          }
+          if (textareaEdge.isRightEdge) {
+            event.preventDefault();
+            editor.focus();
+            editor._tiptapEditor.commands.setTextSelection(pos + nodeSize);
+            setFocus(false)
+          }
+          return true;
+        }
+
+        if (event.key === "Enter" && focus) {
+          handleEnter(event);
+          return true;
+        }
+
+        return false;
+      }, [editor, focus, handleEnter, nodeSize, props]);
+
+      useEffect(() => {
+        if (focus || curEdge) {
+          editor.domElement.addEventListener(
+              "keydown",
+              handleMenuNavigationKeys,
+              true
+          );
+        }
+
+        return () => {
+          editor.domElement.removeEventListener(
+              "keydown",
+              handleMenuNavigationKeys,
+              true
+          );
+        };
+      }, [editor.domElement, focus, handleMenuNavigationKeys, curEdge]);
+
+      const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+        const val = e.target.value;
+        const pos = props.getPos?.();
+        const node = props.node;
+        const view = editor._tiptapEditor.view;
+
+        const tr = view.state.tr.replaceWith(
+          pos,
+          pos + node.nodeSize,
+          view.state.schema.nodes.inlineEquation.create(
+            {
+              ...node.attrs,
+            },
+            val ? view.state.schema.text(val) : null
+          )
+        );
+
+        view.dispatch(tr);
+        setFocus(true);
+      };
+
+      useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+          if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+            setFocus(false);
+          }
+        };
+
+        document.addEventListener('pointerup', handleClickOutside, true);
+        return () => {
+          document.removeEventListener('pointerup', handleClickOutside, true);
+        };
+      }, []);
+
+      return (
+        <NodeViewWrapper as={"span"} ref={containerRef}>
+          <Components.Generic.Popover.Root opened={focus}>
+            <Components.Generic.Popover.Trigger>
+              <span className={"equation " + (focus ? 'focus' : '')} ref={contentRef}>
+                {!content ? (
+                  <span onClick={() => setFocus(true)} className={"equation-empty"}>
+                    New Equation
+                  </span>
+                ) : (
+                  <span
+                    onClick={() => setFocus(true)} className={"equation-content"}
+                    dangerouslySetInnerHTML={{ __html: html }}></span>
+                )}
+              </span>
+            </Components.Generic.Popover.Trigger>
+            <Components.Generic.Popover.Content
+                className={"bn-popover-content bn-form-popover"}
+                variant={"form-popover"}>
+              <label className={"equation-label"}>
+                <TextareaView
+                    placeholder={"c^2 = a^2 + b^2"}
+                    ref={textareaRef}
+                    autofocus
+                    value={content}
+                    onChange={handleChange}
+                />
+                <span onClick={handleEnter} className={"equation-enter"}><AiOutlineEnter /></span>
+              </label>
+            </Components.Generic.Popover.Content>
+          </Components.Generic.Popover.Root>
+        </NodeViewWrapper>
+      );
+    };
+
+    return (props) => {
+      if (!(props.editor as any).contentComponent) {
+        return {};
+      }
+      const ret = ReactNodeViewRenderer(BlockContent, {
+        stopEvent: () => true,
+      })(props) as NodeView;
+      ret.setSelection = (anchor, head) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (ret as any).renderer.updateProps({
+          selectionHack: { anchor, head },
+        });
+      };
+
+      (ret as any).contentDOMElement = undefined;
+
+      const oldUpdated = ret.update!.bind(ret);
+      ret.update = (node, outerDeco, innerDeco) => {
+        const retAsAny = ret as any;
+        let decorations = retAsAny.decorations;
+        if (
+          retAsAny.decorations.decorations !== outerDeco ||
+          retAsAny.decorations.innerDecorations !== innerDeco
+        ) {
+          decorations = {
+            decorations: outerDeco,
+            innerDecorations: innerDeco,
+          };
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return oldUpdated(node, decorations, undefined as any);
+      };
+      return ret;
+    };
+  };
+  return nodeView;
+}
+
+const node = createStronglyTypedTiptapNode({
+  name: "inlineEquation",
+  inline: true,
+  group: "inline",
+  content: "inline*",
+  editable: true,
+  selectable: false,
+  parseHTML() {
+    return [
+      {
+        tag: "inlineEquation",
+        priority: 200,
+        node: "inlineEquation",
+      },
+    ];
+  },
+
+  // @ts-ignore
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "inlineEquation",
+      mergeAttributes(HTMLAttributes, {
+        "data-content-type": this.name,
+      }),
+      0,
+    ];
+  },
+
+  addNodeView: InlineEquationView(),
+});
+
+export const InlineEquation = createInternalInlineContentSpec(
+  {
+    content: "styled",
+    type: "inlineEquation",
+    propSchema: {},
+  },
+  {
+    node,
+  }
+);
diff --git a/examples/03-ui-components/13-equation/README.md b/examples/03-ui-components/13-equation/README.md
new file mode 100644
index 0000000000..2e140b5666
--- /dev/null
+++ b/examples/03-ui-components/13-equation/README.md
@@ -0,0 +1,11 @@
+# Inline Equation
+
+In this example, we create a custom `Inline Equation`
+
+**Try it out:** Press the "/" key to open the Slash Menu and insert an `Equation` block!
+
+**Relevant Docs:**
+
+- [Custom Blocks](/docs/custom-schemas/custom-blocks)
+- [Changing Slash Menu Items](/docs/ui-components/suggestion-menus#changing-slash-menu-items)
+- [Editor Setup](/docs/editor-basics/setup)
\ No newline at end of file
diff --git a/examples/03-ui-components/13-equation/index.html b/examples/03-ui-components/13-equation/index.html
new file mode 100644
index 0000000000..772555bb29
--- /dev/null
+++ b/examples/03-ui-components/13-equation/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Inline Equation</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/03-ui-components/13-equation/main.tsx b/examples/03-ui-components/13-equation/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/03-ui-components/13-equation/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/03-ui-components/13-equation/package.json b/examples/03-ui-components/13-equation/package.json
new file mode 100644
index 0000000000..f1428967c0
--- /dev/null
+++ b/examples/03-ui-components/13-equation/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@blocknote/example-equation",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "katex": "^0.16.11",
+    "@types/katex": "^0.16.7",
+    "react-icons": "^5.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/03-ui-components/13-equation/styles.css b/examples/03-ui-components/13-equation/styles.css
new file mode 100644
index 0000000000..b1793b3e9c
--- /dev/null
+++ b/examples/03-ui-components/13-equation/styles.css
@@ -0,0 +1,62 @@
+.equation-content {
+    caret-color: rgb(55, 53, 47);
+    padding: 2px 2px;
+    border-radius: 4px;
+    transform: translate3d(-4px, 0, 0);
+    margin-right: -4px;
+    white-space: pre;
+}
+
+
+.equation.focus .equation-content {
+    background: rgba(37, 135, 231, 0.12);
+}
+
+.equation .equation-empty {
+    white-space: nowrap;
+    font-size: 12px;
+    background: rgb(207, 207, 207);
+    caret-color: rgb(55, 53, 47);
+    vertical-align: top;
+    padding: 2px 4px;
+    border-radius: 4px;
+    transform: translate3d(-4px, 0, 0);
+    margin-right: -8px;
+}
+
+.equation-label {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 4px;
+}
+
+.equation-textarea {
+    min-width: 200px;
+    margin-right: 10px;
+    outline: none;
+    border: none;
+    font-size: 14px;
+}
+
+.equation-enter {
+    user-select: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    white-space: nowrap;
+    height: 28px;
+    border-radius: 4px;
+    box-shadow: rgba(15, 15, 15, 0.1) 0 0 0 1px inset, rgba(15, 15, 15, 0.1) 0 1px 2px;
+    background: rgb(35, 131, 226);
+    color: white;
+    fill: white;
+    line-height: 1.2;
+    padding-left: 12px;
+    padding-right: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    align-self: flex-start;
+}
\ No newline at end of file
diff --git a/examples/03-ui-components/13-equation/tsconfig.json b/examples/03-ui-components/13-equation/tsconfig.json
new file mode 100644
index 0000000000..1bd8ab3c57
--- /dev/null
+++ b/examples/03-ui-components/13-equation/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "__ADD_FOR_LOCAL_DEV_references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/03-ui-components/13-equation/vite.config.ts b/examples/03-ui-components/13-equation/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/03-ui-components/13-equation/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/package-lock.json b/package-lock.json
index 14e278c208..49ebbd228a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17951,13 +17951,14 @@
       "dev": true
     },
     "node_modules/katex": {
-      "version": "0.16.10",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.10.tgz",
-      "integrity": "sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==",
+      "version": "0.16.11",
+      "resolved": "https://registry.npmmirror.com/katex/-/katex-0.16.11.tgz",
+      "integrity": "sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==",
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"
       ],
+      "license": "MIT",
       "dependencies": {
         "commander": "^8.3.0"
       },
@@ -29383,6 +29384,7 @@
         "@liveblocks/client": "^1.10.0",
         "@liveblocks/yjs": "^1.10.0",
         "@mantine/core": "^7.10.1",
+        "@types/katex": "^0.16.7",
         "@uppy/core": "^3.13.1",
         "@uppy/dashboard": "^3.9.1",
         "@uppy/drag-drop": "^3.1.1",
@@ -29394,6 +29396,7 @@
         "@uppy/status-bar": "^3.1.1",
         "@uppy/webcam": "^3.4.2",
         "@uppy/xhr-upload": "^3.4.0",
+        "katex": "^0.16.11",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.2.1",
@@ -29402,6 +29405,7 @@
         "yjs": "^13.6.15"
       },
       "devDependencies": {
+        "@types/katex": "^0.16.7",
         "@types/react": "^18.0.25",
         "@types/react-dom": "^18.0.9",
         "@vitejs/plugin-react": "^4.0.4",
diff --git a/playground/package.json b/playground/package.json
index 0ee1d1f6c7..45b44a2aeb 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -21,6 +21,7 @@
     "@liveblocks/client": "^1.10.0",
     "@liveblocks/yjs": "^1.10.0",
     "@mantine/core": "^7.10.1",
+    "@types/katex": "^0.16.7",
     "@uppy/core": "^3.13.1",
     "@uppy/dashboard": "^3.9.1",
     "@uppy/drag-drop": "^3.1.1",
@@ -32,6 +33,7 @@
     "@uppy/status-bar": "^3.1.1",
     "@uppy/webcam": "^3.4.2",
     "@uppy/xhr-upload": "^3.4.0",
+    "katex": "^0.16.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
@@ -40,6 +42,7 @@
     "yjs": "^13.6.15"
   },
   "devDependencies": {
+    "@types/katex": "^0.16.7",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^4.0.4",
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index eaac162755..e6e3d9961d 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -554,6 +554,33 @@
           "slug": "ui-components"
         }
       },
+      {
+        "projectSlug": "equation",
+        "fullSlug": "ui-components/equation",
+        "pathFromRoot": "examples/03-ui-components/13-equation",
+        "config": {
+          "playground": true,
+          "docs": false,
+          "author": "matthewlipski",
+          "tags": [
+            "Equation",
+            "Inline Equation",
+            "Custom Schemas",
+            "Latex",
+            "Slash Menu"
+          ],
+          "dependencies": {
+            "katex": "^0.16.11",
+            "@types/katex": "^0.16.7",
+            "react-icons": "^5.2.1"
+          } as any
+        },
+        "title": "Inline Equation",
+        "group": {
+          "pathFromRoot": "examples/03-ui-components",
+          "slug": "ui-components"
+        }
+      },
       {
         "projectSlug": "link-toolbar-buttons",
         "fullSlug": "ui-components/link-toolbar-buttons",