Notion Presso

DocsTutorialContributingShowcaseBlogGithub
DiscordX

getting-started > Project Introduction

Introduction to Notionpresso Project

What is Notionpresso?

Notionpresso is a tool that allows you to easily bring Notion's powerful content creation capabilities to your website. This library enables you to render content created in Notion directly on your React-based website. It's a "magic potion" for both developers and content creators - allowing developers to quickly produce results and providing content creators with a convenient management tool. ✨

Key Features and Provided Value

🛠️ React Rendering of Notion Data

You can easily convert various content from Notion such as text, images, lists, code blocks, etc., into React components. Notion pages are reborn on the web with the following structure:

import { Notion, type NotionPageData } from 'Notionpresso';


interface NotionPageProps {
pageData: NotionPageData;
}




function NotionPage({ pageData }: NotionPageProps) {
return (
<Notion>
<Notion.Cover src={pageData.cover} />
<Notion.Body>
<Notion.Title title={pageData.title} />
<Notion.Blocks blocks={pageData.blocks} />
</Notion.Body>
</Notion>
);
}

function NotionPage({ pageData }: NotionPageProps) {
return (
<Notion>
<Notion.Cover src={pageData.cover} />
<Notion.Body>
<Notion.Title title={pageData.title} />
<Notion.Blocks blocks={pageData.blocks} />
</Notion.Body>
</Notion>
);
}

In this example, the NotionPageData type defines the data structure of a Notion page. This allows you to use TypeScript's type checking feature to write more stable code.

🎨 Freedom of Customization

You can easily change themes by just tweaking CSS, or partially modify the provided components to customize only the parts you need. You can even create completely new components and combine them with Notionpresso. It offers unlimited possibilities for developers who handle code.

🚀 Rapid Site Construction

You can easily extract Notion data using the @notionpresso/cli CLI and quickly build static sites through frameworks like Next.js. The process of building a site with just a few commands feels like a website is completed right from the text.

npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY

When you run @notionpresso/cli, Notion data is extracted into the following folder structure:

my-notion-project/
├── notion-data/
│   ├── page-slug-1.json
│   ├── page-slug-2.json
│   └── ...
└── public/
    └── images/
        ├── page-slug-1/
        │   ├── image1.png
        │   └── image2.jpg
        ├── page-slug-2/
        │   └── image1.png
        └── ...
  • notion-data/: The content of each Notion page is stored in JSON format. The file name is generated based on the page's slug.
  • public/images/: Images used in Notion pages are stored and categorized by each page.

The extracted data can be easily integrated with Notionpresso components, allowing you to quickly convert Notion content into a website. By simply passing the content of the JSON file to React components, the structure and style of the Notion page are reflected directly on the website.

Target Users and Their Potential Applications

Developers

Developers are given the freedom to easily render and customize content created in Notion on websites. If you want to build a website quickly or style it as you want beyond the limitations of commercial services, Notionpresso is the answer.

Designers and Creators

You can directly reflect content written in Notion on the web, allowing you to quickly update content while maintaining design consistency.

Potential Use Cases

  • Personal Blog: Easily write posts in Notion and automatically reflect them on your website.
  • Company Introduction and Recruitment Pages: Quickly update company profiles or recruitment information using Notion.
  • Portfolio Sites: Easily update projects and works, making portfolio management much easier.

Why Choose Notionpresso

  1. Developer-Centric Customization: You can modify even the finest details that can't be touched in other commercial services. The infinite possibilities through code - this is the charm of Notionpresso.

  2. Freedom of Open Source: Everything is transparent and can be handled directly by you. If needed, you can modify the code and self-host the project on your own server, eliminating cost burdens.

  3. Quick Results and High Efficiency: You can write content in Notion and use it directly on your website with simple settings. The process of content creation and deployment is further simplified.

Notionpresso is the bridge that turns your Notion pages into amazing websites. No more complicated setups, start right from Notion now!

Quick Start Guide