Built an html structure from the result of the request made on notion API.
On the left the notion page, on the right your website.
You can use this beautiful style made by Sreeram Venkitesh or use your own.
npm install notion-rendering
| Feature | Supported | Description |
|---|---|---|
| Headings | ✔️ | |
| Text With Decorations | ✔️ | |
| Code | ❌ | |
| Quote | ✔️ | |
| Links | ✔️ | |
| Image | ✔️ | |
| Youtube Videos | ✔️ | |
| Math Equations | ❌ | |
| To-do | ❌ | |
| Checkbox | ❌ | |
| Bulleted Lists | ❌ | |
| Numbered Lists | ❌ | |
| Toggle Lists | ❌ | |
| Divider | ❌ | |
| Callout | ❌ | |
| Nested blocks | ❌ |
import axios from 'axios';
import { buildHtml } from 'notion-rendering';
// 1. Make your request to get your notion page data
// 2. Use the buildHtml function to get html from the notion data
const config: any = {
method: 'get',
url: 'https://api.notion.com/v1/blocks/{yourNotionPageId}/children',
headers: {
'Notion-Version': '2021-08-16',
'Authorization': 'Bearer yourToken'
}
};
// Reference of an html element
const div = document.querySelector('#wrapper');
axios(config)
.then(function (response: any) {
// first parameter : reference of an html element in your DOM
// second parameter : notion data you want to put in it
buildHtml(div, response.data);
})
.catch(function (error: any) {
console.log(error)
});