5 files changed, 51 insertions, 0 deletions
diff --git a/web/src/components/app/index.css b/web/src/components/app/index.css
new file mode 100644
index 0000000..3eeaee9
--- /dev/null
+++ b/web/src/components/app/index.css
@@ -0,0 +1,3 @@
+ntv-app {
+  display: block;
+}
diff --git a/web/src/components/app/index.ts b/web/src/components/app/index.ts
new file mode 100644
index 0000000..5967a46
--- /dev/null
+++ b/web/src/components/app/index.ts
@@ -0,0 +1,14 @@
+import ntvGrid from "../grid";
+import "./index.css";
+
+class NotiveAppElement extends HTMLElement {
+  connectedCallback() {
+    this.append(
+      ...window.notive.doc.grids.map((_grid) => {
+        return ntvGrid();
+      }),
+    );
+  }
+}
+
+customElements.define("ntv-app", NotiveAppElement);
diff --git a/web/src/components/grid/index.css b/web/src/components/grid/index.css
new file mode 100644
index 0000000..296c155
--- /dev/null
+++ b/web/src/components/grid/index.css
@@ -0,0 +1,8 @@
+ntv-grid {
+  display: block;
+}
+
+ntv-grid > canvas {
+  display: block;
+  width: 100%;
+}
diff --git a/web/src/components/grid/index.ts b/web/src/components/grid/index.ts
new file mode 100644
index 0000000..18bf75a
--- /dev/null
+++ b/web/src/components/grid/index.ts
@@ -0,0 +1,24 @@
+import h, { type CreateElement } from "../../html";
+import "./index.css";
+import colors from "open-color";
+
+class NotiveGridElement extends HTMLElement {
+  canvasEl: HTMLCanvasElement = h.canvas();
+
+  connectedCallback() {
+    this.append(this.canvasEl);
+    this.draw();
+  }
+
+  draw() {
+    const ctx = this.canvasEl.getContext("2d");
+    if (!ctx) throw new Error("Unable to get canvas context");
+    ctx.fillStyle = colors.gray[8];
+    ctx.fillRect(0, 0, this.canvasEl.width, this.canvasEl.height);
+  }
+}
+
+customElements.define("ntv-grid", NotiveGridElement);
+
+export default ((...args: any[]): NotiveGridElement =>
+  (h as any)["ntv-grid"](...args)) as CreateElement<NotiveGridElement>;
diff --git a/web/src/components/index.ts b/web/src/components/index.ts
new file mode 100644
index 0000000..8bc14e7
--- /dev/null
+++ b/web/src/components/index.ts
@@ -0,0 +1,2 @@
+import "./app";
+import "./grid";