diff --git a/examples/templating/index.html b/examples/templating/index.html
index 6aeeac2..fb8ac4c 100644
--- a/examples/templating/index.html
+++ b/examples/templating/index.html
@@ -1,12 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WC demo</title>
     <script type="module" src="./index.js"></script>
+    <script type="module" src="./with-lit.js"></script>
   </head>
   <body>
+    <h2>With our html</h2>
     <my-counter></my-counter>
+    <hr />
+    <h2>With lit-html</h2>
+    <lit-counter></lit-counter>
   </body>
 </html>
diff --git a/examples/templating/with-lit.js b/examples/templating/with-lit.js
new file mode 100644
index 0000000..fa568a0
--- /dev/null
+++ b/examples/templating/with-lit.js
@@ -0,0 +1,55 @@
+import { WebComponent } from "../../src/index.js";
+import {
+  html,
+  render as lit,
+} from "https://unpkg.com/lit-html@3.1.0/lit-html.js";
+
+export class LitCounter extends WebComponent {
+  static props = {
+    count: 123,
+  };
+  get template() {
+    const list = ["a", "b", "c", "what"];
+    const links = [
+      {
+        url: "https://ayco.io",
+        text: "Ayo Ayco",
+      },
+      {
+        url: "https://ayco.io/gh/McFly",
+        text: "McFly",
+      },
+    ];
+
+    return html`
+      <button
+        class="hey"
+        id="btn"
+        @click=${() => ++this.props.count}
+        style="background-color: green; color: white;"
+        about="Elephant"
+        data-name="thing"
+        aria-name="thingz"
+      >
+        <span>${this.props.count}</span>
+      </button>
+      <form style="margin: 1em 0;">
+        <label data-my-name="Ayo" for="the-input">Name</label>
+        <input id="the-input" type="foo" value="Name:" />
+      </form>
+      ${list.map((item) => html`<p>${item}</p>`)}
+      <h3 about="Elephant">Links</h3>
+      <ul>
+        ${links.map(
+          (link) =>
+            html`<li><a href=${link.url} target="_blank">${link.text}</a></li>`
+        )}
+      </ul>
+    `;
+  }
+  render() {
+    lit(this.template, this);
+  }
+}
+
+customElements.define("lit-counter", LitCounter);
