diff --git a/webcomponent/README.md b/webcomponent/README.md
index 652b0c8..e4e887b 100644
--- a/webcomponent/README.md
+++ b/webcomponent/README.md
@@ -35,12 +35,58 @@ The code below illustrates the usage of these attributes.
 </cdx-summary>
 ```
 
-Override the `--cdxsummary-thumb-scale` CSS variable to change the size of the thumbnail from the original `960x600` iframe dimension (default scale is set to `0.3`).
+Customize the style of various parts using any of the following CSS custom properties (variables).
+For example, override the `--cdxsummary-thumb-scale` CSS variable to change the size of the thumbnail from the original `960x600` iframe dimension (default scale is set to `0.3`).
 
 ```css
-:root {
-  --cdxsummary-thumb-scale: 0.25;
+cdx-summary {
+  --cdxsummary-main-txt-color: initial;
+  --cdxsummary-main-bg-color: initial;
+  --cdxsummary-main-font-family: sans-serif;
+  --cdxsummary-main-font-size: initial;
+  --cdxsummary-main-margin: 0;
+  --cdxsummary-main-padding: 5px;
+  --cdxsummary-mono-font-family: monospace;
+  --cdxsummary-link-txt-color: blue;
+  --cdxsummary-link-txt-decoration: underline;
+  --cdxsummary-link-bg-color: inherit;
+  --cdxsummary-info-txt-color: inherit;
+  --cdxsummary-info-bg-color: inherit;
+  --cdxsummary-info-font-family: inherit;
+  --cdxsummary-info-font-size: inherit;
+  --cdxsummary-info-font-style: italic;
+  --cdxsummary-info-border: initial;
+  --cdxsummary-info-border-radius: initial;
+  --cdxsummary-info-margin: 5px;
+  --cdxsummary-info-padding: 5px;
+  --cdxsummary-h2-txt-color: inherit;
+  --cdxsummary-h2-bg-color: inherit;
+  --cdxsummary-h2-font-family: inherit;
+  --cdxsummary-h2-font-size: 1.5em;
+  --cdxsummary-h2-margin: 1em 0 0.7em;
+  --cdxsummary-h2-padding: initial;
+  --cdxsummary-tbl-txt-color: inherit;
+  --cdxsummary-tbl-bg-color: inherit;
+  --cdxsummary-tbl-hdr-txt-color: white;
+  --cdxsummary-tbl-hdr-bg-color: gray;
+  --cdxsummary-tbl-alt-txt-color: inherit;
+  --cdxsummary-tbl-alt-bg-color: inherit;
+  --cdxsummary-tbl-border: 1px solid gray;
+  --cdxsummary-tbl-font-family: inherit;
+  --cdxsummary-tbl-font-size: inherit;
+  --cdxsummary-tbl-margin: initial;
+  --cdxsummary-btn-txt-color: white;
+  --cdxsummary-btn-bg-color: gray;
+  --cdxsummary-btn-font-family: inherit;
+  --cdxsummary-btn-font-size: inherit;
+  --cdxsummary-btn-border: tbl-border;
+  --cdxsummary-btn-border-radius: 5px;
+  --cdxsummary-btn-margin: 0 0 10px;
+  --cdxsummary-btn-padding: 5px 10px;
+  --cdxsummary-thumb-border: tbl-border;
+  --cdxsummary-thumb-border-radius: 5px;
+  --cdxsummary-thumb-scale: 0.3;
 }
 ```
 
-An [interactive test interface](https://internetarchive.github.io/cdx-summary/webcomponent/) is available for the Web Component that renders the JSON summary.
+Alternatively, use the [interactive tester interface](https://internetarchive.github.io/cdx-summary/webcomponent/) to customize the style and copy the generated code for integration.
diff --git a/webcomponent/cdxsummary.js b/webcomponent/cdxsummary.js
index f96cf06..7662d1e 100644
--- a/webcomponent/cdxsummary.js
+++ b/webcomponent/cdxsummary.js
@@ -191,7 +191,7 @@ ${this.data.samples.map(s => s.concat(s[1].replace(/^(https?:\/\/)?(www\.)?/i, '
   renderSummary() {
     const container = this.shadow.getElementById('container');
     if(this.data['msg']) {
-      container.innerHTML = `<p class="msg">${this.data['msg']}</p>`;
+      container.innerHTML = `<p class="info"> ${this.data['msg']}</p>`;
       return;
     }
 
@@ -246,7 +246,7 @@ ${this.topHostsTable()}
 
 <h2>Random HTML Capture Samples</h2>
 ${this.thumbs ? `
-<button id="thumb-loader">Load ${this.thumbs == 1 ? 'a Sample' : `${this.thumbs} Samples`}</button>
+<button id="thumb-loader">Load ${this.thumbs == 1 ? 'a sample' : `${this.thumbs} samples`}</button>
 <div id="sample-thumbs">
 ${this.fold.includes('thumbs') ? '' : this.sampleThumbs()}
 </div>` : ''
@@ -301,8 +301,51 @@ ${this.sampleCapturesList()}
     this.shadow.innerHTML = `
 <style>
   #container {
-    padding: 5px;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    color: var(--cdxsummary-main-txt-color);
+    background: var(--cdxsummary-main-bg-color);
+    font-family: var(--cdxsummary-main-font-family, sans-serif);
+    font-size: var(--cdxsummary-main-font-size);
+    margin: var(--cdxsummary-main-margin);
+    padding: var(--cdxsummary-main-padding, 5px);
+  }
+  pre, code {
+    font-family: var(--cdxsummary-mono-font-family, monospace);
+  }
+  a {
+    color: var(--cdxsummary-link-txt-color, blue);
+    background: var(--cdxsummary-link-bg-color);
+    text-decoration: var(--cdxsummary-link-txt-decoration, underline);
+  }
+  a:hover, a:focus {
+    text-decoration: underline;
+  }
+  .info {
+    color: var(--cdxsummary-info-txt-color);
+    background: var(--cdxsummary-info-bg-color);
+    font-family: var(--cdxsummary-info-font-family, var(--cdxsummary-main-font-family, sans-serif));
+    font-size: var(--cdxsummary-info-font-size);
+    font-style: var(--cdxsummary-info-font-style, italic);
+    border: var(--cdxsummary-info-border);
+    border-radius: var(--cdxsummary-info-border-radius);
+    margin: var(--cdxsummary-info-margin, 5px);
+    padding: var(--cdxsummary-info-padding, 5px);
+  }
+  .info::before {
+    content: "i";
+    border: 1px solid;
+    border-radius: 0.6em;
+    line-height: 1em;
+    width: 1em;
+    display: inline-block;
+    text-align: center;
+  }
+  h2 {
+    color: var(--cdxsummary-h2-txt-color);
+    background: var(--cdxsummary-h2-bg-color);
+    font-family: var(--cdxsummary-h2-font-family);
+    font-size: var(--cdxsummary-h2-font-size, 1.5em);
+    margin: var(--cdxsummary-h2-margin, 1em 0 0.7em);
+    padding: var(--cdxsummary-h2-padding);
   }
   table {
     border-collapse: collapse;
@@ -310,9 +353,15 @@ ${this.sampleCapturesList()}
     max-width: fit-content;
     overflow-x: auto;
     white-space: nowrap;
+    color: var(--cdxsummary-tbl-txt-color);
+    background: var(--cdxsummary-tbl-bg-color);
+    font-family: var(--cdxsummary-tbl-font-family);
+    font-size: var(--cdxsummary-tbl-font-size);
+    margin: var(--cdxsummary-tbl-margin);
   }
   tr:nth-child(even), li:nth-child(even) {
-    background-color: #eee;
+    color: var(--cdxsummary-tbl-alt-txt-color);
+    background: var(--cdxsummary-tbl-alt-bg-color);
   }
   th, td {
     text-align: right;
@@ -322,43 +371,25 @@ ${this.sampleCapturesList()}
     text-align: left;
     padding: 2px 10px 2px 2px;
   }
