Basic Concept

Introduction

Notionful is a Notion CMS for Next.js applications. It empowers you to create your own websites, similar to those you see on notion.site, but with a few distinct features:

• You can customize the look of Notion's building blocks
• You can create custom UI blocks within Notion
• You have the flexibility to use both Notion building blocks and custom UI blocks in your landing pages, blog articles, and more.

Let's delve into these:

Customize the Appearance of Notion's Building Blocks

Notion's building blocks consist of all the elements you can use within Notion, including:

Primitive blocks:

• Paragraphs (and variants like bold text)
• Links
• Dividers
• Iframes
• Tables of content
• Columns, etc.

Advanced blocks:

• Databases
• Pages / Database Pages
• Database views

When you publish a page on notion.site, the UI components always look the same, except for light and dark theme switches.

In contrast, Notionful allows you to define how each building block is rendered. For instance, consider a link:

This is an example link

This link was composed in a Notion Page, but its appearance and behavior (try hovering over it) are defined through code, using a React Component.

With Notionful, you can define a UI once and reuse it across various parts of your website (like landing pages, articles, and guides).

Define Custom UI Blocks within Notion

Building modern websites using solely Notion's building blocks can be challenging. Sometimes, we need more sophisticated UI components that can be used across various webpages.

Consider a Hero Component as an example:

With Notionful, you can instruct the system to render this component by providing:

• What to render - this refers to the content definition
• How to render - a reference to a React Component that converts content to HTML

Content Definition

You can define the content with a no-code process. Simply create a database for Hero Components and specify the content it should include:

How to Render

You can render content using a simple React component, like the one below:

What's the result?

Notionful offers significant flexibility. It allows you to combine Notion's building blocks with your custom ones. But how can you make the Hero component render?

Simply use mention feature (@) on [Hero Component] Example Hero component, like below:

Here is the link where you can preview the current definition of the blog post content:

https://www.notion.so/cms-for/Blog-Page-Basic-concept-be0d279fc75042459d7001bf66390b1e?pvs=4