Ryan Cao 

Notion in Web Development

2 min
Warning

This article likely contains outdated information, as it is around 5 years old.

If you hadn’t heard of it, Notion is a wonderful workspace that allows you to take notes, create wikis, manage databases (Airtable-style, not Postgres-style), etc. It’s a great service that’s quickly growing, and in this article, we are going to talk about how Notion can be used in web development.

1. Content Management System

#

A content management system is a system where you manage your content. They are typically used for managing stuff like blog posts, marketing pages, etc. and also can be used for little things like links in the headers or footers, etc.

Notion can be used as a CMS (and a really wonderful one!) because of its unique database structure. For instance, when you create a table, there are items in that table. You can add data via attributes to these items. However, you can also write content inside the item as a page, since everything in Notion is a page. Thus, you have the familiar “Frontmatter + Content” content format that we have in markdown.

If you have a posts database, therefore, you can have attributes such as category or date or slug, and the content being written directly into the Notion page.

Another benefit is that Notion is a rich text editor rather than a plain text one, meaning that the process of writing the content feels much better and is much more fluid. In addition, components can augment the experience for writer and reader alike.

Projects such as notion-api-worker and react-notion make it incredibly easy to use your Notion content in your applications and websites. In addition, Notion’s Content API is currently in private beta, and we can expect to have a much better experience managing content with it later on!

2. To-do list / Kanban

#

Notion databases are not only tables. There are also different views like Kanban and just a simple todo list in a page, which makes for excellent project progress tracking, issue trackers, etc. This can create an experience similar to Maintainers or GitHub projects.

This can be used wonderfully, with custom attributes being tailored to your own needs.

3. Database

#

Just like Airtable, Notion can be used as a no-code solution for a database. Just create a new table and use whatever you want, and then use the unofficial Notion private API or the Content API to fetch that data and funnel it into your static site generator or server-rendered templates.

For instance, you can manage the projects listed on your personal website in a Notion table with attributes like href or category or date. Then, you can fetch that data and run it through your Eleventy or Next.js or something else.

I hope you enjoyed reading this article!

Tagged web, notion

308 reads

Licensed under CC BY-NC-SA 4.0

← Previous A Complete Guide to Rewrites on the Web Nov 26, 2020 Next → The Web Renaissance Aug 5, 2021