Your Own Notion in a Weekend: Next.js Meets Ember Link

Disclaimer: I’m the creator of Ember Link, which is used in this project for real-time collaboration. This post demonstrates one way Ember Link can be used in practice, but the project is still evolving — feedback and contributions are always welcome! Most folks have used Notion at some point — it’s clean, intuitive, and collaborative by design. In this post, we’re going to build a simplified version of Notion using Next.js, ShadCN, and Ember Link for real-time collaboration. No database (for now), just a few powerful libraries. Features covered in this article: Spinning up a Next.js project Building a clean, responsive layout with ShadCN components Integrating BlockNote as a rich-text editor Adding Ember Link and Yjs for real-time collaboration By the end, you’ll have a working Notion-style app where multiple users can edit documents at the same time.

Apr 15, 2025 - 03:46
 0
Your Own Notion in a Weekend: Next.js Meets Ember Link

Disclaimer: I’m the creator of Ember Link, which is used in this project for real-time collaboration. This post demonstrates one way Ember Link can be used in practice, but the project is still evolving — feedback and contributions are always welcome!

Most folks have used Notion at some point — it’s clean, intuitive, and collaborative by design.

In this post, we’re going to build a simplified version of Notion using Next.js, ShadCN, and Ember Link for real-time collaboration. No database (for now), just a few powerful libraries.

Features covered in this article:

  • Spinning up a Next.js project
  • Building a clean, responsive layout with ShadCN components
  • Integrating BlockNote as a rich-text editor
  • Adding Ember Link and Yjs for real-time collaboration

By the end, you’ll have a working Notion-style app where multiple users can edit documents at the same time.