The all-in-one rich-text editor π
In this project, I tried to replicate some feature that is available in Notion, an amazing productivity and note-taking app.
![]() |
![]() |
![]() |
---|---|---|
Markup editing | Block editing | Image inserting (pasting URL) |
- βοΈ Basic markups (bold, italic, underline, strikethrough, code snippet)
- π Basic blocks (heading blocks, code blocks, quote, todos, divider)
- πΌοΈ Image support (insert image by pasting the source URL π or drag them to the editor)
- ποΈ Floating toolbar (highlight a text or click the "..." button on the side)
- β¨οΈ Keyboard shortcuts (hover on the buttons on floating toolbar to discover the shortcuts)
This project is proudly built in TypeScript using Next.js, Tailwind CSS, Zustand, and a bunch of Slate.js (it's an amazing customizable framework for building rich text editors, check it out π)
Created by Nourman Hajar (masnormen)