MARKETPLACE
PLUGINS
NOTION STYLE - TEXT EDITOR
Notion Style - Text Editor logo

Notion Style - Text Editor

Published May 2026
   •    Updated May 2026

Plugin details

Notion-Style Block Editor Pro provides a modern, block-based rich text editor for Bubble apps. Built on Editor.js, it integrates natively without requiring complex server setups or external APIs for image hosting.
Core Features:

Slash commands (/) and drag-and-drop functionality for intuitive content creation.

Native image uploads converted directly to Base64 and saved within the JSON output.

Rich inline formatting, including custom text colors, highlight markers, and specific PX font sizes.

Advanced block types: checklists, tables, quotes, toggles, code snippets, alerts, and video embeds.

Built-in PDF export via workflow actions.

Fully customizable UI colors and a Read-Only mode to safely display published content.

Demo Links:

Editor View: https://bubble.io/page?id=lff-plugins&tab=Design&name=notion-style-block-editor&type=page&elements=bTGOu

Live Preview: https://lff-plugins.bubbleapps.io/version-test/notion-style-block-editor

$60

One time  •  Or  $10/mo

stars   •   0 ratings
2 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

Leonardo Franco logo
Leonardo Franco
Joined 2021   •   4 Plugins
View contributor profile

Instructions

1. Setup: Drag and drop the "NotionEditor" element onto your page.
2. Customize UI: Adjust the colors (Icon Color, Menu Background, Text Color) and Border Radius in the properties panel to match your app's branding.

3. Loading Content: Fill the 'initial_content' field with a valid Editor.js JSON or plain text. The editor will automatically render it. Alternatively, use the "Load Data" workflow action to update the content dynamically.

4. Saving Data: Whenever the user modifies the content, the editor updates the exposed state called 'json_output'. Trigger a workflow to save "NotionEditor's json_output" to a text field in your database.

5. Exporting to PDF: Use the "Export PDF" element action in your workflow to download the editor's content as a clean PDF file.

6. Read-Only Mode: Check the 'Read_Only' property box if you only want to display content without allowing the user to edit it.

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Blog   •   Productivity   •   PDF   •   Media   •   Technical   •   Input Forms

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble