MiniCodeEditor is a reusable JavaScript-based code editor component for OutSystems applications. It integrates CodeMirror to provide a lightweight and interactive coding experience directly inside an OutSystems screen.

The component supports syntax highlighting for multiple programming and markup languages, making it useful for applications that need to display, edit, validate, or manage source code and SQL queries.

Supported Languages

The editor currently supports:

• HTML
• CSS
• JavaScript
• jQuery
• SQL
• XML

Key Features

• Code editing directly within an OutSystems application
• Syntax highlighting
• Line numbers
• Auto indentation
• Dracula theme support
• Dynamic language selection
• Copy code to clipboard
• Create/reset editor content
• Clear editor content
• Download code as a file
• Lightweight and reusable Web Block
• Client-side code editing without server-side processing
  
  
  

• How It Works

  The component uses CodeMirror as the underlying JavaScript editor engine.

  The OutSystems Block provides the UI and communicates with CodeMirror through JavaScript. The original HTML <textarea> is used as the source element, and CodeMirror transforms it into the interactive editor.