/nottion

Notion editor clone

Primary LanguageTypeScript

Notion editor clone

Table of Contents

Tech Stack

  • Next JS
  • Slate JS & React Slate
  • DND-Kit
  • Tailwind

Features

  • Type "/" to show commands
    • Heading, paragraph, image, code, quote
  • Text styling & shortcut
    • CMD + b → Bold
    • CMD + i → Italic
    • CMD + u → Underline
  • Drag and drop

Live

Live Demo: Nottion

Demo

Flow Demo
Heading 1 Heading 1
Heading 2 Heading 2
Heading 3 Heading 3
Paragraph Paragraph
Image Image
Code Code
Quote Quote
Shortcut: bold, italic, underline Shortcut
Drag and drop Drag and drop