Code Editor Live Preview

The valuechange event drives a sandboxed iframe, so the markup renders as it is typed. Writes are debounced, since every keystroke would otherwise reload the frame.
index.html
Code

The following example assumes that you have imported the component and set up the theme.
<!-- Light theme -->
<link class="hljs-light" href="highlight.js/styles/atom-one-light.min.css" rel="stylesheet" />

<!-- Dark theme -->
<link class="hljs-dark" href="highlight.js/styles/atom-one-dark.min.css" rel="stylesheet" />

<div class="playground">
5 collapsed lines
  <sv-code-editor class="playground-editor" copy-button linenumbers wrap-button>
    <span class="playground-label" slot="header">index.html</span>
  </sv-code-editor>

  <iframe class="playground-preview" sandbox="allow-scripts" title="Live preview"></iframe>
</div>

<script type="application/x-typescript" module>
72 collapsed lines
  import hljs from "highlight.js/lib/core";
  import css from "highlight.js/lib/languages/css";
  import xml from "highlight.js/lib/languages/xml";

  hljs.registerLanguage("xml", xml);
  hljs.registerLanguage("css", css);

  const editor = document.querySelector<CodeEditor>(".playground-editor")!;
  const previewFrame = document.querySelector<HTMLIFrameElement>(".playground-preview")!;

  editor.highlighter = code => hljs.highlight(code, { language: "xml" }).value;

  editor.value = `<article class="card">
  <h2>Weekly report</h2>
  <p>Sessions are up 12% since last week.</p>
  <button type="button">Open dashboard</button>
</article>

<style>
  body {
    margin: 0;
    padding: 1rem;
    font: 16px/1.5 system-ui;
  }

  .card {
    padding: 1rem;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
  }

  h2 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
  }

  p {
    margin: 0 0 1rem;
    color: #555;
  }

  button {
    padding: 0.4rem 1rem;
    color: #fff;
    background: #1b6ef3;
    border: none;
    border-radius: 6px;
  }
</style>`;

  let renderTimer: ReturnType<typeof setTimeout>;

  const scheduleRender = () => {
    clearTimeout(renderTimer);
    renderTimer = setTimeout(() => {
      previewFrame.srcdoc = editor.value;
    }, 200);
  };

  editor.addEventListener("valuechange", scheduleRender);
  previewFrame.srcdoc = editor.value;

  // The docs site color scheme, a page of your own would pick one theme
  const storedColorScheme = document.documentElement.style.colorScheme;
  const preferredColorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const isColorSchemeStored = storedColorScheme === "dark" || storedColorScheme === "light";
  editor.codeStylesheet = `.hljs-${isColorSchemeStored ? storedColorScheme : preferredColorScheme}`;

  document.addEventListener("color-scheme-changed", event => {
    const colorScheme = (event as CustomEvent<"light" | "dark">).detail;
    editor.codeStylesheet = `.hljs-${colorScheme}`;
  });
</script>

<style>
27 collapsed lines
  .playground {
    display: grid;
    gap: 1em;
    padding: clamp(1rem, 4vw, 2rem);

    .playground-editor {
      block-size: 16rem;
    }

    .playground-label {
      display: block;
      padding: 0.35em 0.8em;
      font-size: 0.8em;
      color: var(--sv-gray-2);
      background-color: var(--sv-gray-5);
      border-start-start-radius: var(--sv-bdr-rad-md);
      border-start-end-radius: var(--sv-bdr-rad-md);
    }

    .playground-preview {
      inline-size: 100%;
      block-size: 14rem;
      background-color: #fff;
      border: var(--sv-bdr-sz-sm) solid var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }
  }
</style>