DEV Community

Oathan Rex
Oathan Rex

Posted on

Building a Notion-Style Editor from Scratch with Modern Web Tech

#webdev #editor #opensource #frontend

Rich-text editors are everywhere — notes apps, documentation tools, knowledge bases.

Tools like Notion made block-based writing feel natural, flexible, and powerful.

As an experiment (and learning project), I built a Notion-style rich text editor using modern web technologies, focusing on clean UX, extensibility, and developer clarity.

👉 GitHub Repo:

https://github.com/oathanrex/notion-style-editor

✨ What Is This Project?

This project is a block-based rich text editor inspired by Notion’s writing experience.

It’s designed to be:

  • Modular
  • Extendable
  • Easy to embed into other web apps

Instead of being a monolithic editor, the goal was to keep the architecture flexible so new blocks, plugins, or behaviors can be added later.

🚀 Core Features

🧱 Block-Based Editing

  • Paragraphs, headings, lists, quotes
  • Each piece of content is treated as a block
  • Easy to reason about and extend

✏️ Rich Text Formatting

  • Bold, italic, underline, inline code
  • Keyboard shortcuts for fast writing
  • Clean separation between content and UI

⚡ Slash (/) Command Menu

  • Quickly insert blocks and components
  • Familiar Notion-style workflow
  • Designed to be extensible

🎯 Design Goals

When building this editor, I focused on a few core principles:

  • Clarity over complexity No unnecessary abstractions or magic.
  • Extensibility first Custom blocks and plugins should be easy to add.
  • Framework-friendly Can be adapted for React, Next.js, or Vanilla JS projects.
  • Good UX by default Keyboard-first, minimal UI, predictable behavior.

🛠️ Tech Stack

This project uses a modern but lightweight stack:

  • JavaScript (ES6+)
  • Modular editor architecture
  • Block-based content model
  • CSS / utility-first styling (Tailwind-ready)

The editor is intentionally kept framework-agnostic so it can evolve in different directions.

📦 Project Structure (High-Level) 


src/
├── components/     # UI (toolbars, menus)
├── editor/         # Core editor logic & block schema
├── plugins/        # Slash menu, shortcuts, extensions
├── utils/          # Helpers & shared logic
└── styles/         # Editor styling
Enter fullscreen mode Exit fullscreen mode


`

Keeping responsibilities separated makes experimentation much easier.

🔧 Getting Started

bash
git clone https://github.com/oathanrex/notion-style-editor.git
cd notion-style-editor
npm install
npm run dev
`

Open http://localhost:3000 to see the editor running locally.

🧠 What I Learned

Building a rich-text editor teaches you a lot about:

  • Cursor and selection management
  • Block vs inline content models
  • Keyboard accessibility
  • Balancing UX with technical constraints
  • Designing systems meant to be extended later

It’s a deceptively deep problem space.

📚 Use Cases

This editor can serve as a foundation for:

  • Note-taking apps
  • Documentation platforms
  • Knowledge bases
  • Blog CMS systems
  • Internal tools

🤝 Open Source & Contributions

The project is open source and intentionally structured for experimentation.

If you’d like to:

  • Add new block types
  • Improve the slash menu
  • Enhance accessibility
  • Experiment with collaboration features

Feel free to fork the repo or open a pull request.

🔗 Links

If you’re interested in editor architecture, block-based systems, or building complex UI tools from scratch, I’d love to hear your thoughts or feedback in the comments.

`

Top comments (0)