Notion Clone

Edit Notes like in Full-Stack App using React/Express.
Alternatives To Notion Clone
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Javascript Testing Best Practices21,424
25 days ago59mitJavaScript
📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (December 2022)
Payload10,61452019 hours ago248September 24, 202236mitTypeScript
Built with React + TypeScript, Payload is a free and open-source Headless CMS. [✩Star] if you support our work!
2 years agobsd-3-clauseJavaScript
A Beautiful Open Source RSS & Podcast App Powered by
a month ago104JavaScript
This is a code repository for the corresponding video tutorial. Using React, Node.js, Express & MongoDB you'll learn how to build a Full Stack MERN Application - from start to finish. The App is called "Memories" and it is a simple social media app that allows users to post interesting events that happened in their lives.
Hackernews React Graphql4,351
6 months ago23mitTypeScript
Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
3 months ago70HTML
13 days ago70JavaScript
This is a code repository for the corresponding YouTube video. In this tutorial we are going to build and deploy a real time chat application. Covered topics: React.js, Node.js, Express.js, and
4 months ago69mitJavaScript
Open source web application to learn JS stack: React, Material-UI, Next.js, Node.js, Express.js, Mongoose, MongoDB database.
4 months ago11mitTypeScript
Build your own SaaS business with SaaS boilerplate. Productive stack: React, Material-UI, Next, MobX, WebSockets, Express, Node, Mongoose, MongoDB. Written with TypeScript.
Docx3,223477720 hours ago64September 22, 202282mitTypeScript
Easily generate and modify .docx files with JS/TS with a nice declarative API. Works for Node and on the Browser.
Alternatives To Notion Clone
Select To Compare

Alternative Project Comparisons

📓 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:

    MONGO_URI="mongodb+srv://username:[email protected]/database?retryWrites=true&w=majority"
    MAIL_SENDER="Your Name <[email protected]>"

    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.

Popular Reactjs Projects
Popular Express Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.