Help needed: Nested Custom Blocks (IF/LOOP) in BlockNote

Hi there,

I'm exploring the possibility of adding custom blocks (e.g., IF and LOOP) to BlockNote with the following functionality:

Custom Blocks:
- Blocks (IF and LOOP) that include a single-line input field for parameters (e.g., x > 5 or while i < 10).
- Full editor functionality inside these blocks (text, headings, images, etc.).
Nesting:
- Support for nesting IF and LOOP blocks within each other or within other content in the editor.
Slash Menu Integration:
- Allow IF and LOOP to be added directly via the slash menu.
Styling:
- Visually distinguish these blocks with borders or other styles.

Additional Context

This functionality is similar to how callouts work in Notion, where you can add any type of content within a callout block. I’m aiming for a similar behavior, but with custom blocks (IF and LOOP) that include an input field for parameters.

Notion_SJ8R9gtvmE.mp4

Questions

Is it possible to implement custom blocks with nested editor functionality using the current BlockNote framework?
Can the BlockSchema API support this kind of nesting structure?
Do you have any guidance or best practices for dynamically rendering and managing nested blocks within the editor?

Both Devin and Replit failed to help me design this.

Thank you in advance for your help! I’d love to know if this aligns with the capabilities of BlockNote or if there are any limitations I should be aware of.

See this example for implementing a custom block type: https://www.blocknotejs.org/docs/custom-schemas/custom-blocks

See this example for implementing a custom block type: https://www.blocknotejs.org/docs/custom-schemas/custom-blocks

Yes, custom blocks are straightforward—I’ve worked with them extensively. The real challenge arises when trying to embed a fully functional editor within a block.

+1

same question.
Any update about this, or this #1267 ??

I currently have the same need, but nested custom blocks don't seem to be possible as of the current v0.25.2 version.
Any plan on supporting this? :)

@ClementNerma

I currently have the same need, but nested custom blocks don't seem to be possible as of the current v0.25.2 version. Any plan on supporting this? :)

Hi @ClementNerma, there is no changes yet, I just created an example here #1267
because the official maintainer @YousefED asked for a reproduceable error.

let's see if there are updates in the future. Hope this get fixed 🙏

this is currently not possible and not planned (yet). let's track this here: #1540

Feel free to add to the thread what the exact use-cases are

Sorry if too late, but you can add the desired text as css using ::after to the entire block group.

Here's a principle example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Code-wrapper demo</title>

    <style>
	  body {
	    padding: 2rem;
	  }
	
      /* ========== reusable wrapper ==================================== */
      .code-wrapper {
        display: block;        /* keeps each snippet on its own line   */
        font-family: monospace;
		padding-bottom: 1rem;
      }
	  
	  .code-wrapper .code {
	    display: block;
        padding-left: 2ch;     /* visual indent for wrapped content    */
        white-space: pre;      /* preserve   all   spacing             */
	  }

      /* insert prefix / suffix pulled from data-* attributes ---------- */
      .code-wrapper::before {
        content: attr(data-prefix);
      }
      .code-wrapper::after  {
        content: attr(data-suffix);
      }
    </style>
  </head>

  <body>
<span
  class="code-wrapper"
  data-prefix="if {"
  data-suffix="};">
  <span class="code">// .. some code</span>
</span>

<span
  class="code-wrapper"
  data-prefix="do {"
  data-suffix="} while (condition);">
  <span class="code">// .. some other code</span>
</span>
  </body>
</html>

Do something like that in terms of css, and then just select the .bn-block or .bn-block-outer that contains your custom code block. The problem here is that you probably can't set data attributes on these wrappers, so your solution would be to just write custom css classes for each block type or create JS helpres that will write the necessary and inline them right with the block.

Navigation Menu

Repository navigation

Help needed: Nested Custom Blocks (IF/LOOP) in BlockNote #1368

Additional Context

Questions

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Help needed: Nested Custom Blocks (IF/LOOP) in BlockNote #1368

Description

Additional Context

Questions

Activity

nperez0111 commented on Jan 14, 2025

Aichnerc commented on Jan 14, 2025

simonprast commented on Jan 16, 2025

coxato commented on Jan 24, 2025

ClementNerma commented on Mar 17, 2025

coxato commented on Mar 17, 2025

YousefED commented on Mar 19, 2025

vitallygolovanov commented on Jun 28, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions