Native Rich Text Editor Styles - Free Plugin to Fully Customize Bubble's Rich Text Editor

Showcase Plugins
1

Hey Bubblers!

I’m excited to share a free plugin I just developed that solves a frustrating limitation in Bubble: the inability to style the native Rich Text Editor.

https://bubble.io/plugin/native-rich-text-editor-styles-1745156475660x121295404387794940

The Problem

Bubble’s native rich text editor works great, but there’s no built-in way to customize its styling to match your app’s design. The default styling can clash with your carefully crafted UI/UX.

The Solution

The “Native Rich Text Editor Styles” plugin lets you completely customize how Bubble’s rich text editor looks and behaves. This is done entirely through custom CSS and JavaScript - no hacky workarounds!

What You Can Customize:

  • Fonts: Use any Google Font for both body text and headings
  • Colors: Set custom colors for text, links, and placeholders
  • Spacing: Adjust padding and line height
  • Sizing: Control font sizes for normal text and all heading levels
  • Font Weights: Specify different weights for body text and headings
  • Toolbar: Customize the toolbar background color

Installation & Setup

  1. Install the plugin from the Bubble plugin marketplace
  2. Add the plugin to your app
  3. In the plugin settings, configure your preferred styles:
  • Body font type (e.g., “Inter”)
  • Headers font type (e.g., “DM Serif Display”)
  • Font color (HEX)
  • Link color (HEX)
  • Placeholder text color (HEX)
  • Font size (number)
  • Small/Large/Huge text sizes (numbers)
  • Body font weight (number)
  • Headings font weight (number)
  • Line height (number)
  • Horizontal/Vertical padding (numbers)
  • Toolbar background color (HEX)

Technical Details

The plugin works by applying custom styles to Bubble’s Quill-based rich text editor. It also injects custom fonts into the editor’s font dropdown, ensuring a seamless editing experience.

Limitations

  • The styling only affects the editor itself, not the rendered output in your app pages
  • For fonts, Google Fonts are recommended since Bubble already imports them

This plugin was created based on community feedback and developed with help from Claude AI to make it as robust as possible. Feel free to reach out with questions, feedback, or feature requests!

Enjoy styling your rich text editors! :artist_palette::writing_hand: