Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@blocknote/react

Package Overview
Dependencies
Maintainers
2
Versions
82
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@blocknote/react

A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.

  • 0.8.1
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

TypeCell

Welcome to BlockNote! The open source Block-Based rich text editor. Easily add a modern text editing experience to your app.

Discord Matrix

Homepage - Introduction - Documentation

Live demo

Play with the editor @ https://blocknote-main.vercel.app/.

(Source in examples/editor)

Example code (React)

npm version

import { BlockNoteView, useBlockNote } from "@blocknote/react";
import "@blocknote/core/style.css";

function App() {
  const editor = useBlockNote({
    onEditorContentChange: (editor) => {
      // Log the document to console on every update
      console.log(editor.getJSON());
    },
  });

  return <BlockNoteView editor={editor} />;
}

@blocknote/react comes with a fully styled UI that makes it an instant, polished editor ready to use in your app.

If you prefer to create your own UI components (menus), or don't want to use React, you can use @blocknote/core (advanced, see docs).

Features

BlockNote comes with a number of features and components to make it easy to embed a high-quality block-based editor in your app:

Animations:

Helpful placeholders:

Drag and drop blocks:

Nesting / indentation with tab and shift+tab:

Slash (/) menu:

Format menu:

Real-time collaboration:

Feedback 🙋‍♂️🙋‍♀️

We'd love to hear your thoughts and see your experiments, so come and say hi on Discord or Matrix.

Contributing 🙌

See CONTRIBUTING.md for more info and guidance on how to run the project (TLDR: just use npm start).

Directory structure:

blocknote
├── packages/core       - The core of the editor
├── packages/react      - The main library for use in React apps
├── examples/editor     - Example React app that embeds the editor
├── examples/vanilla    - An advanced example if you don't want to use React or want to build your own UI components
└── tests               - Playwright end to end tests

The codebase is automatically tested using Vitest and Playwright.

Credits ❤️

BlockNote builds directly on two awesome projects; Prosemirror by Marijn Haverbeke and Tiptap. Consider sponsoring those libraries when using BlockNote: Prosemirror, Tiptap.

BlockNote is built as part of TypeCell. TypeCell is proudly sponsored by the renowned NLNet foundation who are on a mission to support an open internet, and protect the privacy and security of internet users. Check them out!

NLNet

Hosting and deployments powered by Vercel:

NLNet

Keywords

FAQs

Package last updated on 15 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc