22 Notion-style Editor Libraries and Self-hosted Notion Alternative Apps

22 Notion-style Editor Libraries and Self-hosted Notion Alternative Apps

As Notion introduced a new editing style that resembles Medium Editor but comes with dozens of extra modular features, it has significantly impacted the development community. This new editor style offers enhanced flexibility and a more user-friendly experience, which many developers have found incredibly appealing.

Consequently, numerous developers have started to adapt to the new editor style by incorporating it into their JavaScript applications, aiming to leverage its advanced capabilities for better performance and user engagement.

Therefore, we created this comprehensive list to help developers navigate the plethora of available options and choose the right library that best fits the specific needs and requirements of their projects.

At the end of the article you will find another list of Notion self-hosted alternative apps.

1. Novel

Novel is a Notion-style WYSIWYG editor with AI-powered autocompletion. It uses the Tiptap text editor library and is packaged as a Next.js app, but the editor itself can be extracted and used in any React project. The Novel editor has also been ported to the Vue library.

Novel uses OpenAI for AI compilation, Vercel AI SDK, and TailwindCSS framework.

GitHub - steven-tey/novel: Notion-style WYSIWYG editor with AI-powered autocompletion.
Notion-style WYSIWYG editor with AI-powered autocompletion. - steven-tey/novel

2. BlockNote

BlockNote is a block-based, extensible React rich text editor inspired by Notion, built on Prosemirror and Tiptap.

Features

  • Comes with rich elements
  • Include text format menu
  • Slash (/) Commands
  • Drag and drop blocks
  • Animations

How to use?

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} />;
}
GitHub - TypeCellOS/BlockNote: A React Rich Text Editor that’s block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
A React Rich Text Editor that’s block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap. - TypeCellOS/BlockNote

3. BlockSuite

BlockSuite is a toolkit for building editors and collaborative applications, offering content editing infrastructures, UI components, and editors like PageEditor and EdgelessEditor. It supports customization, extension, and building new editors from scratch.

Originating from the AFFiNE knowledge base, BlockSuite aims to support multimodal editable content, organize complex knowledge, and enable real-time collaboration using CRDT technology.

Currently in its early stages, BlockSuite is open source and evolving beyond its initial scope.

The app is released under the MPL 2.0 License.

Tech Stack

And under the hood, the robust BlockSuite framework excels in:

  • Defining custom blocks and inline embeds.
  • Facilitating incremental updates, real-time collaboration, and even decentralized data synchronization through the document streaming mechanism.
  • Enabling type-safe complex editing logic via the command mechanism, akin to React hooks designed for document editing.
  • Ensuring document persistence and compatibility with a variety of third-party formats (such as markdown and HTML) through block snapshot and transformer.
  • Managing state scheduling across multiple documents and seamlessly reusing one document in multiple editors.

GitHub - toeverything/blocksuite: 🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.
🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications. - toeverything/blocksuite

4. Alphonse Editor

Alphonse Editor is an open-source Notion-style WYSIWYG editor built with shadcn/ui and TailwindCSS.

Install

npm install alphonse

How to use

"use client";

import React from "react";
import {
  AlphonseProvider,
  AlphonseEditorProvider,
  AlphonseEditor,
} from "alphonse";

const content = `
<h1>Hello World! 🌎️</h1>
<p>The best notion like editor</p>
`;

export const Editor = () => {
  return (
    <>
      <AlphonseProvider>
        <AlphonseEditorProvider content={content}>
          <AlphonseEditor />
        </AlphonseEditorProvider>
      </AlphonseProvider>
    </>
  );
};
GitHub - brunocroh/alphonse: Notion-style WYSIWYG editor with AI super powers
Notion-style WYSIWYG editor with AI super powers. Contribute to brunocroh/alphonse development by creating an account on GitHub.

5. Yoopta-Editor

Yoopta-Editor is a free, open-source rich-text editor for React apps, offering extensive customization and flexibility to build powerful, user-friendly editors similar to Notion, Craft, Coda, and Medium.

Features

  • Easy setup
  • Default list of powerful plugins
  • Many typical solved problems in UX behaviour.
  • Media plugins on steroids with optimization and lazy loadings
  • Code plugin on steroids with themes and languages
  • Each plugin can be easily customized and extensible
  • Drag and drop, nested dnd is supported also
  • Selection box for manipulating multiple blocks at once
  • You can create your own plugin
  • A list of useful tools (ActionMenu, Toolbar etc.) for the convenience of working with the editor
  • Automatic lazy loading for media components (eg. embeds)
  • Large documents
  • Mobile friendly
  • Indent and outdent for every plugin by tabs and shift+tabs
  • Editor instance to programmatically control your content
  • Editor events for saving to DB in real-time
  • Exports in markdown, html, plain text
  • Shortcuts, hotkeys. And customization for this!
  • Super AI tools not for HYPE, but for real useful work with editor content - [in progress]
  • The soul invested in the development of this editor 💙

Install

## slate, slate-react, react, react-dom - peer dependencies
## @yoopta/editor - core package
yarn add slate slate-react @yoopta/editor @yoopta/paragraph
# or
npm install slate slate-react @yoopta/editor @yoopta/paragraph

Usage

import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';

const plugins = [...];

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor(), []);

  return (
    <div>
      <YooptaEditor
        editor={editor}
        plugins={plugins}
      />
    </div>
  );
}
GitHub - Darginec05/Yoopta-Editor: Build Notion-like, Craft-like, Coda-like, Medium-like editors with Yoopta
Build Notion-like, Craft-like, Coda-like, Medium-like editors with Yoopta - Darginec05/Yoopta-Editor

6. Craft Editor

Craft Editor is an open-source, Notion-style WYSIWYG editor with AI extensions support. It can be installed using the @sergeysova/craft NPM package.

Install Craft Editor

npm add @sergeysova/craft

Usage

import { useState } from "react";
import { CraftEditor, JSONContent } from "@sergeysova/craft";

export default function App() {
  const [content, setContent] = useState<JSONContent>({})

  return <CraftEditor content={content} onUpdate={(editor) => setContent(editor.getJSON())} />;
}
GitHub - sergeysova/craft: Notion-style WYSIWYG editor with AI extensions support
Notion-style WYSIWYG editor with AI extensions support - sergeysova/craft

7. Blocky Editor

Blocky Editor is a lightweight, fast, and extensible editor designed for building Notion-like applications. It supports custom blocks and spans, is static-typed, and allows for collaborative editing, without relying on heavy editor frameworks.

The editor has been tested on Google Chrome, Mozilla Firefox, and Apple Safari.

GitHub - vincentdchan/blocky-editor: A Notion-like editor built with blocks.
A Notion-like editor built with blocks. Contribute to vincentdchan/blocky-editor development by creating an account on GitHub.

8. Appwrite Writer

Appwrite Writer is a Notion-style WYSIWYG editor with AI-powered autocompletions, built using Appwrite, Next.js, OpenAI, Novel, Vercel AI SDK, Vercel, TailwindCSS, and Cal Sans. It serves as an example of the powerful applications you can create with Appwrite.

GitHub - NiazMorshed2007/appwrite-writer: Appwrite Writer is a notion like editor powered with Appwrite, OpenAI & Novel.
Appwrite Writer is a notion like editor powered with Appwrite, OpenAI & Novel. - NiazMorshed2007/appwrite-writer

9. Notitap

Notitap is a Pro version of a Notion-like editor built on Tiptap, with features like resizable images and videos, search and replace, and LanguageTool integration.

GitHub - sereneinserenade/notitap: Notitap - Notion like editor built on top of tiptap.
Notitap - Notion like editor built on top of tiptap. - sereneinserenade/notitap

10. Editr

Editr is yet another Notion-like editor allowing users to create H1 text blocks easily by typing "/" and "1". It is built with HTML, CSS, JavaScript, and TailwindCSS.

To get started, you need a web browser, git, a text editor, and basic knowledge of HTML, CSS, and JavaScript.

11. Potion

Postion is yet another Notion-alike editor, released as an open-source project, however, it does not include enough documentation yet. You can check the demo here.

GitHub - furkankly/potion: A Notion-style WYSIWYG editor.
A Notion-style WYSIWYG editor. Contribute to furkankly/potion development by creating an account on GitHub.

12- A block-styled editor, Inspired by Notion

This is an open-source, modular content editor inspired by Notion, utilizing VUE components for flexible plug-ins and clean JSON data storage in Vuex.

It supports various modules like plain text, to-do lists, and drag-and-drop components but has some unresolved bugs in text editing and cursor movement.

Sadly, the project does not have enough English documentation yet.

GitHub - CedarXi/All-in-one: A block-styled editor, Inspired by Notion
A block-styled editor, Inspired by Notion. Contribute to CedarXi/All-in-one development by creating an account on GitHub.

