Here is an example of using the Code Editor in a plain html page:
<html>
<head>
<link href="https://developer.temenos.com/uux/base.css" rel="stylesheet" />
<script src="https://developer.temenos.com/uux/unified-ux-web.min.js"></script>
<style>
.editor-wrapper {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<!-- Basic HTML example -->
HTML (editable) <button id="loadHtml">Load Source</button>
<div class="editor-wrapper">
<uwc-code-editor id="htmleditor" language="html"></uwc-code-editor>
</div>
<script>
// Load the HTML source code from file
document.querySelector("#loadHtml").addEventListener("click", async () => {
const content = await fetch("./htmlsrc.txt");
const text = await content.text();
document.querySelector("#htmleditor").value = text;
});
</script>
</body>
</html>