Skip to content


Switch branches/tags

📓 Notion Clone

Create and Edit Notes like in Notion

This clone tries to replicate some of the great note-taking features Notion has. If you don't know yet, I highly recommend to check it out!

📌 Live Demo:

📌 Medium Article: How To Build A Text Editor Like Notion

notion clone screenshot


  • Slash Commands (Type / to turn the block into different content types)
  • HTML Support (Use regular HTML tags like <a> in text blocks)
  • Image Support (Upload images by using the /image command)
  • Drag And Drop (Reorder blocks easily by drag and drop)
  • Guest Editing (Anyone can create public pages and share them via link)
  • User Management (Create an account to create private pages)
  • Scheduled Jobs (Delete inactive pages and accounts automatically)

Tech Stack

The frontend is built with Next.js and fully server-side rendered. On the backend, a REST API handles saving user content and user management.


Next.js · React.js · SCSS/SASS


Express.js · MongoDB with Mongoose · Nodemailer · JWT (Cookie-based)


  1. Clone the project

     git clone
     cd notion-clone
  2. Add environment variables

    Backend: Create an .env file in the backend directory:

    MAIL_SENDER="Your Name <>"

    Frontend: Create an .env.local file in the frontend directory:

    NEXT_PUBLIC_API="http://localhost:8080" // references your Backend API endpoint
  3. Install and run backend (http://localhost:8080)

    cd backend
    npm install
    npm start
  4. Install and run frontend (http://localhost:3000)

    cd frontend
    npm install
    npm run dev


You can host the application on almost any provider that supports Node applications and custom domains. I decided to host the frontend on and the backend on But you can host both, frontend and backend, on the same provider if you like to.

MongoDB Atlas

You have to create a new MongoDB cluster upfront. It will store all of your page and block data. You can create one for free on MongoDB Atlas.

Make sure, you create the following collections:

  • pages
  • users

Make sure, you allow network access to everyone (due to Heroku).


If you want to deploy the backend on, create a new app in your preferred region on

Make sure, you add all production environmental variables for the backend. You can see which variables are needed in the Installation part of this readme.

Make sure, you add a custom domain for your backend API. Since the application uses a Cookie-based authentication, we have to run backend and frontend on the same domain. I, for example, run the frontend on and the backend on

Want to run scheduled jobs? To delete inactive pages and users, I run scheduled jobs frequently. If you want this feature as well, you have to add more dynos to your application and run the job $ node jobs/index.js via Heroku Scheduler.

Lastly, you can deploy your app using Heroku Git.

Make sure, that when you push the backend to Heroku, you make a Git subtree push since notion-clone is a mono-repo containing backend and frontend. So run git subtree push --prefix backend heroku master instead of git push heroku master. Thus, we only push the backend part.


If you want to deploy the frontend on, you can so easily using the Vercel CLI.

With the Vercel CLI, we don't have to make a subtree push, instead we can just switch to the frontend folder and run the vercel command to deploy:

cd frontend

This will lead you through the setup guide for your frontend application. Afterwards the app should be successfully deployed.

Make sure, you add the Backend API endpoint as a production environmental variable on

Make sure, you add a custom domain for your frontend (that ideally matches the domain which you have specified in your backend environmental variables 😉)


Buy Me A Coffee

Konstantin Münster –

Distributed under the MIT license. See LICENSE for more information.