13. 📓 Notion Clone

Notion Clone is a self-hosted web-based notion alternative that you can deploy easily on Vercel.

Features

  • Slash Commands (Type / to turn the block into different content types)
  • HTML Support (Use regular HTML tags like <a> in text blocks)
  • Image Support (Upload images by using the /image command)
  • Drag And Drop (Reorder blocks easily by drag and drop)
  • Guest Editing (Anyone can create public pages and share them via link)
  • User Management (Create an account to create private pages)
  • Scheduled Jobs (Delete inactive pages and accounts automatically)
GitHub - konstantinmuenster/notion-clone: Edit Notes like in Notion.so. Full-Stack App using React/Express.
Edit Notes like in Notion.so. Full-Stack App using React/Express. - konstantinmuenster/notion-clone

8 Self-hosted Open-source Notion Alternatives

14- AFFiNE.Pro

AFFiNE.PRO Is an Open-source Self-hosted Knowledge Base and Notion.AI Alternative
Notion is an exceptional online platform for collaborative note-taking and knowledge sharing among individuals, teams, and organizations. With Notion, you can effortlessly organize your notes, write comprehensive articles, and create data sets in a variety of views, including tables, kanbans, and database-like dynamic views. Furthermore, Notion enables you to create

15. Focalboard

Focalboard: Free Desktop Task Manager with Kanban Style (alternative to Trello, Notion, and Asana) (Free program)
Focalboard is an amazing kanban task manager for desktop and server. Imagine Trello for your desktop. It allows you to manage and organize your tasks and projects without having to deal with so much configuration or hidden settings. Focalboard is available for macOS as well as Linux and Windows. You

16. AppFlowy

AppFlowy: an Open source Collaborative Note-taking for Creative Teams (Notion.ai alternative) (Free app)
AppFlowy.IO is a free open-source note-taking software for teams. It allows you to create almost anything you want in a writing canvas, such as tasks, kanban boards, and more. AppFlowy is written in Flutter/ Dart, and it uses Rust for the backend. Compared to Notion, AppFlowy allows you to

17. Notea

Notea is an Open-source Note-taking App and Notion Alternative
What is Notea? Notea is an open-source web-based note-taking app for creative people. By default, Notea supports Markdown, and comes with a sharing option to many services as Google Drive. Unlike many similar apps, Notea does not require database, your notes will be saved on AWS S3 buckets or similar

18. TiddlyWiki

TiddlyWiki : Open source one file wiki that runs everywhere.
I have been using TiddlyWiki for some time now, It’s very useful, productive and most importantly provide me with many options at once with ease of use : taking notes, summarizing my studies, task manager, project management, and writing. With no hustle, no restrictions and no time to set it up.

19. CryptPad

CryptPad is an open-source, free collaborative web-based office system
Many people and teams prefer to use web-based office suites as online services by enterprises like Google, and Microsoft. Some may have privacy concerns about using enterprise services or want their private alternative system, therefore here we offer you the right alternative for you: CryptPad. What is CryptPad? CryptPad is

20. Logseq

Logseq is An Enterprise-grade Open-source Knowledge Management Platform For Teams
What is Logseq? Logseq is an exceptional free and open-source knowledge management and collaboration platform that prioritizes privacy, longevity, and user control. It offers robust tools for managing knowledge, collaborating, annotating PDFs, and task management, with the ability to handle multiple file formats, including Markdown and Org-mode. Logseq also provides

21. Wiki.js

Wiki.js: A Modern Open-source Wiki Engine for the Enterprise
Whenever there is a mention of a Wiki, the first thing that always come to thoughts is: Wikipedia.org. So first let’s draw a like between Wiki and Wikipedia. A Wiki is a software that built to ease collaborative writing and editing processes for teams. They are designed with a

22. Nextion

Nextion is a Free Self-hosted Notion Alternative
This is a full-stack Notion clone built with Next.js 13, React, Convex(Real-time database), Tailwind CSS, and more. You can check the demo here. Features * Real-time database 🔗 * Notion-style editor 📝 * Light and Dark mode 🌓 * Infinite children documents 🌲 * Trash can & soft delete 🗑️ * Authentication 🔐 * File upload * File deletion * File replacement * Icons for







Read more




Open-source Apps

9,500+

Medical Apps

500+

Lists

450+

Dev. Resources

900+

/