Text Styler for Bubble Mobile

✅

Link to plugin page: https://zeroqode.com/plugin/text-styler-for-bubble-mobile-plugin-1749538690441x232226175484953060

Demo to preview the plugin:

✅

Demo page: https://zeroqode-native-demo-01.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=Text Element

✅

Bubble Editor: https://bubble.io/page?version=live&name=Text+Element&id=zeroqode-native-demo-01&tab=Design&type=page

Introduction

The Text Styler for Bubble Mobile plugin is designed to convert BBCode markup into HTML, providing rich text formatting capabilities for Bubble applications. This plugin allows users to create formatted text content using familiar BBCode syntax, which is then automatically converted to proper HTML for display on web pages. The plugin supports a comprehensive range of BBCode tags including text formatting, lists, tables, media embedding, and more.

Prerequisites

No external API accounts or services are required for this plugin. The plugin works natively within your Bubble application with no additional dependencies.

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at:

https://testflight.apple.com/join/4fXUggud

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Setting up the Text Styler for Bubble Mobile plugin is straightforward:

Install the plugin from the Bubble Plugin marketplace.

Add the “Text Element Native” element to your page.

Configure the element properties in the Property Editor.

Input your BBCode formatted text in the “Text BBcode” field.

The plugin will automatically convert the BBCode to HTML and display it.

No additional configuration or API keys are required for this plugin to function properly.

Plugin Element Properties

Element Actions

This plugin does not contain any custom actions. The BBCode to HTML conversion happens automatically when the element is rendered on the page.

Exposed states

Name	Description	Type
HTML	The converted HTML output from the BBCode input. This state contains the processed HTML that is displayed in the element	Text

Element Events

This plugin does not expose any custom events. The conversion from BBCode to HTML happens automatically during the element’s rendering process.

Supported BBCode Tags

The Text Styler for Bubble Mobile plugin supports a comprehensive range of BBCode tags:

Basic Formatting

[b]text[/b] - Bold text

[i]text[/i] - Italic text

[u]text[/u] - Underlined text

[s]text[/s] or [strike]text[/strike] - Strikethrough text

[del]text[/del] - Deleted text

[sup]text[/sup] - Superscript

[sub]text[/sub] - Subscript

Headers

[h1]text[/h1] to [h6]text[/h6] - Header tags

Colors and Fonts

[color=#ff0000]text[/color] - Colored text

[size=14]text[/size] - Font size in pixels

[size=1.2em]text[/size] - Font size in em units

[font=Arial]text[/font] - Font family

Text Alignment

[left]text[/left] - Left aligned text

[center]text[/center] - Center aligned text

[right]text[/right] - Right aligned text

[justify]text[/justify] - Justified text

Links and Media

[url=https://example.com]link text[/url] - Links with custom text

[url]https://example.com[/url] - Direct links

[email=user@example.com]email text[/email] - Email links

[img]image_url[/img] - Images

[img=100x200]image_url[/img] - Images with dimensions

[youtube]video_id_or_url[/youtube] - YouTube videos

[video]video_url[/video] - Video elements

[audio]audio_url[/audio] - Audio elements

Lists

[list][*]item 1[*]item 2[/list] - Unordered lists

[list=1][*]item 1[*]item 2[/list] - Numbered lists

[ul][li]item 1[/li][li]item 2[/li][/ul] - HTML-style unordered lists

[ol][li]item 1[/li][li]item 2[/li][/ol] - HTML-style ordered lists

Tables

[table][tr][th]header[/th][/tr][tr][td]cell[/td][/tr][/table] - Tables with headers and cells

Code and Quotes

[code]code here[/code] - Code blocks

[php]php code[/php] - PHP code blocks

[html]html code[/html] - HTML code blocks

[css]css code[/css] - CSS code blocks

[js]javascript code[/js] - JavaScript code blocks

[quote]quoted text[/quote] - Quote blocks

[quote=author]quoted text[/quote] - Quote blocks with attribution

Special Elements

[spoiler]hidden text[/spoiler] - Collapsible spoiler sections

[spoiler=title]hidden text[/spoiler] - Spoilers with custom titles

[hr] - Horizontal rule

[br] - Line break

[nbsp] - Non-breaking space

Emoticons

:smile: → 😊

:sad: → 😢

:wink: → 😉

:laugh: → 😂

:cool: → 😎

:love: → 😍

:angry: → 😠

:surprised: → 😲

Workflow example

Here’s a basic workflow for using the Text Styler for Bubble Mobile plugin:

Step 1: Add the Element

In your Bubble editor, drag the “Text Element Native” element onto your page.

Position and size the element as needed.

Step 2: Input BBCode Content

In the Property Editor, locate the “Text BBcode” field.

Enter your BBCode formatted text, for example:

plain text
[b]Welcome to our site![/b]

[i]This is italic text[/i] and [u]this is underlined[/u].

[color=red]This text is red[/color] and [size=20]this text is large[/size].

[list]
[*]First item
[*]Second item
[*]Third item
[/list]

[url=https://bubble.io]Visit Bubble[/url]

Step 3: Preview and Test

Preview your page to see the converted HTML output.

The BBCode will be automatically converted to properly formatted HTML.

Use the “HTML” state if you need to access the converted HTML in workflows.

Step 4: Dynamic Content

You can also use dynamic content in the “Text BBcode” field: 1. Click the “Insert dynamic data” button in the BBcode field. 2. Select your data source (e.g., a database field containing BBCode). 3. The plugin will convert the dynamic BBCode content in real-time.