Code Editor logo

Code Editor

Published November 2020
   •    Updated today

Plugin details

󠁻󠁻󠁻󠁻󠁻󠁻󠁻󠁻A quick and easy way to add an embedded HTML, CSS, or Javascript code editor to your app.
🔗  Example in run mode (with link to editor):
https://codeeditor.bubbleapps.io/version-test

https://bubble.io/page?version=test&type=page&name=index&id=codeeditor&tab=tabs-1

📆  We pride ourselves in providing excellent support - if you reach out, we respond within one business day!  

*If you want to try the plugin: subscriptions are pro-rated so giving it a try is low-risk — subscribing to the plugin for a couple of days will cost you a matter of pennies

This plugin contains the following key features:

1 - Set mode as "Mixed HTML/CSS" or "Javascript"
2 - Turn on/off Read-Only
3 - Turn on/off Line Wrapping
4 - Publish the code editor's value (via workflow action)
5 - Professional theme and colors for formatted code


Other popular plugins from Techblocks:

  • 📊 Premium Charts Bundle - Chart JS
  • ▶️ Video Player Bundle
  • 📄 PDF Generator
  • 🎨 FabricJS: Drawing & Painting Canvas
  • ✅ Toggles - Beautiful and Custom
  • $70

    One time  •  Or  $6/mo

    3.7 stars   •   3 ratings
    9.1K installs
    This plugin does not collect or track your personal data.

    Contributor details

    TechBlocks logo
    TechBlocks
    Joined 2017   •   21 Plugins
    View contributor profile

    Instructions

    💻  We highly encourage you to take a look at the editor page for the demo, where you can see how the Code Editor is set up.
    🔗  Here's the demo (with link to editor): https://codeeditor.bubbleapps.io/version-test

    If you have any questions, don't hesitate to reach out to our team via the support URL or support@techblocksco.com. We are very responsive!  (See support thread here: https://forum.bubble.io/t/new-plugin-code-editor/124860).

    🔗  Dedicated instructions link: https://docs.techblocksco.com/?tab=Code-Editor


    --------------------- Instructions ------------------------

    1. Install the Code Editor plugin and place the Code Editor element on your page

    2. Set the initial content and customizations on the Code Editor visual element properties

    3. Optional: use the workflow action called "Set Code Editor Value" to set the value of the Code Editor if needed

    4. When the code in the editor is ready to export, use the "Publish Editor Value" workflow action

    5. When the editor value is ready, an event called "Code Editor Value Published" -- you can use this event to save to your database (or whatever you'd like to do with the code). The value is saved as the state called "Value" on the Code Editor element.

    Types

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

    Categories

    This plugin can be found under the following categories:
    Technical   •   Media   •   Containers   •   Visual Elements

    Resources

    Support contact
    Tutorial
    Forum

    Rating and reviews

    Average rating (3.7)
    Responsive developer!
    March 12th, 2024
    Had a few changes we needed to be made to the plugin and Alex was quick to help us get those changes made, really great plugin and great dev team behind it
    Not dynamic
    July 24th, 2023
    Initial value can't be dynamic (no refresh)
    Good plug-in but it need update...
    June 11th, 2022
    Must: 1. Update to the new responsive engine 2. Add a placeholder Not MUST: 3. add python
    Bubble
    Bubble has acquired Flusk, the most advanced no-code security tool.
    Learn more