BlockNoteBlockNote
    • Docs
    • AI
    • Examples
    • Pricing
    • About
    • Sign in
Examples
Alert BlockMentions MenuFont StylePDF BlockProAlert Block with Full UXToggleable Custom BlocksConfiguring Default Blocks
ExamplesCustom SchemasPDF BlockPro

PDF Block

In this example, we create a custom PDF block which extends the built-in File block. In addition, we create a Slash Menu item which inserts a PDF block.

Try it out: Press the "/" key to open the Slash Menu and insert an PDF block!

Relevant Docs:

  • Custom Blocks
  • Changing Slash Menu Items
  • Editor Setup
GitHub
StackBlitz

Pro Example

Get access to the full source code for pro examples by subscribing to BlockNote Pro

Get BlockNote Pro

Footer

BlockNoteBlockNote

BlockNote is an extensible React rich text editor with support for block-based editing, collaboration and comes with ready-to-use customizable UI components.

Learn

  • Documentation
  • Examples
  • Releases

Collaborate

  • Partner with us
  • Sponsorships
  • Contribute

Community

  • GitHub
  • Discord

Legal

  • Terms & Conditions
  • Privacy Policy

Theme

© 2026 BlockNote maintainers. All rights reserved.