diff --git a/packages/compiler/tests/__snapshots__/index.spec.ts.snap b/packages/compiler/tests/__snapshots__/index.spec.ts.snap
index ac3b338..1bbb64e 100644
--- a/packages/compiler/tests/__snapshots__/index.spec.ts.snap
+++ b/packages/compiler/tests/__snapshots__/index.spec.ts.snap
@@ -8,6 +8,14 @@ exports[`compiles a basic file 1`] = `
 "
 `;
 
+exports[`compiles a file with top-level HTML comments 1`] = `
+"
+{
+    "test": 123
+}
+"
+`;
+
 exports[`compiles a top-level await file 1`] = `
 "
 {
diff --git a/packages/compiler/tests/index.spec.ts b/packages/compiler/tests/index.spec.ts
index 20e6684..b2be1e4 100644
--- a/packages/compiler/tests/index.spec.ts
+++ b/packages/compiler/tests/index.spec.ts
@@ -45,6 +45,15 @@ test("compiles an import file", async () => {
   expect(result).toMatchSnapshot();
 });
 
+test("compiles a file with top-level HTML comments", async () => {
+  const result = await compilePath(
+    path.resolve(__dirname, "../../../sample/comments.json.blot"),
+    undefined,
+  );
+
+  expect(result).toMatchSnapshot();
+});
+
 test("passes params to a tempblot file", async () => {
   const result = await compilePath(
     path.resolve(__dirname, "../../../sample/params.json.blot"),
diff --git a/packages/parser/tests/root-lexer.spec.ts b/packages/parser/tests/root-lexer.spec.ts
index 29d1340..9a00e9d 100644
--- a/packages/parser/tests/root-lexer.spec.ts
+++ b/packages/parser/tests/root-lexer.spec.ts
@@ -78,3 +78,38 @@ const hello = 123;
     { type: "TagClose", attributes: { name: "output" } },
   ]);
 });
+
+test("tokenizeRoot ignores top-level HTML comments", () => {
+  const source = `
+<!-- before setup -->
+<setup>
+const setup = 123;
+</setup>
+<!-- between setup and output -->
+<output lang="json">
+{
+  "test": <<setup>>
+}
+</output>
+<!-- after output -->
+`.trim();
+
+  const tokens = tokenizeRoot(source);
+  expect(withoutOffsets(tokens)).toStrictEqual([
+    { type: "Text", attributes: { value: "<!-- before setup -->\n" } },
+    { type: "TagOpenStart", attributes: { name: "setup" } },
+    { type: "TagOpenEnd", attributes: { name: "setup" } },
+    { type: "Text", attributes: { value: "\nconst setup = 123;\n" } },
+    { type: "TagClose", attributes: { name: "setup" } },
+    {
+      type: "Text",
+      attributes: { value: "\n<!-- between setup and output -->\n" },
+    },
+    { type: "TagOpenStart", attributes: { name: "output" } },
+    { type: "TagAttribute", attributes: { name: "lang", value: "json" } },
+    { type: "TagOpenEnd", attributes: { name: "output" } },
+    { type: "Text", attributes: { value: "\n{\n  \"test\": <<setup>>\n}\n" } },
+    { type: "TagClose", attributes: { name: "output" } },
+    { type: "Text", attributes: { value: "\n<!-- after output -->" } },
+  ]);
+});
diff --git a/packages/parser/tests/root-parser.spec.ts b/packages/parser/tests/root-parser.spec.ts
index cd31277..84e6754 100644
--- a/packages/parser/tests/root-parser.spec.ts
+++ b/packages/parser/tests/root-parser.spec.ts
@@ -38,3 +38,30 @@ const setup = 123;
   expect(root.setup.startTagEnd).toBe(source.indexOf(">") + 1);
   expect(root.output.contents).toContain("<<setup>>");
 });
+
+test("parseRoot ignores top-level HTML comments", () => {
+  const sourceWithComments = `
+<!-- before setup -->
+<setup>
+const setup = 123;
+</setup>
+<!-- between setup and output -->
+<output lang="json">
+{
+  "test": <<setup>>
+}
+</output>
+<!-- after output -->
+`.trim();
+
+  const root = parseRoot(tokenizeRoot(sourceWithComments));
+
+  expect(root.setup.contents).toBe(`
+const setup = 123;
+`);
+  expect(root.output.contents).toBe(`
+{
+  "test": <<setup>>
+}
+`);
+});
diff --git a/sample/comments.json.blot b/sample/comments.json.blot
new file mode 100644
index 0000000..e2c99ad
--- /dev/null
+++ b/sample/comments.json.blot
@@ -0,0 +1,11 @@
+<!-- before setup -->
+<setup>
+const hello = 123;
+</setup>
+<!-- between setup and output -->
+<output lang="json">
+{
+    "test": <<hello>>
+}
+</output>
+<!-- after output -->