---
schema_version: "1"
id: d6150288f9f5bf8942cdc29bbbb1f7a7eb52399491bb1391f55c6a36b179b008
title: MonacoEditor Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_monacoeditor_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_monacoeditor_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 618c128b0d89dd587a00e17f6c0cd2457fd13d8da654e962bc52e55bb9f02e3f
description: For the managed package runtime, this page contains a MonacoEditor LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# MonacoEditor Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a MonacoEditor LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _MonacoEditor Lightning Web Component_ is a code editor tool used inside Salesforce.

## Available c-monaco-editor Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d137818e66">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d137818e72">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d137818e78">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d137818e84">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d137818e90">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e66 ">
              <p style="margin-bottom:0;">config</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e72 ">
              <p style="margin-bottom:0;">object</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e78 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e84 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e90 ">
              <p style="margin-bottom:0;">Sets the options to create the editor.
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e66 ">
              <p style="margin-bottom:0;">value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e72 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e78 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e84 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e90 ">
              <p style="margin-bottom:0;">Adds default code inside the editor.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e66 ">
              <p style="margin-bottom:0;">height</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e72 ">
              <p style="margin-bottom:0;">css</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e78 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e84 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e90 ">
              <p style="margin-bottom:0;">To adjust the height of the editor, set this value. Supports all css height value
                options such as units (for example, 'px', 'em', an so on) and functions (for
                example, 'calc').</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e66 ">
              <p style="margin-bottom:0;">editor-src-url</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e72 ">
              <p style="margin-bottom:0;">url</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e78 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e84 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e90 ">
              <p style="margin-bottom:0;">Defines the source of the editor. By default, <em>editor-src-url</em> points to the
                static resource. Used for off-platform support.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e66 ">
              <p style="margin-bottom:0;">modal</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e72 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e78 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e84 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e90 ">
              <p style="margin-bottom:0;">Adds support for monaco editor to open in a modal.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-monaco-editor Component

```
<c-monaco-editor
    onchange={valueChnged}
    editor-src-url={url}
    config={editorConfig}
    value="var t = 10"
    height="calc(100vh - 350px)"
></c-monaco-editor>

<!-- Monaco Editor as modal-->
 <c-modal size="large" icon-url={iconUrl}>
    <div slot="header">
      <h1>Monaco Editor</h1>
    </div>
    <div slot="content">
      <c-monaco-editor
        onchange={valueChnged}
        modal="true"
        editor-src-url={url}
        config={editorModalConfig}
        value="var t = 10"
        height="calc(100vh - 350px)"
    ></c-monaco-editor>
    </div>
  </c-modal>
```

## Available Methods

updateConfig(Type,Value)

Updates the editor's configuration settings.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d137818e283">
              <p style="margin-bottom:0;">Option</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d137818e289">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d137818e295">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e283 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e289 ">
              <p style="margin-bottom:0;">vs, vs-dark, hc-black</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e295 ">
              <p style="margin-bottom:0;">Sets the theme for the editor.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e283 ">
              <p style="margin-bottom:0;">language</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e289 ">
              <p style="margin-bottom:0;">html, css, json, typescript</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e295 ">
              <p style="margin-bottom:0;">Sets the language of the editor.
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e283 ">
              <p style="margin-bottom:0;">options</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e289 ">
              <p style="margin-bottom:0;">object</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d137818e295 ">
              <p style="margin-bottom:0;">Sets the editor options such as readOnly.
              </p>
            </td>

          </tr>
        </tbody>
      </table>

```
let editor = this.template.querySelector("c-monaco-editor");
// set theme
editor.updateConfig("theme", "vs");
// set language
editor.updateConfig("language", "html");
// set readOnly
editor.updateConfig("options", { readOnly:true });
```

## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The _MonacoEditor Lightning Web Component_ is a code editor tool used inside Salesforce.

## Available c-monaco-editor Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d137818e406">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d137818e412">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d137818e418">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d137818e424">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d137818e430">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e406 ">
              <p style="margin-bottom:0;">config</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e412 ">
              <p style="margin-bottom:0;">object</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e418 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e424 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e430 ">
              <p style="margin-bottom:0;">Sets the options to create the editor.
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e406 ">
              <p style="margin-bottom:0;">value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e412 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e418 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e424 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e430 ">
              <p style="margin-bottom:0;">Adds default code inside the editor.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e406 ">
              <p style="margin-bottom:0;">height</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e412 ">
              <p style="margin-bottom:0;">css</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e418 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e424 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e430 ">
              <p style="margin-bottom:0;">To adjust the height of the editor, set this value. Supports all css height value
                options such as units (for example, `px', `em', an so on) and functions (for
                example, `calc').</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e406 ">
              <p style="margin-bottom:0;">editor-src-url</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e412 ">
              <p style="margin-bottom:0;">url</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e418 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e424 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e430 ">
              <p style="margin-bottom:0;">Defines the source of the editor. By default, <em>editor-src-url</em> points to the
                static resource. Used for off-platform support.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e406 ">
              <p style="margin-bottom:0;">modal</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e412 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e418 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e424 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e430 ">
              <p style="margin-bottom:0;">Adds support for monaco editor to open in a modal.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-monaco-editor Component

```
<c-monaco-editor
    onchange={valueChnged}
    editor-src-url={url}
    config={editorConfig}
    value="var t == 10"
    height="calc(100vh - 350px)"
></c-monaco-editor>

<!-- Monaco Editor as modal-->
 <c-modal size="large" icon-url={iconUrl}>
    <div slot="header">
      <h1>Monaco Editor</h1>
    </div>
    <div slot="content">
      <c-monaco-editor
        onchange={valueChnged}
        modal="true"
        editor-src-url={url}
        config={editorModalConfig}
        value="var t == 10"
        height="calc(100vh - 350px)"
    ></c-monaco-editor>
    </div>
  </c-modal>
```

## Available Methods

updateConfig(Type,Value)

Updates the editor’s configuration settings.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d137818e623">
              <p style="margin-bottom:0;">Option</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d137818e629">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d137818e635">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e623 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e629 ">
              <p style="margin-bottom:0;">vs, vs-dark, hc-black</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e635 ">
              <p style="margin-bottom:0;">Sets the theme for the editor.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e623 ">
              <p style="margin-bottom:0;">language</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e629 ">
              <p style="margin-bottom:0;">html, css, json, typescript</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e635 ">
              <p style="margin-bottom:0;">Sets the language of the editor.
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Option" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e623 ">
              <p style="margin-bottom:0;">options</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e629 ">
              <p style="margin-bottom:0;">object</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d137818e635 ">
              <p style="margin-bottom:0;">Sets the editor options such as readOnly.
              </p>
            </td>

          </tr>
        </tbody>
      </table>

```
let editor == this.template.querySelector("c-monaco-editor");
// set theme
editor.updateConfig("theme", "vs");
// set language
editor.updateConfig("language", "html");
// set readOnly
editor.updateConfig("options", { readOnly:true });
```