Advanced Code Editor+ #darkmode

✅

Link to the plugin page:

https://zeroqode.com/plugin/advanced-code-editor+-darkmode-plugin-for-bubble-1709851493997x360625399770800450

Demo to preview the plugin:

✅

Live Demo:

https://timsupport.bubbleapps.io/advanced_code_editor?utm_source=docs&utm_medium=referral&utm_campaign=demo_link

✅

Bubble Editor:

https://bubble.io/page?version=live&id=timsupport&name=advanced_code_editor&tab=tabs-1

Introduction

The Advanced Code Editor+ #darkmode plugin offers a powerful, customizable code editing interface for Bubble applications. It provides light/dark themes, syntax highlighting for 10+ languages, read-only mode, dynamic configuration, and download support, making it ideal for:

developer tools

code-learning platforms

admin dashboards

dynamic script editors

apps requiring user-generated or editable code

The editor is highly flexible and integrates seamlessly into both simple and advanced Bubble workflows.

Key Features

Prerequisites

Before using the Advanced Code Editor+ #darkmode plugin, ensure the following:

Active Bubble account & editor access

Required to install the plugin and configure elements.

Basic familiarity with Bubble workflows

Needed to dynamically set code content, themes, languages, and trigger actions like download or reset.

Dynamic data readiness (optional)

Useful if you plan to load code from inputs, databases, or API responses.

File download enabled

Required to use the Download File action for exporting code.

Responsive page layout (recommended)

Ensures the editor scales correctly across desktop and mobile views

Property	Description
Language from Dropdown	Select the programming language for syntax highlighting.
Dynamic Language	Dynamically set the language (e.g., `JavaScript`, `Python`, `SQL`).
Read Only?	Enable to prevent users from editing the code.
Font Size	Controls the font size in pixels.
Highlight Active Line?	Highlights the line where the cursor currently is.
Default Value	Sets the initial code displayed when the editor loads.
Theme from Dropdown	Choose the editor theme (light or dark).
Theme Dynamically	Set theme dynamically via workflow.
Line Height	Adjust the spacing between lines.
Fit to Content	Automatically adjusts editor height to fit code at initialization.
Dynamic Resizing	Allows the editor to resize height dynamically as content changes.

Field	Value
Element	`AdvancedCodeEditor(testing) A`
File Name	`my_file` (or any filename you want)

Field	Value
Element	`AdvancedCodeEditor(testing) A`

Title	Description	Type
Language from Dropdown	Select the programming language for syntax highlighting.	Dropdown
Dynamic language	Dynamically set the language (e.g., `JavaScript`, `Python`, `SQL`).	Text
Read only?	Enable to prevent users from editing the code.	Checkbox
Font Size	Controls the font size in pixels.	Number
Highlight Active Line?	Highlights the line where the cursor currently is.	Checkbox
Default Value	Sets the initial code displayed when the editor loads.	Text
Theme from dropdown	Choose the editor theme (light or dark).	Dropdown
Theme dynamically	Set theme dynamically via workflow.	Text
Line Height	Adjust the spacing between lines.	Number
Fit to Content	Automatically adjusts editor height to fit code at initialization.	Checkbox
Dynamic resizing	Allows the editor to resize height dynamically as content changes.	Checkbox

Title	Description	Type
Font Size	The new font size for the editor (in px).	Number

State	Description	Type
Is read only?	Indicates whether the editor is in read-only mode.	Yes/No
Current Value	Returns the current code inside the editor.	Text
Current Row	Returns the active cursor row.	Number
Current Column	Returns the active cursor column.	Number
Current Language	Returns the currently selected language.	Text
Theme	Returns the currently active theme.	Text
Current Language Extension	Returns the file extension for the selected language.	Text

Title	Description	Type
Theme from Dropdown	Choose a theme for the Code Editor. Available options: Chrome, Twilight, Eclipse, Terminal, SQLServer, Monokai, Ambiance, Dracula, Cobalt, Tomorrow night, Textmate	Dropdown (optional)
	Or define it dynamically
Theme dynamically	Choose a dynamic value for the Theme of the Editor. Can be one of the following : Chrome, Twilight, Eclipse, Terminal, SQLServer, Monokai ,Ambiance, Dracula, Cobalt, Tomorrow night, Textmate	Text (optional)

Title	Description	Type
Language	Can be one of those : C/C++, HTML, Java, JSON, Javascript, CSS, SCSS, R, Python, SQL, PHP	Text (optional)
	You can also choose from this dropdown
Language	Choose the language you want from this dropdown. Available options: C/C++, CSS, HTML, Java, Javascript, JSON, PHP, Python, R, SCSS, SQL	Dropdown (optional)

Advanced Code Editor+ #darkmode

Demo to preview the plugin:

Introduction

Prerequisites

How to Set Up

Step 1. Install the Plugin

Step 2. Add the Element to Your Page

Step 3. Configure the Element Properties

Step 4. Use the Plugin in Workflows & Dynamic Expressions

Example 1: Download the Code When the “Download” Button Is Clicked

Example 2: Reset the Code Editor When the “Reset” Button Is Clicked

Step 5. Preview & Test

Plugin Element - Advanced Code Editor

Fields

Element Actions

Exposed States

Changelogs

Update 22.07.25 - Version 1.17.0

Update 02.07.25 - Version 1.16.0

Update 09.06.25 - Version 1.15.0

Update 19.11.24 - Version 1.14.0

Update 19.07.24 - Version 1.13.0

Update 31.05.24 - Version 1.12.0

Update 17.05.24 - Version 1.11.0

Update 11.04.24 - Version 1.10.0

Update 08.03.24 - Version 1.9.0

Update 08.12.23 - Version 1.8.5

Update 10.08.23 - Version 1.8.4

Update 03.08.23 - Version 1.8.3

Update 29.07.23 - Version 1.8.2

Update 10.05.23 - Version 1.8.1

Update 30.04.23 - Version 1.8.0

Update 19.04.23 - Version 1.7.0

Update 11.04.23 - Version 1.6.2

Update 02.03.23 - Version 1.6.1

Update 12.08.22 - Version 1.6.0

Update 12.08.22 - Version 1.5.0

Update 12.08.22 - Version 1.4.1

Update 12.08.22 - Version 1.4.0

Update 12.08.22 - Version 1.3.4

Update 08.08.22 - Version 1.3.3

Update 24.07.22 - Version 1.3.2

Update 03.07.22 - Version 1.3.1

Update 02.07.22 - Version 1.3.0

Update 26.06.22 - Version 1.2.0

Update 26.06.22 - Version 1.1.1

Update 25.06.22 - Version 1.1.0

Update 22.06.22 - Version 1.0.2

Update 21.06.22 - Version 1.0.1

Update 15.06.22 - Version 1.0.0