Custom Block for Katex

[stevenoh2003]

Is your feature request related to a problem? Please describe.
Right now, the default blocks provide useful support for text editing. However, there is a limitation in the editor's versatility: it lacks a dedicated block for inputting equations. This makes it difficult for users who need to include mathematical expressions and equations in their documents, similar to the functionality available in Notion. The current options do not support a seamless way to input and display LaTeX equations within the text editor, which is a significant drawback for users in academia, research, or any field that requires mathematical documentation.

Describe the solution you'd like
I would like to have a custom block that allows users to input equations directly into the editor. This block should support LaTeX formatting so that users can type LaTeX code and have it rendered properly as mathematical notation within the document. Ideally, this block would function similarly to Notion's equation input feature, providing a user-friendly interface for entering and editing equations.

Describe alternatives you've considered
Building a block that directly converts the text input into LaTeX code. This approach would allow users to type their equations as plain text and have it automatically converted to LaTeX for rendering.
Implementing a text field that appears from a dropdown menu in the block selection options. Users could input LaTeX code into this field, and it would render the equation in the current editing location.

Additional context
Adding this feature would greatly enhance the usability of the text editor for users who need to include complex mathematical expressions in their documents. It would make the editor more versatile and user-friendly, especially for those in scientific and technical fields.

[YousefED]

This would be great! It should be possible with Custom Inline Content (https://www.blocknotejs.org/docs/custom-schemas/custom-inline-content), although it might need custom prosemirror handling, not sure.

It's not on our roadmap atm, but I'd definitely welcome a PR for this!

[b4s36t4]

/attempt #741

Algora profile	Completed bounties	Tech	Active attempts	Options
@b4s36t4	3 bounties from 2 projects	TypeScript, JavaScript, Rust		Cancel attempt

[jkcs]

Maybe I can give this a try?

[Navong]

katex_demo.mp4

I customized Custom Block using sample of Formatting Toolbar.

[algora-pbc[bot]]

💡 @jkcs submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[Recxsmacx]

/attempt #741

Options

• Cancel my attempt

[breno-ribeiro706]

is still open?

[Kartikayy007]

/attempt #741

[bgreenlee]

There is a Tiptap extension, but it requires Tiptap 3.x: https://tiptap.dev/docs/editor/extensions/nodes/mathematics

[Excellencedev]

/attempt #741

[YousefED]

fyi, we're removing the bounty for now. Sorry about this (see #2019 (comment))

[ArihantBapna]

@YousefED just fyi: #1987 (comment) this may be useful to this

[MetaMmodern]

There is a Tiptap extension, but it requires Tiptap 3.x: https://tiptap.dev/docs/editor/extensions/nodes/mathematics

@bgreenlee Support for Tiptap v3 was added in v0.39.0. Anybody want to give it a shot?

[kaunteyaarjun]

Subject: Ready for Review - Full Implementation with KaTeX & Error Handling

Hi! I have implemented the Custom Math Block as requested.

I created a complete demo project that satisfies all requirements:

• Custom Schema: Implemented using createReactBlockSpec with a "math" block type.

• KaTeX Integration: Renders equations in display mode with built-in error handling (graceful fallbacks for invalid LaTeX).

• Editor Instantiation: Includes a full demo (App.tsx) showing the editor initialization and sample equations (Einstein, Quadratic, Matrix, etc.).

🔗 Project Repository & Demo: https://github.com/kaunteyaarjun/blocknote-katex-block

Key Features:

Production Ready: Fully typed with TypeScript.

Error Safe: If a user types invalid LaTeX, the block catches the error instead of crashing the editor.

Visual Style: Clean, Notion-like interface with click-to-edit functionality.

I am ready to open a PR to merge this into the main codebase. Let me know if you'd like me to proceed!

[thecafetron-ctrl]

/attempt

[AleAnee]

/attempt #2019

[rpgamer9]

Problem: As noted, the lack of a dedicated equation block is a significant gap for users who need to include mathematical notation in their documents. The current text blocks don't support seamless LaTeX input and rendering.

Solution: Implementing a block similar to the example in the attached screenshot would be ideal. This would allow users to input and edit LaTeX code directly within the editor, with the equation rendering cleanly in the document. This would bring BlockNote on par with other modern editors (like Notion) and make it much more usable for a wider audience, including academics, engineers, and scientists.

[YousefED]

related: #2456