PowerShell Universal
Ironman SoftwareForums
v2
v2
  • About
  • Get Started
  • Additional Resources
  • Installation
    • Docker
    • Upgrading
  • Licensing
  • System Requirements
  • Supported Browsers
  • Cmdlet Help
  • Templates
  • API
    • About
    • Endpoints
    • Security
    • Error Handling
    • Rate Limiting
  • Automation
    • About Automation
    • Scripts
      • Parameters
    • Jobs
    • Schedules
    • Terminals
    • Triggers
  • User Interfaces
    • About
    • Dashboards
      • Building Dashboards
      • Components
        • Dashboards
        • Pages
        • Dynamic Regions
        • Element
        • Error Boundary
        • HTML
        • Building Custom Components
        • Data Display
          • Alert
          • Chip
          • Date and Time
          • Icon
          • List
          • Table
          • Tree View
          • Typography
        • Data Visualization
          • Charts
          • Map
        • Feedback
          • Backdrop
          • Modal
          • Progress
          • Skeleton
        • Inputs
          • Autocomplete
          • Button
          • Checkbox
          • Code Editor
          • Date Picker
          • Editor
          • Floating Action Button
          • Form
          • Radio
          • Select
          • Slider
          • Switch
          • Textbox
          • Time Picker
          • Transfer List
          • Upload
        • Navigation
          • Drawer
          • Link
          • Menu
          • Stepper
          • Tabs
        • Layout
          • Grid Layout
          • Grid
          • Hidden
        • Utilities
          • Transitions
        • Surfaces
          • AppBar
          • Card
          • Paper
          • Expansion Panel
      • Interaction
      • Marketplace
      • Role Based Access
      • Scheduled Endpoints
      • Sessions
      • Themes
        • Cascading Style Sheets
        • Styles
      • Custom Variable Scopes
      • Migrating From Universal Dashboard 2.9
    • Pages
      • Alerts
      • Bar Chart
      • Button
      • Form
      • iFrame
      • Image
      • Line Chart
      • Liquid Chart
      • Paragraph
      • Statistic
      • Table
      • Variables
  • Platform
    • Cache
    • Desktop Mode
      • Hotkeys
    • Modules
    • Monitoring
    • Published Folders
    • Templates
    • Variables
  • Configuration
    • About
    • API
    • Environments
    • Git
    • Hosting
      • Azure
      • IIS
      • Single-File
    • Login Page
    • Management API
    • Settings
    • Security
      • Access Controls
      • App Tokens
      • Client Certificate
      • OpenID Connect
      • SAML2
      • WS-Federation
    • Repository
    • Running as a Service Account
  • Development
    • Debugging Scripts
    • Editor
    • Hangfire
    • Logging
    • Profiling
    • Visual Studio Code Extension
  • Changelog
  • Extension Changelog
  • Legacy Universal Dashboard Docs
Powered by GitBook

Copyright 2025 Ironman Software

On this page
  • Creating a Code Editor
  • Populating Code
  • Retrieving code from another component
  • Setting code from another component
  • Options

Was this helpful?

  1. User Interfaces
  2. Dashboards
  3. Components
  4. Inputs

Code Editor

Code editor component for Universal Dashboard.

PreviousCheckboxNextDate Picker

Last updated 4 years ago

Was this helpful?

To use a code editor within your dashboard, you will need to add the UniversalDashboard.CodeEditor component.

The code editor component allows you to host the editor within your dashboards.

Creating a Code Editor

You can create a new code editor with the New-UDCodeEditor cmdlet. Specifying the -Language parameter will enable syntax highlighting for that language. You will need to specify a height in pixels.

New-UDCodeEditor -Height '500' -Language 'powershell'

Populating Code

Use the -Code parameter to specify code that will be populated within the code editor when it loads.

New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!'

Retrieving code from another component

You can retrieve code from another component using the Get-UDElement cmdlet and accessing the code property of the hashtable that is returned.

New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!' -Id 'editor'

New-UDButton -Text 'Get Code' -OnClick {
    Show-UDToast -Message (Get-UDElement -id 'editor').Code
}

Setting code from another component

You can set code from another component using the Set-UDElement cmdlet. Specify the code value in a hashtable passed to the -Properties parameter.

New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!' -Id 'editor'

New-UDButton -Text 'Get Code' -OnClick {
    Set-UDElement -Id 'editor' -Properties @{
        code = "# Hello!"
    }
}

Options

The documentation is for an upcoming feature of PowerShell Universal .

The Monaco editor supports a wide range of options. If you wish to use options that aren't available on the New-UDCodeEditor cmdlet, you can use the -Options parameter and pass a hashtable of options instead.

New-UDCodeEditor -Language powershell -Height 100 -Options @{ fontSize = 10 }

For a full list of options, check the interface.

IEditorConsturctionOptions
Microsoft Monaco
Learn more about adding custom component libraries