An input control for editing diffs for JSON, YAML and code with syntax highlighting and validation.
<nve-monaco-diff-input
language="typescript"
original="console.log('Hello, World!');"
value="console.log('Hello, world!');"
></nve-monaco-diff-input>
<script type="module">
const input = document.querySelector("nve-monaco-diff-input");
input.addEventListener("input", () => console.log("input: ", input.value));
input.addEventListener("change", () => console.log("change: ", input.value));
</script>
Installation
import '@nvidia-elements/monaco/diff-input/define.js';
<nve-monaco-diff-input
language="typescript"
original="console.log('Hello, World!');"
value="console.log('Hello, world!');"
></nve-monaco-diff-input>
<script type="module">
const input = document.querySelector("nve-monaco-diff-input");
input.addEventListener("input", () => console.log("input: ", input.value));
input.addEventListener("change", () => console.log("change: ", input.value));
</script>
Optional Features
Diff input with optional features: line numbers, code folding, minimap, and side-by-side layout
<nve-monaco-diff-input
original="console.log('Hello, World!');"
value="console.log('Hello, world!');"
line-numbers="on"
folding
minimap
side-by-side
></nve-monaco-diff-input>
Read Only
Read-only diff input for displaying non-editable code comparisons
<nve-monaco-diff-input
original="console.log('Hello, World!');"
value="console.log('Hello, world!');"
readonly
></nve-monaco-diff-input>
Disabled
Disabled diff input preventing user interaction
<nve-monaco-diff-input
original="console.log('Hello, World!');"
value="console.log('Hello, world!');"
disabled
></nve-monaco-diff-input>
JSON Schema Validation
JSON diff input with schema validation in a form context, blocking submission on errors
<form id="json-schema-validation-example" nve-layout="column gap:lg">
<nve-control style="width: 100%">
<label>JSON Configuration</label>
<nve-monaco-diff-input
nve-control
name="config"
language="json"
line-numbers="on"
side-by-side
></nve-monaco-diff-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-diff-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.original = JSON.stringify(
{
name: "my-original-app",
version: "0.0.0",
},
null,
2,
);
input.value = JSON.stringify(
{
name: "my-modified-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 diff input with real-time type checking that blocks form submission on errors
<form id="typescript-validation-example" nve-layout="column gap:lg">
<nve-control style="width: 100%">
<label>TypeScript Code</label>
<nve-monaco-diff-input
nve-control
name="code"
language="typescript"
line-numbers="on"
side-by-side
></nve-monaco-diff-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-diff-input");
input.original = "const x: number = 42;";
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