Overview

MiniCodeEditor is a reusable code editor component for OutSystems 11 (O11) applications, powered by CodeMirror.

It provides an interactive editor with syntax highlighting, line numbers, language selection, and common code-editing actions. The component can be embedded into any OutSystems screen where users need to create, edit, copy, clear, or download code.

Features

• Syntax highlighting
• Line numbers
• Multiple language support
• Language selection
• New code
• Clear editor
• Copy code to clipboard
• Download code as a file
• Dracula theme support
• Responsive editor layout
• Reusable OutSystems Web Block
• Client-side code editing
  
  
  

• Supported Languages

  The component currently supports:

  Language	File Extension
  HTML	.html
  CSS	.css
  JavaScript	.js
  jQuery	.js
  SQL	.sql
  XML	.xml

  
  
  

• Installation

  1. Add the MiniCodeEditor component

  Import the provided .oml file into your OutSystems 11 environment.

  After importing, the component will be available as a reusable Block.

  2. Add the Block

  Open the application where you want to use the editor.

  From the Interface → UI Flows, drag the:

  MiniCodeEditor

  Block onto your screen.

• Using the Editor

  Once the Web Block is placed on the screen, the editor is ready for code editing.

  The user can:

  1. Select a language.
  2. Enter or modify code.
  3. Change the syntax-highlighting mode.
  4. Copy the code.
  5. Clear the editor.
  6. Create new/default content.
  7. Download the code as a file.