-  table, thead, tfoot {
-    border-bottom: 1px solid #333;
-    border-top: 1px solid #333;
-  }
-  thead, tfoot {
-    background: #777;
-    color: #eee;
-  }
-  ul {
-    word-break: break-all;
-    list-style-position: inside;
-    padding-inline-start: 0;
-  }
-  li a {
-    text-decoration: none;
-  }
-  .msg {
-    margin: 5px;
-    padding: 5px;
-  }
-  .msg, .info {
-    font-style: italic;
-  }
-  .info::before {
-    content: "🛈 ";
-  }
-  summary {
-    cursor: pointer;
+  table, thead {
+    border-bottom: var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray));
   }
-  details {
-    margin-bottom: 20px;
+  table, tfoot {
+    border-top: var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray));
   }
-  details.samples[open] summary::after {
-    content: attr(data-open);
+  thead, tfoot {
+    color: var(--cdxsummary-tbl-hdr-txt-color, white);
+    background: var(--cdxsummary-tbl-hdr-bg-color, gray);
   }
-  details.samples:not([open]) summary::after {
-    content: attr(data-close);
+  button {
+    color: var(--cdxsummary-btn-txt-color, var(--cdxsummary-tbl-hdr-txt-color, white));
+    background: var(--cdxsummary-btn-bg-color, var(--cdxsummary-tbl-hdr-bg-color, gray));
+    font-family: var(--cdxsummary-btn-font-family);
+    font-size: var(--cdxsummary-btn-font-size);
+    border: var(--cdxsummary-btn-border, var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray)));
+    border-radius: var(--cdxsummary-btn-border-radius, 5px);
+    margin: var(--cdxsummary-btn-margin, 0 0 10px);
+    padding: var(--cdxsummary-btn-padding, 5px 10px);
   }
   .thumb-container {
     display: inline-block;
@@ -369,8 +400,8 @@ ${this.sampleCapturesList()}
     width: calc(960px * var(--cdxsummary-thumb-scale, 0.3));
     aspect-ratio: 16 / 10;
     overflow: hidden;
-    border: 1px solid #333;
-    border-radius: 4px;
+    border: var(--cdxsummary-thumb-border, var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray)));
+    border-radius: var(--cdxsummary-thumb-border-radius, 5px);
     padding: 2px;
     background: linear-gradient(45deg, #eee, #333, #eee);
     background-position: center 2px;
@@ -378,14 +409,6 @@ ${this.sampleCapturesList()}
     background-repeat: no-repeat;
     animation: loader 10s ease infinite;
   }
