https://github.com/mannoeu/notion-study
A clone of Notion with basic functionality
https://github.com/mannoeu/notion-study
bubble-menu editor floating-menu notion react tailwind tiptap typescript vite
Last synced: 2 months ago
JSON representation
A clone of Notion with basic functionality
- Host: GitHub
- URL: https://github.com/mannoeu/notion-study
- Owner: mannoeu
- Created: 2023-07-08T23:16:37.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-08T23:28:01.000Z (almost 3 years ago)
- Last Synced: 2025-06-03T17:50:47.052Z (about 1 year ago)
- Topics: bubble-menu, editor, floating-menu, notion, react, tailwind, tiptap, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 56.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Notion Study
This is a repository containing a study code for a basic clone of the "Notion" application. The goal of this project is to demonstrate the usage of the `@tiptap` library along with some extensions to create a similar functionality to Notion.
## Description
Notion is a popular tool for organization and collaboration, allowing users to create notes, documents, databases, and more. In this study project, we use the `@tiptap` library to create a basic Notion clone with essential functionalities.
`@tiptap` is a rich-text editor for the web. It provides a flexible and easy-to-use API for creating and customizing text editors. In this project, we explore some popular extensions of `@tiptap` to add functionalities such as text formatting, list creation, table creation, etc.
## Features
The basic Notion clone in this project includes the following features:
- Text editing: allows users to write and format text with styles like bold, italic, code, headings levels etc.
- List creation: users can create ordered and unordered lists.
- Floating menu: a menu bar that appears near the selected text, providing formatting options.
- Bubble menu: a menu that appears when the user selects a block element, offering block-specific options.
## Prerequisites
Before running this project, make sure you have the following dependencies installed:
- Node.js: version 12 or above.
- NPM: version 6 or above.
## Running the Project
Follow the steps below to run the project on your local machine:
1. Clone this repository to your local directory:
```shell
git clone https://github.com/mannoeu/notion-study.git
```
2. Navigate to the project directory:
```shell
cd notion-study
```
3. Install project dependencies:
```shell
yarn
```
4. Run the project:
```shell
yarn dev
```
## Credits
This project was inspired by the tutorial provided by [Rocketseat](https://github.com/Rocketseat). We appreciate their contribution to the development community.