diff --git a/packages/analyzer/src/standard/transpile.ts b/packages/analyzer/src/standard/transpile.ts
index 1bc8450..97ba874 100644
--- a/packages/analyzer/src/standard/transpile.ts
+++ b/packages/analyzer/src/standard/transpile.ts
@@ -34,7 +34,9 @@ export function transpile(document: Document) {
 
   document.visit(
     (node) => {
-      render(node.binding);
+      for (const binding of node.bindings) {
+        render(binding);
+      }
     },
     { filter: KoVirtualElement },
   );
diff --git a/packages/location/src/index.ts b/packages/location/src/index.ts
index c9b991e..46cc214 100644
--- a/packages/location/src/index.ts
+++ b/packages/location/src/index.ts
@@ -1,3 +1,3 @@
-export { default as Position } from "./position.js";
-export { default as Range } from "./range.js";
+export { default as Position, type RawPosition } from "./position.js";
+export { default as Range, type RawRange } from "./range.js";
 export * from "./utils.js";
diff --git a/packages/parser/src/__snapshots__/parser.test.ts.snap b/packages/parser/src/__snapshots__/parser.test.ts.snap
index fb969a1..9a292c5 100644
--- a/packages/parser/src/__snapshots__/parser.test.ts.snap
+++ b/packages/parser/src/__snapshots__/parser.test.ts.snap
@@ -2,6 +2,251 @@
 
 exports[`parser Deep virtual elements 1`] = `
 {
+  "children": [
+    {
+      "bindings": [
+        {
+          "end": {
+            "column": 16,
+            "line": 0,
+            "offset": 16,
+          },
+          "incomplete": false,
+          "name": {
+            "end": {
+              "column": 11,
+              "line": 0,
+              "offset": 11,
+            },
+            "start": {
+              "column": 8,
+              "line": 0,
+              "offset": 8,
+            },
+            "value": "foo",
+          },
+          "param": {
+            "end": {
+              "column": 16,
+              "line": 0,
+              "offset": 16,
+            },
+            "start": {
+              "column": 13,
+              "line": 0,
+              "offset": 13,
+            },
+            "value": "foo",
+          },
+          "start": {
+            "column": 8,
+            "line": 0,
+            "offset": 8,
+          },
+        },
+      ],
+      "children": [
+        {
+          "bindings": [
+            {
+              "end": {
+                "column": 36,
+                "line": 0,
+                "offset": 36,
+              },
+              "incomplete": false,
+              "name": {
+                "end": {
+                  "column": 31,
+                  "line": 0,
+                  "offset": 31,
+                },
+                "start": {
+                  "column": 28,
+                  "line": 0,
+                  "offset": 28,
+                },
+                "value": "bar",
+              },
+              "param": {
+                "end": {
+                  "column": 36,
+                  "line": 0,
+                  "offset": 36,
+                },
+                "start": {
+                  "column": 33,
+                  "line": 0,
+                  "offset": 33,
+                },
+                "value": "bar",
+              },
+              "start": {
+                "column": 28,
+                "line": 0,
+                "offset": 28,
+              },
+            },
+          ],
+          "children": [],
+          "end": {
+            "column": 52,
+            "line": 0,
+            "offset": 52,
+          },
+          "endComment": {
+            "content": " /ko ",
+            "end": {
+              "column": 52,
+              "line": 0,
+              "offset": 52,
+            },
+            "start": {
+              "column": 40,
+              "line": 0,
+              "offset": 40,
+            },
+            "type": "comment",
+          },
+          "expression": {
+            "end": {
+              "column": 36,
+              "line": 0,
+              "offset": 36,
+            },
+            "start": {
+              "column": 28,
+              "line": 0,
+              "offset": 28,
+            },
+            "value": "bar: bar",
+          },
+          "inner": {
+            "end": {
+              "column": 40,
+              "line": 0,
+              "offset": 40,
+            },
+            "start": {
+              "column": 40,
+              "line": 0,
+              "offset": 40,
+            },
+          },
+          "namespace": {
+            "end": {
+              "column": 27,
+              "line": 0,
+              "offset": 27,
+            },
+            "start": {
+              "column": 25,
+              "line": 0,
+              "offset": 25,
+            },
+            "value": "ko",
+          },
+          "start": {
+            "column": 20,
+            "line": 0,
+            "offset": 20,
+          },
+          "startComment": {
+            "content": " ko bar: bar ",
+            "end": {
+              "column": 40,
+              "line": 0,
+              "offset": 40,
+            },
+            "start": {
+              "column": 20,
+              "line": 0,
+              "offset": 20,
+            },
+            "type": "comment",
+          },
+          "type": "virtual-element",
+        },
+      ],
+      "end": {
+        "column": 64,
+        "line": 0,
+        "offset": 64,
+      },
+      "endComment": {
+        "content": " /ko ",
+        "end": {
+          "column": 64,
+          "line": 0,
+          "offset": 64,
+        },
+        "start": {
+          "column": 52,
+          "line": 0,
+          "offset": 52,
+        },
+        "type": "comment",
+      },
+      "expression": {
+        "end": {
+          "column": 16,
+          "line": 0,
+          "offset": 16,
+        },
+        "start": {
+          "column": 8,
+          "line": 0,
+          "offset": 8,
+        },
+        "value": "foo: foo",
+      },
+      "inner": {
+        "end": {
+          "column": 52,
+          "line": 0,
+          "offset": 52,
+        },
+        "start": {
+          "column": 20,
+          "line": 0,
+          "offset": 20,
+        },
+      },
+      "namespace": {
+        "end": {
+          "column": 7,
+          "line": 0,
+          "offset": 7,
+        },
+        "start": {
+          "column": 5,
+          "line": 0,
+          "offset": 5,
+        },
+        "value": "ko",
+      },
+      "start": {
+        "column": 0,
+        "line": 0,
+        "offset": 0,
+      },
+      "startComment": {
+        "content": " ko foo: foo ",
+        "end": {
+          "column": 20,
+          "line": 0,
+          "offset": 20,
+        },
+        "start": {
+          "column": 0,
+          "line": 0,
+          "offset": 0,
+        },
+        "type": "comment",
+      },
+      "type": "virtual-element",
+    },
+  ],
   "end": {
     "column": 64,
     "line": 0,
@@ -17,6 +262,143 @@ exports[`parser Deep virtual elements 1`] = `
 
 exports[`parser Element bindings 1`] = `
 {
+  "children": [
+    {
+      "attributes": [
+        {
+          "end": {
+            "column": 23,
+            "line": 0,
+            "offset": 23,
+          },
+          "name": {
+            "end": {
+              "column": 14,
+              "line": 0,
+              "offset": 14,
+            },
+            "start": {
+              "column": 5,
+              "line": 0,
+              "offset": 5,
+            },
+            "value": "data-bind",
+          },
+          "namespace": null,
+          "prefix": null,
+          "start": {
+            "column": 5,
+            "line": 0,
+            "offset": 5,
+          },
+          "value": {
+            "end": {
+              "column": 23,
+              "line": 0,
+              "offset": 23,
+            },
+            "inner": {
+              "end": {
+                "column": 22,
+                "line": 0,
+                "offset": 22,
+              },
+              "start": {
+                "column": 16,
+                "line": 0,
+                "offset": 16,
+              },
+            },
+            "quote": "'",
+            "start": {
+              "column": 15,
+              "line": 0,
+              "offset": 15,
+            },
+            "value": "0: bar",
+          },
+        },
+      ],
+      "bindings": [
+        {
+          "end": {
+            "column": 22,
+            "line": 0,
+            "offset": 22,
+          },
+          "incomplete": false,
+          "name": {
+            "end": {
+              "column": 17,
+              "line": 0,
+              "offset": 17,
+            },
+            "start": {
+              "column": 16,
+              "line": 0,
+              "offset": 16,
+            },
+            "value": "0",
+          },
+          "param": {
+            "end": {
+              "column": 22,
+              "line": 0,
+              "offset": 22,
+            },
+            "start": {
+              "column": 19,
+              "line": 0,
+              "offset": 19,
+            },
+            "value": "bar",
+          },
+          "start": {
+            "column": 16,
+            "line": 0,
+            "offset": 16,
+          },
+        },
+      ],
+      "children": [],
+      "end": {
+        "column": 30,
+        "line": 0,
+        "offset": 30,
+      },
+      "inner": {
+        "end": {
+          "column": 24,
+          "line": 0,
+          "offset": 24,
+        },
+        "start": {
+          "column": 24,
+          "line": 0,
+          "offset": 24,
+        },
+      },
+      "start": {
+        "column": 0,
+        "line": 0,
+        "offset": 0,
+      },
+      "tagName": {
+        "end": {
+          "column": 4,
+          "line": 0,
+          "offset": 4,
+        },
+        "start": {
+          "column": 1,
+          "line": 0,
+          "offset": 1,
+        },
+        "value": "div",
+      },
+      "type": "element",
+    },
+  ],
   "end": {
     "column": 30,
     "line": 0,
@@ -29,3 +411,180 @@ exports[`parser Element bindings 1`] = `
   },
 }
 `;
+
+exports[`parser Multiple bindings on same virtual element 1`] = `
+{
+  "children": [
+    {
+      "bindings": [
+        {
+          "end": {
+            "column": 17,
+            "line": 0,
+            "offset": 17,
+          },
+          "incomplete": false,
+          "name": {
+            "end": {
+              "column": 12,
+              "line": 0,
+              "offset": 12,
+            },
+            "start": {
+              "column": 8,
+              "line": 0,
+              "offset": 8,
+            },
+            "value": "with",
+          },
+          "param": {
+            "end": {
+              "column": 17,
+              "line": 0,
+              "offset": 17,
+            },
+            "start": {
+              "column": 14,
+              "line": 0,
+              "offset": 14,
+            },
+            "value": "foo",
+          },
+          "start": {
+            "column": 8,
+            "line": 0,
+            "offset": 8,
+          },
+        },
+        {
+          "end": {
+            "column": 28,
+            "line": 0,
+            "offset": 28,
+          },
+          "incomplete": false,
+          "name": {
+            "end": {
+              "column": 21,
+              "line": 0,
+              "offset": 21,
+            },
+            "start": {
+              "column": 19,
+              "line": 0,
+              "offset": 19,
+            },
+            "value": "as",
+          },
+          "param": {
+            "end": {
+              "column": 28,
+              "line": 0,
+              "offset": 28,
+            },
+            "start": {
+              "column": 23,
+              "line": 0,
+              "offset": 23,
+            },
+            "value": "'bar'",
+          },
+          "start": {
+            "column": 19,
+            "line": 0,
+            "offset": 19,
+          },
+        },
+      ],
+      "children": [],
+      "end": {
+        "column": 44,
+        "line": 0,
+        "offset": 44,
+      },
+      "endComment": {
+        "content": " /ko ",
+        "end": {
+          "column": 44,
+          "line": 0,
+          "offset": 44,
+        },
+        "start": {
+          "column": 32,
+          "line": 0,
+          "offset": 32,
+        },
+        "type": "comment",
+      },
+      "expression": {
+        "end": {
+          "column": 28,
+          "line": 0,
+          "offset": 28,
+        },
+        "start": {
+          "column": 8,
+          "line": 0,
+          "offset": 8,
+        },
+        "value": "with: foo, as: 'bar'",
+      },
+      "inner": {
+        "end": {
+          "column": 32,
+          "line": 0,
+          "offset": 32,
+        },
+        "start": {
+          "column": 32,
+          "line": 0,
+          "offset": 32,
+        },
+      },
+      "namespace": {
+        "end": {
+          "column": 7,
+          "line": 0,
+          "offset": 7,
+        },
+        "start": {
+          "column": 5,
+          "line": 0,
+          "offset": 5,
+        },
+        "value": "ko",
+      },
+      "start": {
+        "column": 0,
+        "line": 0,
+        "offset": 0,
+      },
+      "startComment": {
+        "content": " ko with: foo, as: 'bar' ",
+        "end": {
+          "column": 32,
+          "line": 0,
+          "offset": 32,
+        },
+        "start": {
+          "column": 0,
+          "line": 0,
+          "offset": 0,
+        },
+        "type": "comment",
+      },
+      "type": "virtual-element",
+    },
+  ],
+  "end": {
+    "column": 44,
+    "line": 0,
+    "offset": 44,
+  },
+  "start": {
+    "column": 0,
+    "line": 0,
+    "offset": 0,
+  },
+}
+`;
diff --git a/packages/parser/src/parser.test.ts b/packages/parser/src/parser.test.ts
index 9914b02..ce39059 100644
--- a/packages/parser/src/parser.test.ts
+++ b/packages/parser/src/parser.test.ts
@@ -22,4 +22,9 @@ describe("parser", () => {
   test("Import statement with *", () => {
     parse("<!-- ok with: * from 'foo' --><!-- /ok -->");
   });
+
+  test("Multiple bindings on same virtual element", () => {
+    const { document } = parse("<!-- ko with: foo, as: 'bar' --><!-- /ko -->");
+    expect(document).toMatchSnapshot();
+  });
 });
diff --git a/packages/parser/src/parser.ts b/packages/parser/src/parser.ts
index b545ea7..130bbe5 100644
--- a/packages/parser/src/parser.ts
+++ b/packages/parser/src/parser.ts
@@ -24,7 +24,7 @@ import {
   Identifier,
   Expression,
   KoVirtualElement,
-  WithVirtualElement,
+  OkVirtualElement,
   ImportStatement,
   StringLiteral,
 } from "@knuckles/syntax-tree";
@@ -32,7 +32,7 @@ import * as acorn from "acorn";
 import * as acornLoose from "acorn-loose";
 
 export const VIRTUAL_ELEMENT_START_REGEX = //
-  /^(\s*)(ko|ok)(\s+)([^\s]+)(\s*:\s*)([^]*?)\s*$/;
+  /^(\s*)(ko|ok)(\s+)([^]*?)\s*$/;
 
 export interface ParserOptions {
   bindingAttributes?: readonly string[];
@@ -142,14 +142,12 @@ export default class Parser {
     node: p5t.CommentNode,
     iter: Iterator<p5t.Node>,
   ): VirtualElement {
-    const [padding1, nsText, padding2, nameText, padding3, paramText] =
+    const [padding1, nsText, padding3, expressionText] =
       VIRTUAL_ELEMENT_START_REGEX.exec(node.data)!.slice(1) as [
         string,
         string,
         string,
         string,
-        string,
-        string,
       ];
 
     const startComment = new Comment({
@@ -185,8 +183,7 @@ export default class Parser {
 
     const dataOffset = node.sourceCodeLocation!.startOffset + "<!--".length;
     const nsOffset = dataOffset + padding1.length;
-    const nameOffset = nsOffset + nsText.length + padding2.length;
-    const paramOffset = nameOffset + nameText.length + padding3.length;
+    const expressionOffset = nsOffset + nsText.length + padding3.length;
 
     const namespace = new Identifier({
       value: nsText,
@@ -197,69 +194,90 @@ export default class Parser {
       ),
     });
 
-    const name = new Identifier({
-      value: nameText,
-      range: Range.fromOffsets(
-        nameOffset,
-        nameOffset + nameText.length,
-        this.#string,
-      ),
-    });
-
-    const param = new Expression({
-      value: paramText,
-      range: Range.fromOffsets(
-        paramOffset,
-        paramOffset + paramText.length,
-        this.#string,
+    const expression = new Expression({
+      range: new Range(
+        Position.fromOffset(expressionOffset, this.#string),
+        Position.fromOffset(
+          expressionOffset + expressionText.length,
+          this.#string,
+        ),
       ),
+      value: expressionText,
     });
 
     if (namespace.value === "ko") {
       const node = new KoVirtualElement({
         namespace,
-        name,
-        param,
-        binding: undefined!,
+        expression,
+        bindings: [],
         startComment,
         children,
         endComment,
         range: new Range(startComment.start, endComment.end),
       });
-
-      const binding = new Binding({
-        name,
-        param,
-        parent: node,
-      });
-      node.binding = binding;
-
+      node.bindings = this.#parseBindings(expression, node);
       return node;
     }
 
     if (namespace.value === "ok") {
-      if (name.value === "with" || name.value === "using") {
-        const importStatement = this.#parseImportStatement(
-          new CharIter(this.#string, paramOffset),
+      const match = /([^\s]+)(\s*:\s*)([^]*?)/.exec(expression.value);
+      if (!match) {
+        throw this.#error(
+          expression,
+          "Expected an identifier followed by ':'.",
         );
+      }
+      const [nameText, padding2, paramText] = match.slice(1) as [
+        string,
+        string,
+        string,
+      ];
 
-        return new WithVirtualElement({
-          namespace,
-          name,
-          param,
-          import: importStatement,
-          startComment,
-          children,
-          endComment,
-          range: new Range(startComment.start, endComment.end),
-        });
+      const name = new Identifier({
+        value: nameText,
+        range: new Range(
+          expression.start,
+          Position.fromOffset(expressionOffset + nameText.length, this.#string),
+        ),
+      });
+
+      const param = new Identifier({
+        value: paramText,
+        range: new Range(
+          Position.fromOffset(
+            expressionOffset + nameText.length + padding2.length,
+            this.#string,
+          ),
+          expression.end,
+        ),
+      });
+
+      let importStatement: ImportStatement | undefined;
+      if (nameText === "with" || nameText === "using") {
+        importStatement = this.#parseImportStatement(
+          new CharIter(
+            this.#string,
+            expressionOffset + nameText.length + padding2.length,
+          ),
+        );
       }
+
+      return new OkVirtualElement({
+        name,
+        param,
+        namespace,
+        expression,
+        import: importStatement,
+        startComment,
+        children,
+        endComment,
+        range: new Range(startComment.start, endComment.end),
+      });
     }
 
     return new VirtualElement({
       namespace,
-      name,
-      param,
+      expression,
       startComment,
       children,
       endComment,
@@ -355,7 +373,14 @@ export default class Parser {
           attr.name.value,
         ),
       )
-      .flatMap((attr) => this.#parseAttributeBindings(attr));
+      .flatMap((attr) => {
+        const expression = new Expression({
+          value: attr.value.value,
+          range: attr.value.inner,
+        });
+
+        return this.#parseBindings(expression, element);
+      });
 
     let inner: Range;
     if (children.length > 0) {
@@ -406,6 +431,12 @@ export default class Parser {
       ),
       range.end,
     );
+    const valueInnerRange = quoted
+      ? new Range(
+          Position.fromOffset(valueRange.start.offset + 1, this.#string),
+          Position.fromOffset(valueRange.end.offset - 1, this.#string),
+        )
+      : valueRange;
 
     return new Attribute({
       name: new Identifier({
@@ -421,9 +452,10 @@ export default class Parser {
       value: new StringLiteral({
         // parse5 replaces all occurrences of CRLF with LF, which breaks mappings.
         value: this.#string.slice(
-          valueRange.start.offset + (quoted ? 1 : 0),
-          valueRange.end.offset - (quoted ? 1 : 0),
+          valueInnerRange.start.offset,
+          valueInnerRange.end.offset,
         ),
+        inner: valueInnerRange,
         quote,
         range: valueRange,
       }),
@@ -433,20 +465,14 @@ export default class Parser {
       parent,
     });
   }
+  //#endregion
 
-  #parseAttributeBindings(attr: Attribute) {
-    const innerOffset =
-      // name
-      attr.name.end.offset +
-      // equal
-      1 +
-      // quote
-      (attr.value.value ? 1 : 0);
-
+  //#region Bindings
+  #parseBindings(node: Expression, parent: Element | KoVirtualElement) {
     const translate = (offset: number) =>
-      innerOffset +
+      node.start.offset +
       offset -
-      // attribute value is wrapped in expressionText
+      // wrapping characters
       2;
 
     const acornOptions: acorn.Options = {
@@ -455,7 +481,7 @@ export default class Parser {
       ranges: true,
     };
 
-    const expressionText = `({${attr.value.value}})`;
+    const expressionText = `({${node.value}})`;
     let expression: acorn.Expression | undefined;
     try {
       expression = acorn.parseExpressionAt(expressionText, 0, acornOptions);
@@ -582,8 +608,7 @@ export default class Parser {
                   this.#string,
                 ),
               }),
-          attribute: attr,
-          parent: attr.parent,
+          parent,
           incomplete,
         });
       })
@@ -664,6 +689,7 @@ export default class Parser {
       value,
       quote,
       range: Range.fromOffsets(start, iter.index(), this.#string),
+      inner: Range.fromOffsets(start + 1, iter.index() - 1, this.#string),
     });
   }
   //#endregion
diff --git a/packages/ssr/src/renderer.ts b/packages/ssr/src/renderer.ts
index ce31fcf..abf48c4 100644
--- a/packages/ssr/src/renderer.ts
+++ b/packages/ssr/src/renderer.ts
@@ -19,11 +19,10 @@ import { parse } from "@knuckles/parser";
 import {
   Element,
   ParentNode,
-  WithVirtualElement,
+  OkVirtualElement,
   type StringLiteral,
   type ImportStatement,
   KoVirtualElement,
-  VirtualElement,
   type Node,
 } from "@knuckles/syntax-tree";
 import ko from "knockout";
@@ -255,13 +254,13 @@ export class Renderer {
 
   isSsrVirtualElement(node: Node) {
     return (
-      node instanceof VirtualElement &&
+      node instanceof OkVirtualElement &&
       (node.name.value === "ssr" || node.name.value === "no-ssr")
     );
   }
 
   isSsrEnabled(node: Node, fallback = true) {
-    if (node instanceof VirtualElement) {
+    if (node instanceof OkVirtualElement) {
       if (node.name.value === "ssr" && node.param.value === "true") {
         return true;
       }
@@ -289,8 +288,8 @@ export class Renderer {
     }
   }
 
-  async renderViewModel(modified: MagicString, node: WithVirtualElement) {
-    const data = await this.import(node.import);
+  async renderViewModel(modified: MagicString, node: OkVirtualElement) {
+    const data = await this.import(node.import!);
     const context = new BindingContext(data);
 
     if (!this.#options.preserveHints) {
@@ -309,7 +308,10 @@ export class Renderer {
   ) {
     for (const child of node.children) {
       if (this.isSsrEnabled(child, true)) {
-        if (child instanceof WithVirtualElement) {
+        if (
+          child instanceof OkVirtualElement &&
+          (child.name.value === "with" || child.name.value === "using")
+        ) {
           await this.renderViewModel(modified, child);
           continue;
         }
@@ -356,7 +358,7 @@ export class Renderer {
     bubble?: (() => Promise<void>) | undefined;
     extend?: (() => Promise<BindingContext>) | undefined;
   }> {
-    const bindings = node instanceof Element ? node.bindings : [node.binding];
+    const bindings = node.bindings;
 
     const plugins = bindings.map((binding) =>
       this.#plugins.find((plugin) => plugin.filter(binding)),
diff --git a/packages/syntax-tree/src/syntax-tree/binding.ts b/packages/syntax-tree/src/syntax-tree/binding.ts
index 267fab6..c6b78d3 100644
--- a/packages/syntax-tree/src/syntax-tree/binding.ts
+++ b/packages/syntax-tree/src/syntax-tree/binding.ts
@@ -1,7 +1,12 @@
 import type { Attribute, Element } from "./element.js";
-import type { Expression, Identifier } from "./primitives.js";
+import type {
+  Expression,
+  Identifier,
+  RawExpression,
+  RawIdentifier,
+} from "./primitives.js";
 import type { KoVirtualElement } from "./virtual-element.js";
-import { Range } from "@knuckles/location";
+import { Range, type RawRange } from "@knuckles/location";
 
 export interface BindingInit {
   name: Identifier;
@@ -11,10 +16,16 @@ export interface BindingInit {
   incomplete?: boolean | undefined;
 }
 
+export interface RawBinding extends RawRange {
+  name: RawIdentifier;
+  param: RawExpression;
+  incomplete: boolean;
+}
+
 export class Binding extends Range {
   name: Identifier;
   param: Expression;
-  attribute: Attribute | null;
+  attribute: Attribute | undefined;
   parent: Element | KoVirtualElement;
   incomplete: boolean;
 
@@ -22,8 +33,17 @@ export class Binding extends Range {
     super(init.name.start, init.param.end);
     this.name = init.name;
     this.param = init.param;
-    this.attribute = init.attribute ?? null;
+    this.attribute = init.attribute ?? undefined;
     this.parent = init.parent;
     this.incomplete = init.incomplete ?? false;
   }
+
+  override toJSON(): RawBinding {
+    return {
+      ...super.toJSON(),
+      name: this.name.toJSON(),
+      param: this.param.toJSON(),
+      incomplete: this.incomplete,
+    };
+  }
 }
diff --git a/packages/syntax-tree/src/syntax-tree/comment.ts b/packages/syntax-tree/src/syntax-tree/comment.ts
index 4c499e5..ad3975d 100644
--- a/packages/syntax-tree/src/syntax-tree/comment.ts
+++ b/packages/syntax-tree/src/syntax-tree/comment.ts
@@ -1,9 +1,14 @@
-import { Node, type NodeInit } from "./node.js";
+import { Node, type NodeInit, type RawNode } from "./node.js";
 
 export interface CommentInit extends NodeInit {
   content: string;
 }
 
+export interface RawComment extends RawNode {
+  type: "comment";
+  content: string;
+}
+
 export class Comment extends Node {
   content: string;
 
@@ -11,4 +16,12 @@ export class Comment extends Node {
     super(init);
     this.content = init.content;
   }
+
+  override toJSON(): RawComment {
+    return {
+      ...super.toJSON(),
+      type: "comment",
+      content: this.content,
+    };
+  }
 }
diff --git a/packages/syntax-tree/src/syntax-tree/document.ts b/packages/syntax-tree/src/syntax-tree/document.ts
index 67ca967..538e6f3 100644
--- a/packages/syntax-tree/src/syntax-tree/document.ts
+++ b/packages/syntax-tree/src/syntax-tree/document.ts
@@ -1,9 +1,15 @@
-import { ParentNode, type ParentNodeInit } from "./node.js";
+import { ParentNode, type ParentNodeInit, type RawParentNode } from "./node.js";
 
 export interface DocumentInit extends ParentNodeInit {}
 
+export interface RawDocument extends RawParentNode {}
+
 export class Document extends ParentNode {
   constructor(init: DocumentInit) {
     super(init);
   }
+
+  override toJSON(): RawDocument {
+    return super.toJSON();
+  }
 }
diff --git a/packages/syntax-tree/src/syntax-tree/element.ts b/packages/syntax-tree/src/syntax-tree/element.ts
index be6e09f..8fe1c0d 100644
--- a/packages/syntax-tree/src/syntax-tree/element.ts
+++ b/packages/syntax-tree/src/syntax-tree/element.ts
@@ -1,7 +1,17 @@
-import type { Binding } from "./binding.js";
-import { type Node, ParentNode, type ParentNodeInit } from "./node.js";
-import type { Identifier, StringLiteral } from "./primitives.js";
-import { Range } from "@knuckles/location";
+import type { Binding, RawBinding } from "./binding.js";
+import {
+  type Node,
+  ParentNode,
+  type ParentNodeInit,
+  type RawParentNode,
+} from "./node.js";
+import type {
+  Identifier,
+  RawIdentifier,
+  RawStringLiteral,
+  StringLiteral,
+} from "./primitives.js";
+import { Range, type RawRange } from "@knuckles/location";
 
 export interface ElementInit extends ParentNodeInit {
   tagName: Identifier;
@@ -11,6 +21,14 @@ export interface ElementInit extends ParentNodeInit {
   inner: Range;
 }
 
+export interface RawElement extends RawParentNode {
+  type: "element";
+  tagName: RawIdentifier;
+  attributes: RawAttribute[];
+  bindings: RawBinding[];
+  inner: RawRange;
+}
+
 export class Element extends ParentNode {
   tagName: Identifier;
   attributes: Attribute[];
@@ -24,6 +42,17 @@ export class Element extends ParentNode {
     this.bindings = Array.from(init.bindings);
     this.inner = init.inner;
   }
+
+  override toJSON(): RawElement {
+    return {
+      ...super.toJSON(),
+      type: "element",
+      tagName: this.tagName.toJSON(),
+      attributes: this.attributes.map((attribute) => attribute.toJSON()),
+      bindings: this.bindings.map((binding) => binding.toJSON()),
+      inner: this.inner.toJSON(),
+    };
+  }
 }
 
 export interface AttributeInit {
@@ -37,6 +66,13 @@ export interface AttributeInit {
 
 export type Quotation = "single" | "double";
 
+export interface RawAttribute extends RawRange {
+  name: RawIdentifier;
+  value: RawStringLiteral;
+  namespace: string | null;
+  prefix: string | null;
+}
+
 export class Attribute extends Range {
   name: Identifier;
   value: StringLiteral;
@@ -52,4 +88,14 @@ export class Attribute extends Range {
     this.prefix = init.prefix ?? null;
     this.parent = init.parent;
   }
+
+  override toJSON(): RawAttribute {
+    return {
+      ...super.toJSON(),
+      name: this.name.toJSON(),
+      value: this.value.toJSON(),
+      namespace: this.namespace,
+      prefix: this.prefix,
+    };
+  }
 }
diff --git a/packages/syntax-tree/src/syntax-tree/node.ts b/packages/syntax-tree/src/syntax-tree/node.ts
index b61c087..6170825 100644
--- a/packages/syntax-tree/src/syntax-tree/node.ts
+++ b/packages/syntax-tree/src/syntax-tree/node.ts
@@ -1,9 +1,11 @@
-import { type Position, Range } from "@knuckles/location";
+import { type Position, Range, type RawRange } from "@knuckles/location";
 
 export interface NodeInit {
   range: Range;
 }
 
+export interface RawNode extends RawRange {}
+
 export abstract class Node extends Range {
   constructor(init: NodeInit) {
     super(init.range);
@@ -26,12 +28,20 @@ export abstract class Node extends Range {
       }
     }
   }
+
+  override toJSON(): RawNode {
+    return super.toJSON();
+  }
 }
 
 export interface ParentNodeInit extends NodeInit {
   children: Iterable<Node>;
 }
 
+export interface RawParentNode extends RawRange {
+  children: RawNode[];
+}
+
 export abstract class ParentNode extends Node {
   children: Node[];
 
@@ -55,4 +65,11 @@ export abstract class ParentNode extends Node {
 
     return ascendants.reduce((a, b) => (a.size < b.size ? a : b));
   }
+
+  override toJSON(): RawParentNode {
+    return {
+      ...super.toJSON(),
+      children: this.children.map((child) => child.toJSON()),
+    };
+  }
 }
diff --git a/packages/syntax-tree/src/syntax-tree/primitives.ts b/packages/syntax-tree/src/syntax-tree/primitives.ts
index 76c0196..f9a91b0 100644
--- a/packages/syntax-tree/src/syntax-tree/primitives.ts
+++ b/packages/syntax-tree/src/syntax-tree/primitives.ts
@@ -1,10 +1,14 @@
-import { Range } from "@knuckles/location";
+import { Range, type RawRange } from "@knuckles/location";
 
 export interface IdentifierInit {
   range: Range;
   value: string;
 }
 
+export interface RawIdentifier extends RawRange {
+  value: string;
+}
+
 export class Identifier extends Range {
   value: string;
 
@@ -12,6 +16,13 @@ export class Identifier extends Range {
     super(init.range.start, init.range.end);
     this.value = init.value;
   }
+
+  override toJSON(): RawIdentifier {
+    return {
+      ...super.toJSON(),
+      value: this.value,
+    };
+  }
 }
 
 export interface ExpressionInit {
@@ -19,6 +30,10 @@ export interface ExpressionInit {
   value: string;
 }
 
+export interface RawExpression extends RawRange {
+  value: string;
+}
+
 export class Expression extends Range {
   value: string;
 
@@ -26,17 +41,32 @@ export class Expression extends Range {
     super(init.range.start, init.range.end);
     this.value = init.value;
   }
+
+  override toJSON(): RawExpression {
+    return {
+      ...super.toJSON(),
+      value: this.value,
+    };
+  }
 }
 
 export interface StringLiteralInit {
   range: Range;
+  inner: Range;
+  value: string;
+  quote: '"' | "'" | null;
+}
+
+export interface RawStringLiteral extends RawRange {
   value: string;
   quote: '"' | "'" | null;
+  inner: RawRange;
 }
 
 export class StringLiteral extends Range {
   value: string;
   quote: '"' | "'" | null;
+  inner: Range;
 
   get text() {
     return this.quote + this.value + this.quote;
@@ -44,7 +74,17 @@ export class StringLiteral extends Range {
 
   constructor(init: StringLiteralInit) {
     super(init.range.start, init.range.end);
+    this.inner = init.inner;
     this.value = init.value;
     this.quote = init.quote;
   }
+
+  override toJSON(): RawStringLiteral {
+    return {
+      ...super.toJSON(),
+      value: this.value,
+      quote: this.quote,
+      inner: this.inner.toJSON(),
+    };
+  }
 }
diff --git a/packages/syntax-tree/src/syntax-tree/text.ts b/packages/syntax-tree/src/syntax-tree/text.ts
index d0d9168..c06c6ea 100644
--- a/packages/syntax-tree/src/syntax-tree/text.ts
+++ b/packages/syntax-tree/src/syntax-tree/text.ts
@@ -1,9 +1,14 @@
-import { Node, type NodeInit } from "./node.js";
+import { Node, type NodeInit, type RawNode } from "./node.js";
 
 export interface TextInit extends NodeInit {
   content: string;
 }
 
+export interface RawText extends RawNode {
+  type: "text";
+  content: string;
+}
+
 export class Text extends Node {
   content: string;
 
@@ -11,4 +16,12 @@ export class Text extends Node {
     super(init);
     this.content = init.content;
   }
+
+  override toJSON(): RawText {
+    return {
+      ...super.toJSON(),
+      type: "text",
+      content: this.content,
+    };
+  }
 }
diff --git a/packages/syntax-tree/src/syntax-tree/virtual-element.ts b/packages/syntax-tree/src/syntax-tree/virtual-element.ts
index 7da6c3b..57f5986 100644
--- a/packages/syntax-tree/src/syntax-tree/virtual-element.ts
+++ b/packages/syntax-tree/src/syntax-tree/virtual-element.ts
@@ -1,21 +1,35 @@
-import type { Binding } from "./binding.js";
-import type { Comment } from "./comment.js";
-import { ParentNode, type ParentNodeInit } from "./node.js";
-import type { Expression, Identifier, StringLiteral } from "./primitives.js";
-import { Range } from "@knuckles/location";
+import type { Binding, RawBinding } from "./binding.js";
+import type { Comment, RawComment } from "./comment.js";
+import { ParentNode, type ParentNodeInit, type RawParentNode } from "./node.js";
+import type {
+  Expression,
+  Identifier,
+  RawExpression,
+  RawIdentifier,
+  RawStringLiteral,
+  StringLiteral,
+} from "./primitives.js";
+import { Range, type RawRange } from "@knuckles/location";
 
 export interface VirtualElementInit extends ParentNodeInit {
   namespace: Identifier;
-  name: Identifier;
-  param: Expression;
+  expression: Expression;
   startComment: Comment;
   endComment: Comment;
 }
 
+export interface RawVirtualElement extends RawParentNode {
+  type: "virtual-element";
+  namespace: RawIdentifier;
+  expression: RawExpression;
+  startComment: RawComment;
+  endComment: RawComment;
+  inner: RawRange;
+}
+
 export class VirtualElement extends ParentNode {
   namespace: Identifier;
-  name: Identifier;
-  param: Expression;
+  expression: Expression;
   startComment: Comment;
   endComment: Comment;
   inner: Range;
@@ -23,24 +37,53 @@ export class VirtualElement extends ParentNode {
   constructor(init: VirtualElementInit) {
     super(init);
     this.namespace = init.namespace;
-    this.name = init.name;
-    this.param = init.param;
+    this.expression = init.expression;
     this.startComment = init.startComment;
     this.endComment = init.endComment;
     this.inner = new Range(init.startComment.end, init.endComment.start);
   }
+
+  override toJSON(): RawVirtualElement {
+    return {
+      ...super.toJSON(),
+      type: "virtual-element",
+      namespace: this.namespace.toJSON(),
+      expression: this.expression.toJSON(),
+      startComment: this.startComment.toJSON(),
+      endComment: this.endComment.toJSON(),
+      inner: this.inner.toJSON(),
+    };
+  }
 }
 
 export interface KoVirtualElementInit extends VirtualElementInit {
-  binding: Binding;
+  bindings: Iterable<Binding>;
+}
+
+export interface RawKoVirtualElementInit extends RawVirtualElement {
+  bindings: RawBinding[];
 }
 
 export class KoVirtualElement extends VirtualElement {
-  binding: Binding;
+  bindings: Binding[];
+
+  /**
+   * @deprecated Use {@link bindings} instead.
+   */
+  get binding() {
+    return this.bindings[0]!;
+  }
 
   constructor(init: KoVirtualElementInit) {
     super(init);
-    this.binding = init.binding;
+    this.bindings = Array.from(init.bindings);
+  }
+
+  override toJSON(): RawKoVirtualElementInit {
+    return {
+      ...super.toJSON(),
+      bindings: this.bindings.map((binding) => binding.toJSON()),
+    };
   }
 }
 
@@ -51,6 +94,12 @@ export interface ImportStatementInit {
   module: StringLiteral;
 }
 
+export interface RawImportStatement extends RawRange {
+  isTypeOnly: boolean;
+  identifier: RawIdentifier;
+  module: RawStringLiteral;
+}
+
 export class ImportStatement extends Range {
   isTypeOnly: boolean;
   identifier: Identifier;
@@ -62,17 +111,47 @@ export class ImportStatement extends Range {
     this.identifier = init.identifier;
     this.module = init.module;
   }
+
+  override toJSON(): RawImportStatement {
+    return {
+      ...super.toJSON(),
+      identifier: this.identifier.toJSON(),
+      isTypeOnly: this.isTypeOnly,
+      module: this.module.toJSON(),
+    };
+  }
 }
 
-export interface WithVirtualElementInit extends VirtualElementInit {
-  import: ImportStatement;
+export interface OkVirtualElementInit extends VirtualElementInit {
+  name: Identifier;
+  param: Expression;
+  import?: ImportStatement | undefined;
 }
 
-export class WithVirtualElement extends VirtualElement {
-  import: ImportStatement;
+export interface RawOkVirtualElement extends RawVirtualElement {
+  name: RawIdentifier;
+  param: RawExpression;
+  import: RawImportStatement | undefined;
+}
 
-  constructor(init: WithVirtualElementInit) {
+export class OkVirtualElement extends VirtualElement {
+  name: Identifier;
+  param: Expression;
+  import: ImportStatement | undefined;
+
+  constructor(init: OkVirtualElementInit) {
     super(init);
+    this.name = init.name;
+    this.param = init.param;
     this.import = init.import;
   }
+
+  override toJSON(): RawOkVirtualElement {
+    return {
+      ...super.toJSON(),
+      name: this.name.toJSON(),
+      param: this.param.toJSON(),
+      import: this.import?.toJSON(),
+    };
+  }
 }
diff --git a/packages/typescript/src/transpiler/transpiler.ts b/packages/typescript/src/transpiler/transpiler.ts
index 893ce19..80cd21c 100644
--- a/packages/typescript/src/transpiler/transpiler.ts
+++ b/packages/typescript/src/transpiler/transpiler.ts
@@ -279,8 +279,8 @@ class Renderer {
         return this.#renderKoVirtualElement(node);
       }
 
-      if (node instanceof ko.WithVirtualElement) {
-        return this.#renderWithVirtualElement(node);
+      if (node instanceof ko.OkVirtualElement) {
+        return this.#renderOkVirtualElement(node);
       }
     }
 
@@ -291,36 +291,46 @@ class Renderer {
     return ["if", "ifnot"].includes(binding.name.value);
   }
 
-  #renderWithVirtualElement(node: ko.WithVirtualElement): Chunk {
-    const childContext = new Chunk()
-      .append(`${ns}.hints.with(${ns}.type<`)
-      .while(
-        (chunk) =>
-          chunk
-            .append("typeof import(")
-            .append(node.import.module.text, { mirror: node.import.module })
-            .append(")")
-            .if(node.import.identifier.value !== "*", (chunk) =>
-              chunk.while(
-                (chunk) =>
-                  chunk
-                    .append('["')
-                    .append(quote(node.import.identifier.value).slice(1, -1), {
-                      mirror: node.import.identifier,
-                    })
-                    .append('"]'),
-                { blame: node.import.identifier },
+  #renderOkVirtualElement(node: ko.OkVirtualElement): Chunk | undefined {
+    if (node.name.value === "with" || node.name.value === "using") {
+      const childContext = new Chunk()
+        .append(`${ns}.hints.with(${ns}.type<`)
+        .while(
+          (chunk) =>
+            chunk
+              .append("typeof import(")
+              .append(node.import!.module.text, { mirror: node.import!.module })
+              .append(")")
+              .if(node.import!.identifier.value !== "*", (chunk) =>
+                chunk.while(
+                  (chunk) =>
+                    chunk
+                      .append('["')
+                      .append(
+                        quote(node.import!.identifier.value).slice(1, -1),
+                        {
+                          mirror: node.import!.identifier,
+                        },
+                      )
+                      .append('"]'),
+                  { blame: node.import!.identifier },
+                ),
               ),
-            ),
-        { blame: node.import },
-      )
-      .append(">(), $context)");
+          { blame: node.import! },
+        )
+        .append(">(), $context)");
 
-    return this.#renderClosure(this.#renderNodes(node.children), childContext);
+      return this.#renderClosure(
+        this.#renderNodes(node.children),
+        childContext,
+      );
+    }
+
+    return undefined;
   }
 
   #renderKoVirtualElement(node: ko.KoVirtualElement): Chunk {
-    return this.#renderParent([node.binding], node.children);
+    return this.#renderParent(node.bindings, node.children);
   }
 
   #renderElement(node: ko.Element): Chunk {