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
import '@nvidia-elements/monaco/input/define.js';
<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>
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