Live demo: https://clotion-5e4b4.web.app/

👋

Welcome to Clotion

Clotion is a simple Notion clone made by Jenny Zonka for The Odin Project. Learn more about this app at https://github.com/jennycade/clotion.

👆 Icon and title

Every page has an icon and title. Click the icon (or the Add icon button) to choose a new emoji to use as the icon, and click the title to change it.

👈 Sidebar

The sidebar shows all of your pages. Click any page to open it. Drag and drop to re-order top-level pages.

New page

When you open a new page, you can choose to make it either an empty rich text document or a database.

---

Rich text editor

Type '/' to see the types of blocks that are available. You can make:

• paragraphs
• bulleted lists
• numbered lists
• headings
• code blocks
• quotes
• dividers
• callouts

The editor also supports bold, italic, underline, strikethrough, and monospaced styles, as well as multiple font and background colors. Highlight text to change its formatting.

Keyboard shortcuts

The list below gives Mac shortcuts. For non-Macs, use Ctrl for ⌘ and alt for ⌥

Text formatting

• ⌘ B - bold
• ⌘ I - italic
• ⌘ U - underline
• ⌘ ⇧ S - strikethrough
• ⌘ E - monospace

Blocks

• ⌘ ⌥ 0 - paragraph
• ⌘ ⌥ 1 - heading 1
• ⌘ ⌥ 2 - heading 2
• ⌘ ⌥ 3 - heading 3
• ⌘ ⌥ 5 - bullet list
• ⌘ ⌥ 6 - numbered list
• ⌘ ⌥ 8 - code block
• ⌘ ⌥ 9 - insert subpage

Subpages

Choose the page block to add a subpage. You can nest pages as deeply as you want.

If you delete a link to a subpage, it will be added back to the end of its parent page the next time the parent page is opened.

---

Databases

Click over to the Sample database to see a database in action. Use Views to see the same data represented in a table, a board, a list, or a gallery.

Each database can have any number of properties. There are nine different types of properties:

1. text
2. number
3. select - one of any number of user-defined options. Used for board views.
4. multiselect - like select, but it supports choosing any number of options. Not used for board views.
5. date
6. checkbox
7. url
8. email
9. phone

You can create any number of views by clicking on the view selector at the top left corner of the database. Within each view, any number of properties can be displayed.

In a board, drag and drop cards to assign the grouping select property.