notion-html-blocks

notion-html-blocks is a zero-dependency library capable of rendering blocks from the Notion API into HTML.
Through the use of the Notion SDK for JavaScript it's possible to
extract specific page blocks which then can be converted into HTML.

$3

Its could be useful when you want to use Notion like CMS for your project

$3

`javascript
import { renderBlocks } from 'notion-html-block'

// use notion SDK to get blocks
const pageBlocks = await notion.blocks.children.list({ block_id: id });

// retrieve nested blocks
for (const block of pageBlocks.results) {
if (block.has_children) {
block.children = await getPageBlocks(block.id);
}
}

// get html for blocks list
const content = renderBlocks(pageBlocks.results);
`

Example output for toggleable heading block:

`html



`

Also, it's possible to render one certain block:

`javascript
const block = {
"object": "block",
"type": "paragraph",
"paragraph": {
"rich_text": [
//...
],
}
//...
};

const content = renderBlock(block)
`


$3

Generate static files for your static site generator:
`javascript
import fs from "fs";
const content = renderBlocks(blocks);

fs.writeFile('./blocks.html', content)
fs.writeFile('./blocks.json', JSON.stringify({blocks: content}))
`

If you need to insert output HTML to DOM, you cna use DOMParser:
`javascript
const parser = new DOMParser();

const html = parser.parseFromString(

, 'text/html');
const content = html.getElementById("my-content")
document.body.append(content);
`
or