SETUP 1. Add the "Code Editor" element to your page and resize it to the desired dimensions. 2. In the element's property panel, set the Language and Theme to match your use case. 3. (Optional) Bind "Default Code" to a field in your database to pre-populate the editor on load. READING THE CODE - Use the element state "Current Code" wherever you need the user's code (e.g. save to DB, send to API). - "Current Code" updates live on every keystroke — no submit button required. ACTIONS (use inside Bubble Workflows) - Set Code → replaces the editor content programmatically (e.g. load from DB, AI response). - Set Language → switch syntax highlighting at runtime. - Set Theme → toggle between dark/light/high-contrast themes. - Format Code → runs the Monaco built-in formatter (works best with JS/TS/JSON). - Insert Text at Cursor → injects a snippet at the current cursor position. - Clear Code → empties the editor. - Toggle Fullscreen → expands the editor to a full-page overlay. Press ESC or the Close button to exit. - Focus Editor → programmatically focuses the editor (useful after page load or modal open). EVENTS - "Code Changed" fires on every keystroke. - "Editor Focused / Blurred" fires when the user clicks in or out. - "Fullscreen Opened / Closed" fires when toggling full-page mode. - "Language Changed" fires when Set Language action runs. TIPS - For a read-only code viewer, set "Read Only" to yes and disable the minimap for a cleaner look. - To auto-save, trigger a backend workflow on the "Code Changed" event with a debounce (e.g. use a 1-second custom state timer). - The editor loads Monaco from jsDelivr CDN on first use — ensure the page has internet access.