NOTION RENDERER

Notion Renderer

Published October 2022

    •    Updated this month

Plugin details

Render fast, read-only Notion pages directly in your app. Display public links or private pages via integration, with Notion-style formatting and responsive layout using only the page URL.

⚡ Main Functions

• Notion page rendering
    Displays Notion pages directly inside your app.
• Public and private page support
    Renders public Notion links and private pages via integration.
• URL-based setup
    Load pages using only the Notion page URL.
• Responsive display
    Adapts to mobile and desktop layouts.

Documentation

We’ve created a detailed step-by-step guide for the Notion Renderer Plugin. It includes a comprehensive overview of all features, practical use cases, and answers to frequently asked questions.

FAQ

What does this plugin do?
It renders fast and accurate read-only Notion pages—both public and private—directly inside your Bubble app.

Can I embed private Notion pages with this plugin?
Yes, private pages can be embedded if the correct access credentials or integration is configured.

Is the rendered content responsive?
Yes, the embedded Notion pages are fully responsive and adapt to different screen sizes.

Can I edit the Notion page inside Bubble?
No, the plugin supports read-only rendering. Editing must be done directly in Notion.

Our Similar Plugins

- Notion-like Rich Text Editor

Support

If you still have questions or unresolved issues, you can contact us.

Risk-free Trial

The most risk-free way to try out this plugin is to subscribe to it. If you unsubscribe a few days later you will be charged on pro-rata basis, so for example if the plugin monthly price is $5 then you’d pay only 17¢ per day ($5/30 days)!

$40

One time • Or $4/mo

3.7 stars   •   3 ratings

36 installs  

This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

Zeroqode - Top Bubble Agency

Joined 2016   •   838 Plugins

View contributor profile

Instructions

Please refer to the plugin documentation to see how to configure it: https://docs.zeroqode.com/plugins/notion-renderer

This plugin allows you to render both 📢 public and 🔑 private notion pages. Rendering a notion page is a two step process that is slightly different depending on if it is a public or private page.

📢 How to render a public page

To render a public page, you first need to run a server action that returns JSON. You can store this JSON in the database or in a state, depending on your use case. This JSON then gets passed into the Notion Renderer element.

1️⃣ Run the 'Render Public Page' server action with a notion page ID as the input. You can find a notion page id at the end of any notion URL.

2️⃣ Store the result of this server action somewhere, in a state or in your database.

3️⃣ On the page where you want to render the notion content, place a 'Notion Renderer' element. Pass in the JSON that you stored in step 2.

🟢 Supported blocks for public pages

Page
Text
Bookmark
Bulleted List
Numbered List
Heading 1
Heading 2
Heading 3
Quote
Callout
Todos
Table Of Contents
Divider
Column
Column List
Toggle
Image
Embed
Video
Figma
Google Maps
Google Drive
Tweet
PDF
Audio
File
Link
Page Link
External Page Link
Collections
Collection View
Collection View Table
Collection View Gallery
Collection View Board
Collection View List

🔑 How to render a private page

1️⃣ Run the 'Render Private Page' server action with a notion page ID as the input. You can find a notion page id at the end of any notion URL. Additionally, pass in a valid notion token to authenticate with the official notion API. You can get a generate a token with your notion account for a given workspace. Using this, you'll be able to access private notion pages to protect your content.
 
2️⃣ Store the result of this server action somewhere, in a state or in your database.

3️⃣ On the page where you want to render the notion content, place a 'Notion Renderer' element. Pass in the JSON that you stored in step 2.

⚠️ Because the notion API is still an early version, the 'Render Public Page' is much more limited than the public one. Basically, the API doesn't support all of the blocks notion has yet. Here is a summary of the known issues.

🔴 Summary of known issues with private pages

image, video, and embed blocks are missing format for proper sizing and layout
image, video, and embed blocks are missing caption
embed blocks don't contain enough info for proper embedding
alias blocks fail for links pointing to other workspaces
rich text mentions fail for links to pages and databases in other workspaces
format toggleable is missing

🟢 Supported blocks for private pages

Text
Heading 1
Heading 2
Heading 3
Bulleted List
Numbered List
Quote
Todos
Toggle
Callout
File
Divider
Table Of Contents
Column List
Column
Audio
Tweet

Types

This plugin can be found under the following types:

Background Services   •   Element   •   Event   •   Action

Resources

Support contact

Documentation

Tutorial

Rating and reviews

Average rating (3.7)

Amazing!

March 3rd, 2023

Didn't know that this was possible. Works great for public notion content that you want to embed in your bubble app.

Perfect tool to make a blog

December 26th, 2022

I was in the midst of building a back-end for my writer to create blog posts when this came out. Instead of it taking me a week or two to hack together a back end for him, I implemented this plugin in an hour and it's been working amazingly. I use it in combination with API Connector to retrieve fields like "Published?" and it's been a fantastic solution for me. The developer was super responsive in helping me with some max-width issues I had at first.

Thank you for the review! 🙌

December 30th, 2022

•

Original reviewer

Nice but useless

November 12th, 2022

The plugin is easy to use, but links inside the Notil blocs don't work, which is a huge limitation, as there is navigation links every were in Notion documents.

Hey - sorry if the plugin set the expectation that you would be able to navigate between notion pages. Something like that would not be possible in the first place. 

This plugin is purely meant to render a single notion page within your app - not let you navigate a notion workspace.

Please reach out to [email protected] for a refund.