Skip to content

Custom Block for Katex #741

Description

@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.
Screenshot 2024-05-14 at 14 48 22

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.

Activity

  1. YousefED commented on May 28, 2024

    @YousefED
    Collaborator

    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!

  2. b4s36t4 commented on May 28, 2024

    @b4s36t4

    /attempt #741

    Algora profile Completed bounties Tech Active attempts Options
    @b4s36t4 3 bounties from 2 projects
    TypeScript, JavaScript,
    Rust
    Cancel attempt
  3. jkcs commented on Jun 6, 2024

    @jkcs
    Contributor

    Maybe I can give this a try?

  4. Navong commented on Jun 6, 2024

    @Navong
    katex_demo.mp4

    I customized Custom Block using sample of Formatting Toolbar.

  5. algora-pbc commented on Jul 19, 2024

    @algora-pbc

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

  6. Recxsmacx commented on Feb 24, 2025

    @Recxsmacx

    /attempt #741

  7. breno-ribeiro706 commented on Apr 23, 2025

    @breno-ribeiro706

    is still open?

  8. Kartikayy007 commented on May 25, 2025

    @Kartikayy007

    /attempt #741

  9. bgreenlee commented on Aug 25, 2025

    @bgreenlee
    Contributor

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

  10. Excellencedev commented on Sep 19, 2025

    @Excellencedev

    /attempt #741

  11. YousefED commented on Sep 26, 2025

    @YousefED
    Collaborator

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

  12. ArihantBapna commented on Sep 26, 2025

    @ArihantBapna

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

  13. MetaMmodern commented on Dec 20, 2025

    @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?

  14. kaunteyaarjun commented on Dec 31, 2025

    @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!

  15. thecafetron-ctrl commented on Feb 7, 2026

    @thecafetron-ctrl

    /attempt

  16. AleAnee commented on Feb 18, 2026

    @AleAnee

    /attempt #2019

  17. rpgamer9 commented on Feb 20, 2026

    @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.

  18. locked and limited conversation to collaborators on Feb 24, 2026
  19. converted this issue into a discussion #2513 on Feb 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions