? 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!


  • 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/dashibase-insert
cd dashibase-insert
npm i

2. Run dev

npm run dev

You should see what looks like the screenshot about.

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!


View Github