The Keyword Text Highlighter plugin allows you to dynamically search and highlight keywords inside text on your Bubble app - similar to the Ctrl + F search functionality in browsers.
As of version 1.2.0, the plugin also supports highlighting text inside Input and Multiline Input fields, making it even more versatile for search, text editing, or educational apps.
With this plugin, you can specify the keyword to search for, whether the search should be case-sensitive, and fully customize the highlight appearance with text color, background color, and bold styling.
Key Features
Dynamic Keyword Search – Highlight any word or phrase in real-time, replicating a browser-like search.
Input & Multiline Support – Highlight keywords inside standard text elements, input fields, or multiline inputs.
Customizable Highlight Styling – Choose highlight text color, background color, and bold emphasis.
Case Sensitivity Control – Define if searches are case-sensitive or case-insensitive.
Workflow-Driven – Trigger highlights directly from Bubble workflows with full parameter control.
Seamless Integration – Simple setup, no custom code required.
Versatile Use Cases – Perfect for search tools, text analyzers, educational platforms, or productivity apps.
Prerequisite(s)
Before using the plugin, make sure you have:
A Bubble application set up and accessible.
ID Attributes enabled in your app’s General Settings (required to target elements).
The Keyword Text Highlighter plugin installed from the Bubble Plugin Marketplace.
How to setup
Step 1. Install the Plugin
Open your Bubble Editor.
From the left panel, go to the Plugins tab.
Click Add Plugins.
Use the search bar to type Keyword Text Highlighter.
When it appears, click Install (or Buy if it’s a paid plan).
Once installed, you’ll see the Keyword Text Highlighter plugin under Installed Plugins.
Step 2. Add the Plugin Element
Navigate to your page’s Design tab.
Search and drag the Keyword Text Highlighter element onto the page.
Assign an Element ID to the text, Input, or Multiline Input you want to highlight.
Make sure the target text or input field has a unique ID — this is how the plugin knows which element to modify.
Step 3. Configure the Highlight Action
Go to the Workflow tab.
Create an event — for example, when a Button is clicked (“Button Highlight”).
Add a new action → select the Keyword Text Highlighter → Highlight action.
Configure the plugin properties as follows:
Title
Description
Element ID
The ID of the element whose content should be scanned for keywords.
Keyword
One or more words or dynamic values to search for (separate by commas).
Text Color
The color for the highlighted text (supports HEX and RGB).
Background
The color of the highlight background.
Bold
Enables or disables bold formatting for matched words.
Ignore Case
If checked, the search will not be case-sensitive.
Whole Word
If enabled, only full word matches will be highlighted (no partial matches).
Step 4. Preview and test
Click Preview in your Bubble Editor.
The defined keywords will be automatically detected and visually highlighted.
Adjust color contrast and bold settings for better readability.
Plugin Element - Keyword Text Highlighter
💡
This element isn’t required to use this plugin.
Plugin Actions
Highlight
Use this to apply highlight styling inside a Text element or a standard Input (single line).
Title
Description
Type
Element ID
The ID Attribute of the element to scan and decorate.
Text — e.g., articleText, searchInput
Keyword
Term(s) to highlight. You can pass a single word, phrase, or comma-separated list. Supports dynamic expressions.
Text — policy, risk score, aml, kyc, bvn
Text Color
CSS color for the letters of matched terms.
Color — #111111, rgb(255,255,255)
Background
CSS color for the highlight background.
Color — #FFE58F, rgba(255,229,143,0.9)
Bold
Emphasize matched terms with bold style.
Yes/No
Ignore Case
Case-insensitive matching when yes.
Yes/No
Whole Word
Match whole words only (no partials) when yes.
Yes/No
Highlight – MultiLineInput
Use this to highlight user-typed content inside a Multiline Input.
Field
Description
Type
Element ID
ID Attribute of the source Multiline Input.
Text — notesInput
Output Text Element ID
ID Attribute of the destination element that will show the highlighted HTML (usually a Text element set to “Rich text / Interpret as HTML”).
Text — notesPreview
Keyword
Term(s) to highlight, single or comma-separated.
Text — important, todo, fix
Text Color
Color for matched letters.
Color
Background
Color for highlight background.
Color
Bold
Bold emphasis toggle.
Checkbox (yes/no)
Ignore Case
Case-insensitive matching.
Checkbox (yes/no)
Whole Word
Whole-word matching only.
Checkbox (yes/no)
Highlight – Reset
Removes all highlights previously applied to a target element and restores the original text.
Field
What it does
Type / Examples
Element ID
The ID Attribute of the element to clear.
Text — articleText, notesPreview
Changelogs
Update 03.09.25 - Version 1.10.0
Fixed "Highlight" and "Highlight - reset" actions.
