🧴 Lotion

An open-source Notion UI built with Vue 3.

Try demo

We will be talking about Lotion and the Notion UI during CityJS Singapore's pre-conference meetup on 27th July!

Features

• Block-based editor
• Drag to reorder blocks
• Basic Markdown-parsing including bold, italic, headings and divider
• Type '/' for command menu and shortcuts

Getting Started

1. Clone this repository, go to the root directory and install packages

git clone https://github.com/dashibase/lotion
cd lotion
npm i

2. Run dev

npm run dev

You should see what looks like the screenshot above.

3. Contribute!

Lotion is quite limited for now but we hope it serves as a good starting point for other folks looking to build their own editors.

We would love to make Lotion more extensible and welcome any suggestions or contributions!

Acknowledgements

This was made much easier with the following libraries and frameworks, thank you!

• vue-draggable-next
• tiptap and ProseMirror
• vue and vite
• TailwindCSS