Building a Blog Editor from Scratch with Tiptap and Next.js
I spent about a month building a custom Notion-inspired blog editor with Tiptap, Next.js, MongoDB, and Cloudinary — and why full control beat another SaaS CMS.
For almost a month I worked on something small but meaningful: a custom blog editor, inspired by tools like Notion, built from the ground up.
I spent about a week just diving into rich text editors — how modern editors handle flexibility, custom blocks, markdown support, and extensibility — before I actually had time (during vacation and the week before) to build.
Stack
- Tiptap for the editor
- Next.js 15
- MongoDB + Next.js API routes
- Cloudinary for image storage
What actually moved the work forward
The docs were solid, but real progress came from reading blogs, browsing Reddit threads, and testing open-source CMSs like Strapi and Sanity. Those tools are great. I still preferred building something from scratch.
Why build it yourself
- Full control
- No recurring cost or trial clock
- No vendor lock-in
- No risk of someone else deleting your data
- Unlimited room to customize
That gave me what I wanted: something fast, flexible, and actually mine.
Where it can go next
There are endless extensions — collaborative editing, markdown output, syntax highlighting, custom slash commands. The architecture lessons also transfer to other blog and CMS ideas I have been exploring.
I also spun up a Sanity-based experiment while this was in progress. It was early and imperfect, but useful as a comparison point for “assemble a CMS” versus “own the editor.”
If you are building a similar tool, I would love to hear what stack you chose and what you would never outsource again.