-  @keyframes loader {
-    0%, 100% {
-      background-position: left 10px top 2px;
-    }
-    50% {
-      background-position: right 10px top 2px;
-    }
-  }
   .thumb a {
     display: block;
     position: absolute;
@@ -404,9 +427,30 @@ ${this.sampleCapturesList()}
     transform-origin: 0 0;
     transform: scale(var(--cdxsummary-thumb-scale, 0.3));
   }
-  button {
-    margin-bottom: 10px;
-    padding: 5px 15px;
+  @keyframes loader {
+    0%, 100% {
+      background-position: left 10px top 2px;
+    }
+    50% {
+      background-position: right 10px top 2px;
+    }
+  }
+  summary {
+    cursor: pointer;
+  }
+  details {
+    margin-bottom: 20px;
+  }
+  details.samples[open] summary::after {
+    content: attr(data-open);
+  }
+  details.samples:not([open]) summary::after {
+    content: attr(data-close);
+  }
+  ul {
+    word-break: break-all;
+    list-style-position: inside;
+    padding-inline-start: 0;
   }
   .compact {
     overflow: hidden;
diff --git a/webcomponent/index.html b/webcomponent/index.html
index 3d3b996..0fcc8fd 100644
--- a/webcomponent/index.html
+++ b/webcomponent/index.html
@@ -4,9 +4,6 @@
   <meta charset="utf-8">
   <title>CDX Summary Tester</title>
   <style>
-    :root {
-      --cdxsummary-thumb-scale: 0.3;
-    }
     body {
       margin: 0;
     }
@@ -15,52 +12,84 @@
       color: #eee;
       padding: 10px;
       margin: 0 auto;
-      text-align: center;
       font-family: sans-serif;
     }
+    #tester-container {
+      display: grid;
+      grid-template-columns: min-content 1fr;
+    }
+    #editor {
+      height: 100vh;
+      overflow: auto;
+      background: #ccc;
+      font-family: monospace;
+      resize: horizontal;
+      display: grid;
+    }
     form {
-      max-width: 600px;
       margin: 0 auto;
+      padding: 5px;
     }
     #form-container {
-      background: #ccc;
       padding: 5px;
