# BlockNote: A Block-Based React Rich Text Editor (Notion Style)

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/typecellos-blocknote
Generated for open source discovery and AI-assisted research.

BlockNote is an open-source, block-based React rich text editor, designed to offer a Notion-style editing experience. Built on Prosemirror and Tiptap, it provides a highly extensible and feature-rich solution for integrating modern text editing into web applications. With capabilities like real-time collaboration and intuitive UI elements, BlockNote simplifies the development of sophisticated content creation tools.

GitHub: https://github.com/TypeCellOS/BlockNote
OSRepos URL: https://osrepos.com/repo/typecellos-blocknote

## Summary

BlockNote is an open-source, block-based React rich text editor, designed to offer a Notion-style editing experience. Built on Prosemirror and Tiptap, it provides a highly extensible and feature-rich solution for integrating modern text editing into web applications. With capabilities like real-time collaboration and intuitive UI elements, BlockNote simplifies the development of sophisticated content creation tools.

## Topics

- React
- TypeScript
- Rich Text Editor
- Block-Based Editor
- Notion Style
- Prosemirror
- Tiptap
- WYSIWYG

## Repository Information

Last analyzed by OSRepos: Fri Dec 19 2025 00:00:49 GMT+0000 (Western European Standard Time)
Detail views: 10
GitHub clicks: 12

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introdução
BlockNote is an open-source, block-based React rich text editor that provides a Notion-style editing experience. It is built upon the powerful foundations of Prosemirror and Tiptap, offering a robust and extensible solution for developers. Designed to easily integrate a modern text editing experience into any application, BlockNote comes with a fully styled UI, making it ready to use out-of-the-box.

## Instalação
To get started with BlockNote, you can install the necessary packages using npm or yarn. The `@blocknote/react` package provides the core React components, while `@blocknote/mantine` offers a styled UI.

typescript
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/core/fonts/inter.css";
import "@blocknote/mantine/style.css";

function App() {
  const editor = useCreateBlockNote();

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


## Exemplos
BlockNote offers a [live demo](https://www.blocknotejs.org) and various [examples](https://www.blocknotejs.org/examples) to showcase its capabilities. You can explore them on the official website. The following React code snippet demonstrates how simple it is to integrate BlockNote into your application:

typescript
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/core/fonts/inter.css";
import "@blocknote/mantine/style.css";

function App() {
  const editor = useCreateBlockNote();

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


## Porquê usar
BlockNote provides a comprehensive set of features designed to deliver a high-quality, block-based editor experience:

*   **Animations:** Smooth and engaging visual feedback for user interactions.
*   **Helpful placeholders:** Intuitive prompts to guide users in content creation.
*   **Drag and drop blocks:** Effortless rearrangement of content blocks.
*   **Nesting / indentation:** Organize content hierarchically using tab and shift+tab.
*   **Slash (/) menu:** Quick access to various block types and commands.
*   **Format menu:** Contextual formatting options for selected text.
*   **Real-time collaboration:** Built-in support for collaborative editing experiences, powered by Yjs.

## Links
For more information and to get started with BlockNote, refer to the official resources:

*   [Homepage](https://www.blocknotejs.org)
*   [Documentation](https://www.blocknotejs.org/docs)
*   [Quickstart](https://www.blocknotejs.org/docs/getting-started)
*   [Examples](https://www.blocknotejs.org/examples)
*   [Discord Community](https://discord.gg/Qc2QTTH5dF)