Embeddable Code Editor/Previewer

Husnain Ahmed

Last Update il y a 2 ans

Description

🔗 Demo page: https://chakor-plugin-demo-2.bubbleapps.io/version-test/code_editor
🔗 Editor link: https://bubble.io/page?id=chakor-plugin-demo-2&test_plugin=1728315296630x318164891094482940_current&tab=tabs-1&name=code_editor&type=page

Enhance your Bubble app with this intuitive embeddable code editor! Users can edit and preview code in real time, perfect for educational tools or interactive coding experiences.


Key Features:

  • Real-Time Preview: 🖊 Users can edit their code and see a live preview immediately.
  • Multiple Language Modes: 🌐 Supports four programming languages: JavaScript, CSS, HTML Mixed, and Python.
  • Read-Only Mode: 🔒 Allow users to view code without making edits for demonstrations or tutorials.
  • Customizable Themes: 🎨 Choose from various themes to create a visually appealing coding environment.
  • Tab Size Customization: 📏 Adjust the tab size for indentation according to user preference.
  • Show/Hide Line Numbers: 🔢 Toggle line numbers on or off for a cleaner interface or improved readability.

Instructions

  1. Install: Add the plugin from the Bubble Marketplace. 🛒
  2. Place on Page: Drag and drop the Code Editor element onto your page. 📝
  3. Configure Editor: Select the desired language mode, theme, and customization options (tab size, line numbers). ⚙
  4. Set Up Preview: Link the editor to the preview section for users to see their edits in real time. 👁️
  5. Test: Preview your design and functionality to ensure everything works smoothly. ✅

Was this article helpful?

0 out of 0 liked this article