-      font-family: mono;
+      overflow: auto;
+      white-space: nowrap;
+      min-width: max-content;
     }
     #code-container {
-      background: #111;
-      color: #eee;
+      background: #666;
+      color: #fff;
+      max-height: 8em;
       margin: 0;
-      padding: 5px 10px;
-      text-align: center;
+      padding: 10px;
+      overflow: auto;
+      white-space: pre-wrap;
+    }
+    #summary-container {
+      height: 100vh;
       overflow: auto;
     }
     .wide-input {
-      width: 300px;
+      width: 23em;
     }
     .narrow-input {
-      width: 150px;
+      width: 11em;
+    }
+    .var-input {
+      width: 10em;
     }
     .submit {
-      float: right;
-      margin-top: -5px;
+      display: block;
+      width: 15em;
+      margin: 0 auto;
+      padding: 5px;
+      position: sticky;
+      bottom: 0;
+    }
+    label {
+      margin-left: -0.6em;
     }
   </style>
   <script type="module" src="cdxsummary.js"></script>
   <script>
     const lists = {
-      "attr": ["src", "item", "name", "report", "playback", "type", "format", "thumbs", "fold"],
-      "src": ["samples/MC.summary.json", "samples/EoT20.summary.json"],
-      "item": ["mediacloud", "EndOfTerm2020WebCrawls", "epa-via-sitemap"],
-      "type": ["CDX", "collection", "item"],
-      "format": ["short", "percent", "local"]
+      'attr': ['src', 'item', 'name', 'report', 'playback', 'type', 'format', 'thumbs', 'fold'],
+      'vars': ['main-txt-color', 'main-bg-color', 'main-font-family', 'main-font-size', 'main-margin', 'main-padding', 'mono-font-family', 'link-txt-color', 'link-txt-decoration', 'link-bg-color', 'info-txt-color', 'info-bg-color', 'info-font-family', 'info-font-size', 'info-font-style', 'info-border', 'info-border-radius', 'info-margin', 'info-padding', 'h2-txt-color', 'h2-bg-color', 'h2-font-family', 'h2-font-size', 'h2-margin', 'h2-padding', 'tbl-txt-color', 'tbl-bg-color', 'tbl-hdr-txt-color', 'tbl-hdr-bg-color', 'tbl-alt-txt-color', 'tbl-alt-bg-color', 'tbl-border', 'tbl-font-family', 'tbl-font-size', 'tbl-margin', 'btn-txt-color', 'btn-bg-color', 'btn-font-family', 'btn-font-size', 'btn-border', 'btn-border-radius', 'btn-margin', 'btn-padding', 'thumb-border', 'thumb-border-radius', 'thumb-scale'],
+      'src': ['samples/MC.summary.json', 'samples/EoT20.summary.json'],
+      'item': ['mediacloud', 'EndOfTerm2020WebCrawls', 'epa-via-sitemap'],
+      'type': ['CDX', 'collection', 'item'],
+      'format': ['short', 'percent', 'local']
     };
     const l = Math.max(...(lists["attr"].map(el => el.length)));
+    const m = Math.max(...(lists["vars"].map(el => el.length)));
     const q = new URLSearchParams(location.search);
-    const g = a => q.getAll(a).join(' ');
-    const f = a => `<br>&nbsp;&nbsp;&nbsp;&nbsp;${a}${'&nbsp;'.repeat(l+1-a.length)}=&nbsp;&quot;`;
+    const r = a => q.getAll(a).join(' ');
+    const g = a => r(a).replaceAll('"', '&quot;');
+    const f = a => `<br>&nbsp;&nbsp;${a}${'&nbsp;'.repeat(l+1-a.length)}=&nbsp;&quot;`;
+    const s = a => `<br>&nbsp;&nbsp;--cdxsummary-${a}${'&nbsp;'.repeat(m+1-a.length)}:&nbsp;`;
     const d = a => `<datalist id="${a}-list">${lists[a].map(i => `<option value="${i}">`).join('')}</datalist>`;
