An input control for editing JSON, YAML and code with syntax highlighting and validation.
<nve-monaco-input language="typescript" value="console.log('Hello, world!');"></nve-monaco-input>
<script type="module">
const input = document.querySelector("nve-monaco-input");
input.addEventListener("input", () => console.log("input: ", input.value));
input.addEventListener("change", () => console.log("change: ", input.value));
</script>
Installation
<script type="module">
import '@nvidia-elements/monaco/input/define.js';
</script>
<nve-monaco-input language="typescript" value="console.log('Hello, world!');"></nve-monaco-input>
<script type="module">
const input = document.querySelector("nve-monaco-input");
input.addEventListener("input", () => console.log("input: ", input.value));
input.addEventListener("change", () => console.log("change: ", input.value));
</script>
nve api.get nve-monaco-input
Optional Features
Code input with optional features: line numbers, code folding, minimap, and side-by-side layout
<nve-monaco-input
value="console.log('Hello, world!');"
line-numbers="on"
folding
minimap
side-by-side
></nve-monaco-input>
Read Only
Read-only code input for displaying non-editable source code
<nve-monaco-input readonly value="console.log('Hello, world!');"></nve-monaco-input>
Disabled
Disabled code input preventing user interaction
<nve-monaco-input value="console.log('Hello, world!');" disabled></nve-monaco-input>
JSON Schema Validation
JSON input with schema validation that blocks form submission on validation errors
<form id="json-schema-validation-example" nve-layout="column gap:lg">
<nve-control style="width: 100%">
<label>JSON Configuration</label>
<nve-monaco-input nve-control name="config" language="json"></nve-monaco-input>
<nve-control-message>JSON schema validation errors will prevent form submission</nve-control-message>
</nve-control>
<nve-button type="submit">Submit</nve-button>
</form>
<script type="module">
const form = document.querySelector("form#json-schema-validation-example");
const input = form.querySelector("nve-monaco-input");
input.schema = {
type: "object",
properties: {
name: { type: "string", description: "Project name" },
version: { type: "string", pattern: "^\\d+\\.\\d+\\.\\d+$", description: "Semantic version number" },
description: { type: "string", description: "Project description" },
},
required: ["name", "version"],
};
input.value = JSON.stringify(
{
name: "my-app",
version: "1.0.0",
},
null,
2,
);
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(form);
console.log("Form data:", {
config: formData.get("config"),
});
});
</script>
TypeScript Validation
TypeScript input with real-time type checking that blocks form submission on type errors
<form id="typescript-validation-example" nve-layout="column gap:lg">
<nve-control style="width: 100%">
<label>TypeScript Code</label>
<nve-monaco-input nve-control name="code" language="typescript"></nve-monaco-input>
<nve-control-message>TypeScript validation errors will prevent form submission</nve-control-message>
</nve-control>
<nve-button type="submit">Submit</nve-button>
</form>
<script type="module">
const form = document.querySelector("form#typescript-validation-example");
const input = form.querySelector("nve-monaco-input");
input.value = 'const x: number = "string"; // Type error';
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(form);
console.log("Form data:", {
code: formData.get("code"),
});
});
</script>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release Docs Preview API Documentation Fully Themeable
beta Robust unit test coverages Passed API Review Passed Designer VQA Review Included in library package stable No known outstanding AA WCAG issues No known outstanding performance issues Adapts to different screen/container sizes No breaking API changes for at least 90 days