-    const elm = `<cdx-summary ${lists["attr"].filter(a => q.has(a)).map(i => `${i}="${g(i)}"`).join(' ')}></cdx-summary>`;
+    const stl = lists["vars"].filter(a => q.has(a)).map(i => `  --cdxsummary-${i}: ${r(i)};`).join('\n');
+    const elm = `${stl ? ['<style>', 'cdx-summary {', stl, '}', '</style>', '', ''].join('\n') : ''}<cdx-summary ${lists["attr"].filter(a => q.has(a)).map(i => `${i}="${g(i)}"`).join(' ')}></cdx-summary>`;
     const visf = `
     <form id="cdxsummary">
       &lt;cdx-summary
@@ -84,7 +113,58 @@
                   <label for="fold-description">description</label>&quot;
       <br>
       &gt;&lt;/cdx-summary&gt;
-      <input type="submit" value="Render" class="submit">
+      <br>
+      <br>&lt;style&gt;
+      <br>cdx-summary {
+        ${s('main-txt-color')}<input name="main-txt-color" value="${g('main-txt-color')}" placeholder="initial" class="var-input">;
+        ${s('main-bg-color')}<input name="main-bg-color" value="${g('main-bg-color')}" placeholder="initial" class="var-input">;
+        ${s('main-font-family')}<input name="main-font-family" value="${g('main-font-family')}" placeholder="sans-serif" class="var-input">;
+        ${s('main-font-size')}<input name="main-font-size" value="${g('main-font-size')}" placeholder="initial" class="var-input">;
+        ${s('main-margin')}<input name="main-margin" value="${g('main-margin')}" placeholder="0" class="var-input">;
+        ${s('main-padding')}<input name="main-padding" value="${g('main-padding')}" placeholder="5px" class="var-input">;
+        ${s('mono-font-family')}<input name="mono-font-family" value="${g('mono-font-family')}" placeholder="monospace" class="var-input">;
+        ${s('link-txt-color')}<input name="link-txt-color" value="${g('link-txt-color')}" placeholder="blue" class="var-input">;
+        ${s('link-txt-decoration')}<input name="link-txt-decoration" value="${g('link-txt-decoration')}" placeholder="underline" class="var-input">;
+        ${s('link-bg-color')}<input name="link-bg-color" value="${g('link-bg-color')}" placeholder="inherit" class="var-input">;
+        ${s('info-txt-color')}<input name="info-txt-color" value="${g('info-txt-color')}" placeholder="inherit" class="var-input">;
+        ${s('info-bg-color')}<input name="info-bg-color" value="${g('info-bg-color')}" placeholder="inherit" class="var-input">;
+        ${s('info-font-family')}<input name="info-font-family" value="${g('info-font-family')}" placeholder="inherit" class="var-input">;
+        ${s('info-font-size')}<input name="info-font-size" value="${g('info-font-size')}" placeholder="inherit" class="var-input">;
+        ${s('info-font-style')}<input name="info-font-style" value="${g('info-font-style')}" placeholder="italic" class="var-input">;
+        ${s('info-border')}<input name="info-border" value="${g('info-border')}" placeholder="initial" class="var-input">;
+        ${s('info-border-radius')}<input name="info-border-radius" value="${g('info-border-radius')}" placeholder="initial" class="var-input">;
+        ${s('info-margin')}<input name="info-margin" value="${g('info-margin')}" placeholder="5px" class="var-input">;
+        ${s('info-padding')}<input name="info-padding" value="${g('info-padding')}" placeholder="5px" class="var-input">;
+        ${s('h2-txt-color')}<input name="h2-txt-color" value="${g('h2-txt-color')}" placeholder="inherit" class="var-input">;
+        ${s('h2-bg-color')}<input name="h2-bg-color" value="${g('h2-bg-color')}" placeholder="inherit" class="var-input">;
+        ${s('h2-font-family')}<input name="h2-font-family" value="${g('h2-font-family')}" placeholder="inherit" class="var-input">;
+        ${s('h2-font-size')}<input name="h2-font-size" value="${g('h2-font-size')}" placeholder="1.5em" class="var-input">;
+        ${s('h2-margin')}<input name="h2-margin" value="${g('h2-margin')}" placeholder="1em 0 0.7em" class="var-input">;
+        ${s('h2-padding')}<input name="h2-padding" value="${g('h2-padding')}" placeholder="initial" class="var-input">;
+        ${s('tbl-txt-color')}<input name="tbl-txt-color" value="${g('tbl-txt-color')}" placeholder="inherit" class="var-input">;
+        ${s('tbl-bg-color')}<input name="tbl-bg-color" value="${g('tbl-bg-color')}" placeholder="inherit" class="var-input">;
+        ${s('tbl-hdr-txt-color')}<input name="tbl-hdr-txt-color" value="${g('tbl-hdr-txt-color')}" placeholder="white" class="var-input">;
+        ${s('tbl-hdr-bg-color')}<input name="tbl-hdr-bg-color" value="${g('tbl-hdr-bg-color')}" placeholder="gray" class="var-input">;
+        ${s('tbl-alt-txt-color')}<input name="tbl-alt-txt-color" value="${g('tbl-alt-txt-color')}" placeholder="inherit" class="var-input">;
+        ${s('tbl-alt-bg-color')}<input name="tbl-alt-bg-color" value="${g('tbl-alt-bg-color')}" placeholder="inherit" class="var-input">;
+        ${s('tbl-border')}<input name="tbl-border" value="${g('tbl-border')}" placeholder="1px solid tbl-hdr-bg-color" class="var-input">;
+        ${s('tbl-font-family')}<input name="tbl-font-family" value="${g('tbl-font-family')}" placeholder="inherit" class="var-input">;
+        ${s('tbl-font-size')}<input name="tbl-font-size" value="${g('tbl-font-size')}" placeholder="inherit" class="var-input">;
+        ${s('tbl-margin')}<input name="tbl-margin" value="${g('tbl-margin')}" placeholder="initial" class="var-input">;
+        ${s('btn-txt-color')}<input name="btn-txt-color" value="${g('btn-txt-color')}" placeholder="tbl-hdr-txt-color" class="var-input">;
+        ${s('btn-bg-color')}<input name="btn-bg-color" value="${g('btn-bg-color')}" placeholder="tbl-hdr-bg-color" class="var-input">;
+        ${s('btn-font-family')}<input name="btn-font-family" value="${g('btn-font-family')}" placeholder="inherit" class="var-input">;
+        ${s('btn-font-size')}<input name="btn-font-size" value="${g('btn-font-size')}" placeholder="inherit" class="var-input">;
+        ${s('btn-border')}<input name="btn-border" value="${g('btn-border')}" placeholder="tbl-border" class="var-input">;
+        ${s('btn-border-radius')}<input name="btn-border-radius" value="${g('btn-border-radius')}" placeholder="5px" class="var-input">;
+        ${s('btn-margin')}<input name="btn-margin" value="${g('btn-margin')}" placeholder="0 0 10px" class="var-input">;
+        ${s('btn-padding')}<input name="btn-padding" value="${g('btn-padding')}" placeholder="5px 10px" class="var-input">;
+        ${s('thumb-border')}<input name="thumb-border" value="${g('thumb-border')}" placeholder="tbl-border" class="var-input">;
+        ${s('thumb-border-radius')}<input name="thumb-border-radius" value="${g('thumb-border-radius')}" placeholder="5px" class="var-input">;
+        ${s('thumb-scale')}<input name="thumb-scale" value="${g('thumb-scale')}" type="number" placeholder="0.3" min="0.1" step="0.01" class="var-input">;
+      <br>}
+      <br>&lt;/style&gt;
+      <br><input type="submit" value="RENDER ELEMENT ➔" class="submit">
     </form>`;
 
     document.addEventListener('formdata', e => Array.from(e.formData).filter(([k, v]) => v == '').map(([k, v]) => e.formData.delete(k)));
@@ -96,9 +176,15 @@
   </script>
 </head>
 <body>
-  <h1>CDX Summary Tester</h1>
-  <div id="form-container"></div>
-  <pre id="code-container"><code id="code-out"></code></pre>
-  <div id="summary-container"></div>
+  <div id="tester-container">
+    <div id="editor">
+      <div>
+        <h1>CDX Summary Tester</h1>
+      </div>
+      <div id="form-container"></div>
+      <pre id="code-container"><code id="code-out"></code></pre>
+    </div>
+    <div id="summary-container"></div>
+  </div>
 </body>
 </html>
diff --git a/webcomponent/package.json b/webcomponent/package.json
index c86a315..7abf305 100644
--- a/webcomponent/package.json
+++ b/webcomponent/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/cdxsummary",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A Web Component to render CDX Summary JSON files",
   "main": "cdxsummary.js",
   "module": "cdxsummary.js",