diff --git a/package.json b/package.json
index dfac084f3da..f663292d885 100644
--- a/package.json
+++ b/package.json
@@ -354,6 +354,8 @@
       "@ember/utils/lib/type-of.js": "ember-source/@ember/utils/lib/type-of.js",
       "@ember/version/index.js": "ember-source/@ember/version/index.js",
       "@glimmer/destroyable/index.js": "ember-source/@glimmer/destroyable/index.js",
+      "@glimmer/dom/index.js": "ember-source/@glimmer/dom/index.js",
+      "@glimmer/dom/vm/index.js": "ember-source/@glimmer/dom/vm/index.js",
       "@glimmer/encoder/index.js": "ember-source/@glimmer/encoder/index.js",
       "@glimmer/env/index.js": "ember-source/@glimmer/env/index.js",
       "@glimmer/global-context/index.js": "ember-source/@glimmer/global-context/index.js",
diff --git a/packages/@glimmer/compiler/index.ts b/packages/@glimmer/compiler/index.ts
index 72dbcad463f..7d6d59283f1 100644
--- a/packages/@glimmer/compiler/index.ts
+++ b/packages/@glimmer/compiler/index.ts
@@ -12,3 +12,15 @@ export { defaultId, precompile, precompileJSON, type PrecompileOptions } from '.
 
 // exported only for tests!
 export { default as WireFormatDebugger } from './lib/wire-format-debug';
+
+// EXPERIMENTAL: compile strict-mode templates directly to DOM operations
+export {
+  CodegenError,
+  codegenBabelPlugin,
+  type CodegenBabelPluginOptions,
+  compileToDOM,
+  type CompileToDOMOptions,
+  generate as generateDOM,
+  type GenerateOptions as GenerateDOMOptions,
+  ImportCollector,
+} from './lib/codegen';
diff --git a/packages/@glimmer/compiler/lib/codegen/babel-plugin.ts b/packages/@glimmer/compiler/lib/codegen/babel-plugin.ts
new file mode 100644
index 00000000000..c8faff1fee6
--- /dev/null
+++ b/packages/@glimmer/compiler/lib/codegen/babel-plugin.ts
@@ -0,0 +1,202 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-return -- babel's types are not a dependency of this package */
+import type * as ASTv1 from '@glimmer/syntax/lib/v1/nodes-v1';
+
+import type { ImportInfo } from './generate';
+
+import { generate } from './generate';
+
+export interface CodegenBabelPluginOptions {
+  /**
+   * Parses a template into ASTv1. (`preprocess` from `@glimmer/syntax`, or
+   * `_preprocess` from `ember-source/ember-template-compiler`)
+   */
+  preprocess: (source: string, options: { strictMode: boolean }) => unknown;
+
+  /**
+   * Where the runtime helpers are imported from.
+   */
+  runtimeModule?: string;
+
+  /**
+   * Make compiled templates renderable by the VM too (e.g. as route
+   * templates), via `${runtimeModule}/vm`.
+   */
+  vmInterop?: boolean;
+
+  /**
+   * JavaScript globals that templates may use without importing them.
+   */
+  isGlobal?: (name: string) => boolean;
+}
+
+/**
+ * With `vmInterop`, these come from `${runtimeModule}/vm`.
+ */
+const VM_RUNTIME = new Set(['outlet', 'setTemplate', 'template']);
+
+/**
+ * The modules that `content-tag` (gjs/gts) and authors use for `template()`.
+ */
+const TEMPLATE_MODULES = new Set(['@ember/template-compiler', '@ember/template-compiler/runtime']);
+
+function importedName(specifier: any): string {
+  return specifier.imported.type === 'StringLiteral'
+    ? specifier.imported.value
+    : specifier.imported.name;
+}
+
+interface State {
+  codegen: {
+    imports: Map<string, Map<string, string>>;
+    hoisted: string[];
+    templates: number;
+  };
+}
+
+/**
+ * EXPERIMENTAL: compiles `template(...)` calls from strict-mode (gjs/gts)
+ * modules directly to DOM operations, in place.
+ *
+ * Template-scoped values are resolved by JavaScript itself: the compiled
+ * template is emitted where the `template()` call was, so it simply closes
+ * over the module's bindings.
+ */
+export function codegenBabelPlugin(babel: any, options: CodegenBabelPluginOptions) {
+  let t = babel.types;
+  let runtimeModule = options.runtimeModule ?? '@glimmer/dom';
+  let vmInterop = options.vmInterop ?? false;
+  let moduleFor = (name: string) =>
+    vmInterop && VM_RUNTIME.has(name) ? `${runtimeModule}/vm` : runtimeModule;
+
+  let compileTemplate = (path: any, state: State) => {
+    let callee = path.get('callee');
+    if (!callee.isIdentifier()) return;
+
+    let binding = path.scope.getBinding(callee.node.name);
+    if (!binding || binding.kind !== 'module' || !binding.path.isImportSpecifier()) return;
+    if (!TEMPLATE_MODULES.has(binding.path.parent.source.value)) return;
+    if (importedName(binding.path.node) !== 'template') return;
+
+    let [source, templateOptions] = path.node.arguments;
+    let text: string;
+
+    if (t.isTemplateLiteral(source) && source.expressions.length === 0) {
+      text = source.quasis[0].value.cooked;
+    } else if (t.isStringLiteral(source)) {
+      text = source.value;
+    } else {
+      throw path.buildCodeFrameError('template() must be called with a static string');
+    }
+
+    let component: unknown = null;
+    if (templateOptions && t.isObjectExpression(templateOptions)) {
+      for (let property of templateOptions.properties) {
+        if (t.isObjectProperty(property) && t.isIdentifier(property.key, { name: 'component' })) {
+          component = property.value;
+        }
+      }
+    }
+
+    let program = path.scope.getProgramParent();
+    let { imports } = state.codegen;
+
+    let local = (module: string, name: string) => {
+      let names = imports.get(module);
+      if (!names) imports.set(module, (names = new Map()));
+      let existing = names.get(name);
+      if (existing) return existing;
+      let id: string = program.generateUid(name.replace(/\W/gu, '_'));
+      names.set(name, id);
+      return id;
+    };
+
+    let importOf = (name: string): ImportInfo | undefined => {
+      let found = path.scope.getBinding(name);
+      if (!found || found.kind !== 'module') return undefined;
+      let module = found.path.parent.source.value as string;
+      if (found.path.isImportSpecifier()) return { module, name: importedName(found.path.node) };
+      if (found.path.isImportDefaultSpecifier()) return { module, name: 'default' };
+      return undefined;
+    };
+
+    let ast = options.preprocess(text, { strictMode: true }) as ASTv1.Template;
+
+    let { hoisted, expression } = generate(ast, {
+      isLexical: (name) => Boolean(path.scope.getBinding(name)),
+      importOf,
+      runtime: (name) => local(moduleFor(name), name),
+      importBinding: local,
+      prefix: `${state.codegen.templates++}_`,
+      vmInterop,
+      ...(options.isGlobal ? { isGlobal: options.isGlobal } : {}),
+    });
+
+    state.codegen.hoisted.push(...hoisted);
+
+    let replacement = babel.template.expression.ast(expression, { placeholderPattern: false });
+
+    if (component) {
+      replacement = t.callExpression(t.identifier(local(moduleFor('setTemplate'), 'setTemplate')), [
+        component,
+        replacement,
+      ]);
+    }
+
+    path.replaceWith(replacement);
+  };
+
+  let addImports = (path: any, state: State) => {
+    let { imports, hoisted } = state.codegen;
+    if (imports.size === 0) return;
+
+    let declarations = [...imports].map(([module, names]) =>
+      t.importDeclaration(
+        [...names].map(([name, local]) =>
+          t.importSpecifier(t.identifier(local), t.identifier(name))
+        ),
+        t.stringLiteral(module)
+      )
+    );
+
+    let statements = hoisted.flatMap((code) =>
+      babel.template.statements.ast(code, { placeholderPattern: false })
+    );
+
+    path.unshiftContainer('body', [...declarations, ...statements]);
+
+    // The `template` import is no longer used.
+    path.scope.crawl();
+    for (let statement of path.get('body')) {
+      if (!statement.isImportDeclaration()) continue;
+      if (!TEMPLATE_MODULES.has(statement.node.source.value)) continue;
+
+      for (let specifier of statement.get('specifiers')) {
+        let binding = path.scope.getBinding(specifier.node.local.name);
+        if (binding && !binding.referenced) specifier.remove();
+      }
+
+      if (statement.node.specifiers.length === 0) statement.remove();
+    }
+  };
+
+  return {
+    name: 'glimmer-codegen',
+    // Everything happens in `pre` (rather than in a visitor), so that this
+    // plugin compiles `template()` before other template plugins see it
+    // (babel-plugin-ember-template-compilation also does its work in `pre`).
+    // List this plugin first.
+    pre(this: State, file: any) {
+      this.codegen = { imports: new Map(), hoisted: [], templates: 0 };
+      file.path.traverse(
+        {
+          CallExpression: (call: any) => {
+            compileTemplate(call, this);
+          },
+        },
+        this
+      );
+      addImports(file.path, this);
+    },
+    visitor: {},
+  };
+}
diff --git a/packages/@glimmer/compiler/lib/codegen/generate.ts b/packages/@glimmer/compiler/lib/codegen/generate.ts
new file mode 100644
index 00000000000..1a064ff7568
--- /dev/null
+++ b/packages/@glimmer/compiler/lib/codegen/generate.ts
@@ -0,0 +1,1074 @@
+/**
+ * EXPERIMENTAL: compile a strict-mode template's ASTv1 directly to JavaScript
+ * that builds and updates DOM, using the helpers from `@glimmer/dom`.
+ *
+ * There is no wire format and no VM bytecode: static markup becomes an HTML
+ * string that is cloned, and each dynamic part of the template becomes one
+ * call to a runtime helper (with thunks for the values it reads).
+ *
+ * This module only depends on AST *types*, so it can be used with any
+ * `preprocess` (e.g. the one exported by ember-template-compiler).
+ */
+import type * as ASTv1 from '@glimmer/syntax/lib/v1/nodes-v1';
+
+export interface ImportInfo {
+  module: string;
+  name: string;
+}
+
+export interface GenerateOptions {
+  /**
+   * Is `name` a JavaScript binding that is in scope where the template is
+   * defined? (strict mode: this is the only way to reference values)
+   */
+  isLexical(name: string): boolean;
+
+  /**
+   * If `name` is bound by an import, where it was imported from. Used to
+   * specialize well-known helpers and modifiers (`on`, `fn`, `hash`, ...).
+   */
+  importOf?(name: string): ImportInfo | undefined;
+
+  /**
+   * Returns the identifier to use for a runtime helper from `@glimmer/dom`.
+   */
+  runtime(name: string): string;
+
+  /**
+   * Returns the identifier to use for a named import (used for built-in
+   * keywords that are auto-imported but not specialized).
+   */
+  importBinding(module: string, name: string): string;
+
+  /**
+   * JavaScript globals that strict-mode templates may reference without
+   * importing them (e.g. `JSON`, `console`; see RFC 1070).
+   */
+  isGlobal?(name: string): boolean;
+
+  /**
+   * Prefix for generated identifiers (including hoisted declarations), so
+   * that several templates can be compiled into one module.
+   */
+  prefix?: string;
+
+  /**
+   * Import `template`/`setTemplate` from `@glimmer/dom/vm`, so that compiled
+   * components can be rendered by the VM too (see the babel plugin).
+   */
+  vmInterop?: boolean;
+}
+
+export interface Generated {
+  /**
+   * Module-level declarations (static HTML) that the expression references.
+   */
+  hoisted: string[];
+
+  /**
+   * An expression that evaluates to the compiled template.
+   */
+  expression: string;
+}
+
+export class CodegenError extends Error {
+  constructor(message: string, node?: { loc?: unknown }) {
+    let loc = node?.loc as { startPosition?: { line: number; column: number } } | undefined;
+    let where = loc?.startPosition
+      ? ` (line ${loc.startPosition.line}, column ${loc.startPosition.column})`
+      : '';
+    super(`${message}${where}`);
+    this.name = 'CodegenError';
+  }
+}
+
+const VOID_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'command',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
+
+/**
+ * Keywords that are part of the template language itself.
+ */
+const KEYWORDS = new Set([
+  'action',
+  'component',
+  'debugger',
+  'each',
+  'each-in',
+  'has-block',
+  'has-block-params',
+  'helper',
+  'if',
+  'in-element',
+  'let',
+  'log',
+  'modifier',
+  'mount',
+  'mut',
+  'outlet',
+  'readonly',
+  'unbound',
+  'unless',
+  'yield',
+]);
+
+/**
+ * Built-ins that strict mode templates may use without importing them.
+ */
+const AUTO_IMPORTED: Record<string, string> = {
+  and: '@ember/helper',
+  array: '@ember/helper',
+  element: '@ember/helper',
+  eq: '@ember/helper',
+  fn: '@ember/helper',
+  gt: '@ember/helper',
+  gte: '@ember/helper',
+  hash: '@ember/helper',
+  lt: '@ember/helper',
+  lte: '@ember/helper',
+  neq: '@ember/helper',
+  not: '@ember/helper',
+  on: '@ember/modifier',
+  or: '@ember/helper',
+};
+
+/**
+ * Imports that we know the semantics of, and compile inline.
+ */
+const SPECIALIZED: Record<string, Set<string>> = {
+  '@ember/helper': new Set([
+    'and',
+    'array',
+    'concat',
+    'element',
+    'eq',
+    'fn',
+    'get',
+    'gt',
+    'gte',
+    'hash',
+    'lt',
+    'lte',
+    'neq',
+    'not',
+    'or',
+  ]),
+  '@ember/modifier': new Set(['on']),
+};
+
+const COMPARISONS: Record<string, string> = {
+  eq: '===',
+  neq: '!==',
+  gt: '>',
+  gte: '>=',
+  lt: '<',
+  lte: '<=',
+};
+
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/u;
+
+const q = (value: string) => JSON.stringify(value);
+
+function key(name: string): string {
+  return IDENTIFIER.test(name) ? name : q(name);
+}
+
+function prop(name: string): string {
+  return IDENTIFIER.test(name) ? `.${name}` : `[${q(name)}]`;
+}
+
+function escapeText(text: string): string {
+  return text.replace(/&/gu, '&amp;').replace(/</gu, '&lt;').replace(/>/gu, '&gt;');
+}
+
+function escapeAttr(text: string): string {
+  return text.replace(/&/gu, '&amp;').replace(/"/gu, '&quot;');
+}
+
+class Scope {
+  #names = new Map<string, string>();
+
+  constructor(readonly parent: Scope | null) {}
+
+  bind(name: string, js: string): void {
+    this.#names.set(name, js);
+  }
+
+  lookup(name: string): string | undefined {
+    return this.#names.get(name) ?? this.parent?.lookup(name);
+  }
+
+  child(): Scope {
+    return new Scope(this);
+  }
+}
+
+/**
+ * The function body currently being generated. Helper invocations are
+ * hoisted into it (right before the statement that uses them), so they are
+ * created once per block instance.
+ */
+interface Body {
+  lines: string[];
+  scope: Scope;
+}
+
+type Slot = ASTv1.ElementNode | ASTv1.MustacheStatement | ASTv1.BlockStatement;
+
+type Op =
+  | { kind: 'element'; path: number[]; node: ASTv1.ElementNode }
+  | { kind: 'slot'; path: number[]; node: Slot };
+
+class Generator {
+  #uid = 0;
+  #hoisted: string[] = [];
+  #html = new Map<string, string>();
+
+  constructor(readonly options: GenerateOptions) {}
+
+  get hoisted(): string[] {
+    return this.#hoisted;
+  }
+
+  uid(prefix: string): string {
+    return `$_${this.options.prefix ?? ''}${prefix}${++this.#uid}`;
+  }
+
+  rt(name: string): string {
+    return this.options.runtime(name);
+  }
+
+  template(ast: ASTv1.Template): string {
+    let scope = new Scope(null);
+    let body = this.body(ast.body, scope);
+    return `${this.rt('template')}(($_b, $_ctx) => {\nconst $_s = $_ctx.self, $_a = $_ctx.args;\n${body}\n})`;
+  }
+
+  /////////////////////////////////////////////////////////////////////////
+  // Blocks of content
+  /////////////////////////////////////////////////////////////////////////
+
+  /**
+   * Generate a function body that renders `statements`, and returns the DOM.
+   */
+  body(statements: ASTv1.Statement[], scope: Scope): string {
+    let body: Body = { lines: [], scope };
+    let ops: Op[] = [];
+    let markup = this.html(statements, [], ops, body);
+
+    let root = this.uid('r');
+    body.lines.push(`const ${root} = ${this.rt('clone')}($_b, ${this.hoistHTML(markup)});`);
+
+    // Resolve every node we need before any helper mutates the DOM.
+    let refs = ops.map((op) => {
+      let ref = this.uid('n');
+      body.lines.push(`const ${ref} = ${this.rt('at')}(${[root, ...op.path].join(', ')});`);
+      return ref;
+    });
+
+    ops.forEach((op, i) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- same length
+      let ref = refs[i]!;
+      if (op.kind === 'element') {
+        this.elementOps(op.node, ref, body);
+      } else {
+        this.slot(op.node, ref, body);
+      }
+    });
+
+    body.lines.push(`return ${root};`);
+    return body.lines.join('\n');
+  }
+
+  blockFn(block: ASTv1.Block | null | undefined, scope: Scope): string {
+    if (!block) return 'undefined';
+    return this.blockFnWith(block.body, block.blockParams, scope);
+  }
+
+  blockFnWith(
+    statements: ASTv1.Statement[],
+    params: string[],
+    scope: Scope,
+    bindParam?: (param: string, index: number, inner: Scope) => void
+  ): string {
+    let inner = scope.child();
+    let names = params.map((name, i) => {
+      let id = this.uid('p');
+      if (bindParam) {
+        bindParam(id, i, inner);
+      } else {
+        inner.bind(name, `${id}()`);
+      }
+      return id;
+    });
+
+    return `($_b${names.map((n) => `, ${n}`).join('')}) => {\n${this.body(statements, inner)}\n}`;
+  }
+
+  hoistHTML(markup: string): string {
+    let existing = this.#html.get(markup);
+    if (existing) return existing;
+
+    let id = this.uid('t');
+    this.#hoisted.push(`const ${id} = ${this.rt('html')}(${q(markup)});`);
+    this.#html.set(markup, id);
+    return id;
+  }
+
+  /**
+   * Build the static HTML for a list of statements, recording the dynamic
+   * parts (and the child-index path to their node) in `ops`.
+   */
+  html(statements: ASTv1.Statement[], path: number[], ops: Op[], body: Body): string {
+    let out = '';
+    let index = 0;
+    let text: string | null = null;
+
+    // Adjacent text is merged by the HTML parser, so it must be one node in
+    // our model too.
+    let flushText = () => {
+      if (text) {
+        out += escapeText(text);
+        index++;
+      }
+      text = null;
+    };
+
+    for (let statement of statements) {
+      switch (statement.type) {
+        case 'TextNode':
+          text = (text ?? '') + statement.chars;
+          break;
+
+        case 'MustacheCommentStatement':
+          break;
+
+        case 'CommentStatement':
+          flushText();
+          out += `<!--${statement.value}-->`;
+          index++;
+          break;
+
+        case 'MustacheStatement': {
+          let literal = staticText(statement);
+          if (literal !== null) {
+            text = (text ?? '') + literal;
+            break;
+          }
+          flushText();
+          out += '<!>';
+          ops.push({ kind: 'slot', path: [...path, index++], node: statement });
+          break;
+        }
+
+        case 'BlockStatement':
+          flushText();
+          out += '<!>';
+          ops.push({ kind: 'slot', path: [...path, index++], node: statement });
+          break;
+
+        case 'ElementNode':
+          flushText();
+          if (this.isComponent(statement, body.scope)) {
+            out += '<!>';
+            ops.push({ kind: 'slot', path: [...path, index++], node: statement });
+          } else {
+            out += this.element(statement, [...path, index++], ops, body);
+          }
+          break;
+      }
+    }
+
+    flushText();
+    return out;
+  }
+
+  element(node: ASTv1.ElementNode, path: number[], ops: Op[], body: Body): string {
+    let { tag } = node;
+    let out = `<${tag}`;
+    let dynamic = node.modifiers.length > 0;
+    let splatted = false;
+
+    for (let attr of node.attributes) {
+      if (attr.name === '...attributes') {
+        splatted = dynamic = true;
+      } else if (attr.value.type === 'TextNode' && !splatted) {
+        out +=
+          attr.value.chars === ''
+            ? ` ${attr.name}`
+            : ` ${attr.name}="${escapeAttr(attr.value.chars)}"`;
+      } else {
+        dynamic = true;
+      }
+    }
+
+    out += '>';
+
+    // attributes are applied before children are rendered
+    if (dynamic) ops.push({ kind: 'element', path, node });
+
+    if (VOID_ELEMENTS.has(tag)) return out;
+
+    let children = this.html(node.children, path, ops, body);
+
+    // The HTML parser drops a newline at the very start of these.
+    if ((tag === 'pre' || tag === 'textarea' || tag === 'listing') && children.startsWith('\n')) {
+      children = `\n${children}`;
+    }
+
+    return `${out}${children}</${tag}>`;
+  }
+
+  isComponent(node: ASTv1.ElementNode, scope: Scope): boolean {
+    let { head, tail } = node.path;
+
+    if (head.type !== 'VarHead') return true;
+    if (tail.length > 0) return true;
+    if (scope.lookup(head.name) !== undefined) return true;
+    if (this.options.isLexical(head.name)) return true;
+
+    return /^[A-Z]/u.test(head.name);
+  }
+
+  /////////////////////////////////////////////////////////////////////////
+  // Elements
+  /////////////////////////////////////////////////////////////////////////
+
+  elementOps(node: ASTv1.ElementNode, element: string, body: Body): void {
+    let splatted = false;
+
+    for (let attr of node.attributes) {
+      if (attr.name === '...attributes') {
+        splatted = true;
+        body.lines.push(`${this.rt('splat')}($_b, ${element}, $_ctx);`);
+      } else if (attr.value.type === 'TextNode') {
+        // Static attributes after `...attributes` must win over it, so they
+        // are applied in order rather than being part of the markup.
+        if (splatted) {
+          body.lines.push(
+            `${this.rt('attr')}($_b, ${element}, ${q(attr.name)}, ${q(attr.value.chars)});`
+          );
+        }
+      } else {
+        body.lines.push(
+          `${this.rt('attr')}($_b, ${element}, ${q(attr.name)}, () => ${this.attrValue(attr.value, body)});`
+        );
+      }
+    }
+
+    for (let modifier of node.modifiers) {
+      this.modifier(modifier, element, body);
+    }
+  }
+
+  attrValue(value: ASTv1.AttrValue, body: Body): string {
+    switch (value.type) {
+      case 'TextNode':
+        return q(value.chars);
+      case 'MustacheStatement':
+        return this.mustacheValue(value, body);
+      case 'ConcatStatement':
+        return `(${[
+          '""',
+          ...value.parts.map((part) =>
+            part.type === 'TextNode'
+              ? q(part.chars)
+              : `${this.rt('str')}(${this.mustacheValue(part, body)})`
+          ),
+        ].join(' + ')})`;
+    }
+  }
+
+  modifier(node: ASTv1.ElementModifierStatement, element: string, body: Body): void {
+    let builtin = this.builtin(node.path, body.scope);
+
+    if (builtin === 'on') {
+      // missing arguments are reported at runtime, like the `on` modifier does
+      let [event, handler] = node.params;
+
+      let options = node.hash.pairs.length
+        ? `, { ${node.hash.pairs.map((p) => `${key(p.key)}: ${this.expr(p.value, body)}`).join(', ')} }`
+        : '';
+
+      body.lines.push(
+        `${this.rt('listen')}($_b, ${element}, ${event ? this.expr(event, body) : 'undefined'}, () => ${handler ? this.expr(handler, body) : 'undefined'}${options});`
+      );
+      return;
+    }
+
+    if (builtin !== null) {
+      throw new CodegenError(`\`${builtin}\` cannot be used as a modifier`, node);
+    }
+
+    body.lines.push(
+      `${this.rt('modifier')}($_b, ${element}, ${this.expr(node.path, body)}, ${this.positional(
+        node.params,
+        body
+      )}, ${this.named(node.hash, body)});`
+    );
+  }
+
+  /////////////////////////////////////////////////////////////////////////
+  // Dynamic content
+  /////////////////////////////////////////////////////////////////////////
+
+  slot(node: Slot, anchor: string, body: Body): void {
+    switch (node.type) {
+      case 'ElementNode': {
+        this.componentElement(node, anchor, body);
+        return;
+      }
+      case 'MustacheStatement': {
+        this.append(node, anchor, body);
+        return;
+      }
+      case 'BlockStatement': {
+        this.block(node, anchor, body);
+        return;
+      }
+    }
+  }
+
+  append(node: ASTv1.MustacheStatement, anchor: string, body: Body): void {
+    let { path, params, hash } = node;
+    let flags = node.trusting ? 2 : 0;
+
+    if (path.type !== 'PathExpression') {
+      body.lines.push(
+        `${this.rt('content')}($_b, ${anchor}, () => ${this.mustacheValue(node, body)}, ${flags});`
+      );
+      return;
+    }
+
+    let builtin = this.builtin(path, body.scope);
+
+    switch (builtin) {
+      case 'yield': {
+        let to = hash.pairs.find((p) => p.key === 'to');
+        let name = to ? this.staticString(to.value, 'yield to=') : 'default';
+        body.lines.push(
+          `${this.rt('yieldTo')}($_b, ${anchor}, $_ctx, ${q(name === 'inverse' ? 'else' : name)}, [${params
+            .map((p) => `() => ${this.expr(p, body)}`)
+            .join(', ')}]);`
+        );
+        return;
+      }
+
+      case 'debugger':
+        body.lines.push('debugger;');
+        return;
+
+      case 'outlet':
+        if (this.options.vmInterop) {
+          // The VM renders the route's `<@outlet />` into this spot, in the
+          // same render tree as the route (see `@glimmer/dom/vm`).
+          body.lines.push(`${this.rt('outlet')}($_b, ${anchor});`);
+        } else {
+          // Route templates receive their outlet as `@outlet` (the same as
+          // ember's own compiler turning `{{outlet}}` into `<@outlet />`).
+          body.lines.push(
+            `${this.rt('invokeDyn')}($_b, ${anchor}, () => $_a.outlet, {}, null, null);`
+          );
+        }
+        return;
+
+      case 'component': {
+        let [definition, ...rest] = params;
+        if (!definition) throw new CodegenError('`{{component}}` requires a component', node);
+        if (rest.length)
+          throw new CodegenError('positional arguments to components are not supported yet', node);
+
+        body.lines.push(
+          `${this.rt('invokeDyn')}($_b, ${anchor}, () => ${this.expr(definition, body)}, ${
+            this.named(hash, body) ?? '{}'
+          }, null, null);`
+        );
+        return;
+      }
+    }
+
+    if (builtin === null && (params.length > 0 || hash.pairs.length > 0)) {
+      // `{{foo a b=c}}` may invoke a component or a helper; which one depends
+      // on what `foo` is.
+      let isStatic =
+        path.head.type === 'VarHead' &&
+        path.tail.length === 0 &&
+        body.scope.lookup(path.head.name) === undefined;
+      let definition = this.expr(path, body);
+      body.lines.push(
+        `${this.rt('appendCall')}($_b, ${anchor}, ${isStatic ? definition : `() => ${definition}`}, ${isStatic}, ${this.positional(
+          params,
+          body
+        )}, ${this.named(hash, body)}, ${flags});`
+      );
+      return;
+    }
+
+    if (params.length === 0 && hash.pairs.length === 0 && builtin === null) {
+      // `{{foo}}` with a lexical `foo` may be a helper, invoked with no args
+      if (
+        path.head.type === 'VarHead' &&
+        path.tail.length === 0 &&
+        body.scope.lookup(path.head.name) === undefined
+      ) {
+        flags |= 1;
+      }
+    }
+
+    body.lines.push(
+      `${this.rt('content')}($_b, ${anchor}, () => ${this.mustacheValue(node, body)}, ${flags});`
+    );
+  }
+
+  /**
+   * The value of `{{path params hash}}`.
+   */
+  mustacheValue(node: ASTv1.MustacheStatement, body: Body): string {
+    if (node.params.length === 0 && node.hash.pairs.length === 0) {
+      if (node.path.type === 'PathExpression' && this.builtin(node.path, body.scope) === null) {
+        return this.expr(node.path, body);
+      }
+      if (node.path.type !== 'PathExpression' && node.path.type !== 'SubExpression') {
+        return this.expr(node.path, body);
+      }
+    }
+
+    return this.call(node.path, node.params, node.hash, node, body);
+  }
+
+  block(node: ASTv1.BlockStatement, anchor: string, body: Body): void {
+    let { path, params, hash, program, inverse } = node;
+    let builtin = path.type === 'PathExpression' ? this.builtin(path, body.scope) : null;
+    let { scope } = body;
+
+    switch (builtin) {
+      case 'if':
+      case 'unless': {
+        let [condition] = params;
+        if (!condition) throw new CodegenError(`\`${builtin}\` requires a condition`, node);
+        let test = `${this.rt('bool')}(${this.expr(condition, body)})`;
+        body.lines.push(
+          `${this.rt('when')}($_b, ${anchor}, () => ${builtin === 'unless' ? `!${test}` : test}, ${this.blockFn(
+            program,
+            scope
+          )}, ${this.blockFn(inverse, scope)});`
+        );
+        return;
+      }
+
+      case 'each': {
+        let [list] = params;
+        if (!list) throw new CodegenError('`each` requires a list', node);
+        let keyPair = hash.pairs.find((p) => p.key === 'key');
+        body.lines.push(
+          `${this.rt('each')}($_b, ${anchor}, () => ${this.expr(list, body)}, ${
+            keyPair ? this.expr(keyPair.value, body) : 'null'
+          }, ${this.blockFn(program, scope)}, ${this.blockFn(inverse, scope)});`
+        );
+        return;
+      }
+
+      case 'each-in': {
+        let [object] = params;
+        if (!object) throw new CodegenError('`each-in` requires an object', node);
+        let item = this.blockFnWith(program.body, ['entry'], scope, (id, _i, inner) => {
+          let [k, v] = program.blockParams;
+          if (k) inner.bind(k, `${id}()[0]`);
+          if (v) inner.bind(v, `${id}()[1]`);
+        });
+        body.lines.push(
+          `${this.rt('each')}($_b, ${anchor}, () => ${this.rt('entries')}(${this.expr(
+            object,
+            body
+          )}), "0", ${item}, ${this.blockFn(inverse, scope)});`
+        );
+        return;
+      }
+
+      case 'let': {
+        let inner = scope.child();
+        program.blockParams.forEach((name, i) => {
+          let value = params[i];
+          let id = this.uid('l');
+          body.lines.push(
+            `const ${id} = ${this.rt('memo')}(() => ${value ? this.expr(value, body) : 'undefined'});`
+          );
+          inner.bind(name, `${id}()`);
+        });
+        body.lines.push(
+          `${this.rt('scope')}($_b, ${anchor}, ($_b) => {\n${this.body(program.body, inner)}\n});`
+        );
+        return;
+      }
+
+      case 'in-element': {
+        let [destination] = params;
+        if (!destination) throw new CodegenError('`in-element` requires a destination', node);
+        let append = hash.pairs.some((p) => p.key === 'insertBefore');
+        body.lines.push(
+          `${this.rt('inElement')}($_b, () => ${this.expr(destination, body)}, ${append}, ${this.blockFn(
+            program,
+            scope
+          )});`
+        );
+        return;
+      }
+
+      case 'component': {
+        let [definition] = params;
+        if (!definition) throw new CodegenError('`{{#component}}` requires a component', node);
+        body.lines.push(
+          `${this.rt('invokeDyn')}($_b, ${anchor}, () => ${this.expr(definition, body)}, ${
+            this.named(hash, body) ?? '{}'
+          }, ${this.blocksObject(program, inverse, scope)}, null);`
+        );
+        return;
+      }
+
+      case null:
+        break;
+
+      default:
+        throw new CodegenError(
+          `\`{{#${builtin}}}\` is not supported by the codegen compiler yet`,
+          node
+        );
+    }
+
+    if (params.length > 0) {
+      throw new CodegenError('positional arguments to components are not supported yet', node);
+    }
+
+    // `{{#Foo}}...{{/Foo}}`: a curly component invocation
+    this.invocation(
+      path as ASTv1.PathExpression,
+      anchor,
+      this.named(hash, body) ?? '{}',
+      this.blocksObject(program, inverse, scope),
+      'null',
+      body
+    );
+  }
+
+  blocksObject(
+    program: ASTv1.Block,
+    inverse: ASTv1.Block | null | undefined,
+    scope: Scope
+  ): string {
+    let entries = [`default: ${this.blockFn(program, scope)}`];
+    if (inverse) entries.push(`else: ${this.blockFn(inverse, scope)}`);
+    return `{ ${entries.join(', ')} }`;
+  }
+
+  componentElement(node: ASTv1.ElementNode, anchor: string, body: Body): void {
+    let named: string[] = [];
+    let attrs: ASTv1.AttrNode[] = [];
+
+    for (let attr of node.attributes) {
+      if (attr.name.startsWith('@')) {
+        named.push(`${key(attr.name.slice(1))}: () => ${this.attrValue(attr.value, body)}`);
+      } else {
+        attrs.push(attr);
+      }
+    }
+
+    let attrsFn = 'null';
+    if (attrs.length > 0 || node.modifiers.length > 0) {
+      // There is no markup for these, so every attribute is applied in order.
+      let inner: Body = { lines: [], scope: body.scope };
+      for (let attr of attrs) {
+        if (attr.name === '...attributes') {
+          inner.lines.push(`${this.rt('splat')}($_b, $_el, $_ctx);`);
+        } else {
+          let value =
+            attr.value.type === 'TextNode'
+              ? q(attr.value.chars)
+              : `() => ${this.attrValue(attr.value, inner)}`;
+          inner.lines.push(`${this.rt('attr')}($_b, $_el, ${q(attr.name)}, ${value});`);
+        }
+      }
+      for (let modifier of node.modifiers) {
+        this.modifier(modifier, '$_el', inner);
+      }
+      attrsFn = `($_b, $_el) => {\n${inner.lines.join('\n')}\n}`;
+    }
+
+    let blocks = 'null';
+    let namedBlocks = node.children.filter(
+      (c): c is ASTv1.ElementNode => c.type === 'ElementNode' && c.tag.startsWith(':')
+    );
+
+    if (namedBlocks.length > 0) {
+      blocks = `{ ${namedBlocks
+        .map(
+          (b) =>
+            `${key(b.tag.slice(1))}: ${this.blockFnWith(
+              b.children,
+              b.params.map((p) => p.name),
+              body.scope
+            )}`
+        )
+        .join(', ')} }`;
+    } else if (node.children.length > 0) {
+      blocks = `{ default: ${this.blockFnWith(
+        node.children,
+        node.params.map((p) => p.name),
+        body.scope
+      )} }`;
+    }
+
+    this.invocation(node.path, anchor, `{ ${named.join(', ')} }`, blocks, attrsFn, body);
+  }
+
+  invocation(
+    path: ASTv1.PathExpression,
+    anchor: string,
+    named: string,
+    blocks: string,
+    attrs: string,
+    body: Body
+  ): void {
+    let { head, tail } = path;
+    let isStatic =
+      head.type === 'VarHead' &&
+      tail.length === 0 &&
+      body.scope.lookup(head.name) === undefined &&
+      this.options.isLexical(head.name);
+
+    if (isStatic) {
+      body.lines.push(
+        `${this.rt('invoke')}($_b, ${anchor}, ${this.expr(path, body)}, ${named}, ${blocks}, ${attrs});`
+      );
+    } else {
+      body.lines.push(
+        `${this.rt('invokeDyn')}($_b, ${anchor}, () => ${this.expr(path, body)}, ${named}, ${blocks}, ${attrs});`
+      );
+    }
+  }
+
+  /////////////////////////////////////////////////////////////////////////
+  // Expressions
+  /////////////////////////////////////////////////////////////////////////
+
+  /**
+   * Which built-in (keyword, or well-known import) does `path` refer to?
+   */
+  builtin(path: ASTv1.Expression, scope: Scope): string | null {
+    if (path.type !== 'PathExpression') return null;
+
+    let { head, tail } = path;
+    if (head.type !== 'VarHead' || tail.length > 0) return null;
+
+    let { name } = head;
+    if (scope.lookup(name) !== undefined) return null;
+    if (KEYWORDS.has(name)) return name;
+
+    if (this.options.isLexical(name)) {
+      let info = this.options.importOf?.(name);
+      if (info && SPECIALIZED[info.module]?.has(info.name)) return info.name;
+      return null;
+    }
+
+    return name in AUTO_IMPORTED ? name : null;
+  }
+
+  expr(node: ASTv1.Expression, body: Body): string {
+    switch (node.type) {
+      case 'StringLiteral':
+        return q(node.value);
+      case 'NumberLiteral':
+        return String(node.value);
+      case 'BooleanLiteral':
+        return String(node.value);
+      case 'NullLiteral':
+        return 'null';
+      case 'UndefinedLiteral':
+        return 'undefined';
+      case 'SubExpression':
+        return this.call(node.path, node.params, node.hash, node, body);
+      case 'PathExpression':
+        return this.path(node, body);
+    }
+  }
+
+  path(node: ASTv1.PathExpression, body: Body): string {
+    let { head, tail } = node;
+    let base: string;
+
+    switch (head.type) {
+      case 'ThisHead':
+        base = '$_s';
+        break;
+      case 'AtHead':
+        base = `$_a${prop(head.name.replace(/^@/u, ''))}`;
+        break;
+      case 'VarHead': {
+        let local = body.scope.lookup(head.name);
+        if (local !== undefined) {
+          base = local;
+        } else if (this.options.isLexical(head.name)) {
+          base = head.name;
+        } else if (head.name in AUTO_IMPORTED) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- checked above
+          base = this.options.importBinding(AUTO_IMPORTED[head.name]!, head.name);
+        } else if (this.options.isGlobal?.(head.name)) {
+          base = head.name;
+        } else {
+          throw new CodegenError(
+            `Attempted to use \`${head.name}\`, but it is not in scope. In strict mode, values must be imported or defined in JavaScript`,
+            node
+          );
+        }
+        break;
+      }
+    }
+
+    return tail.length > 0 ? `${this.rt('get')}(${[base, ...tail.map(q)].join(', ')})` : base;
+  }
+
+  positional(params: ASTv1.Expression[], body: Body): string {
+    if (params.length === 0) return 'null';
+    return `[${params.map((p) => `() => ${this.expr(p, body)}`).join(', ')}]`;
+  }
+
+  named(hash: ASTv1.Hash, body: Body): string | null {
+    if (hash.pairs.length === 0) return null;
+    return `{ ${hash.pairs.map((p) => `${key(p.key)}: () => ${this.expr(p.value, body)}`).join(', ')} }`;
+  }
+
+  staticString(node: ASTv1.Expression, what: string): string {
+    if (node.type !== 'StringLiteral')
+      throw new CodegenError(`${what} must be a string literal`, node);
+    return node.value;
+  }
+
+  /**
+   * `(path params hash)` (or `{{path params hash}}`).
+   */
+  call(
+    path: ASTv1.Expression,
+    params: ASTv1.Expression[],
+    hash: ASTv1.Hash,
+    node: { loc?: unknown },
+    body: Body
+  ): string {
+    let builtin = this.builtin(path, body.scope);
+    let arg = (i: number) => {
+      let param = params[i];
+      return param ? this.expr(param, body) : 'undefined';
+    };
+    let all = () => params.map((p) => this.expr(p, body));
+
+    switch (builtin) {
+      case null:
+        break;
+      case 'if':
+        return `(${this.rt('bool')}(${arg(0)}) ? ${arg(1)} : ${arg(2)})`;
+      case 'unless':
+        return `(${this.rt('bool')}(${arg(0)}) ? ${arg(2)} : ${arg(1)})`;
+      case 'concat':
+        return `(${['""', ...all().map((p) => `${this.rt('str')}(${p})`)].join(' + ')})`;
+      case 'fn':
+        return `((...$_r) => (${arg(0)})(${[...all().slice(1), '...$_r'].join(', ')}))`;
+      case 'hash':
+        return `({ ${hash.pairs
+          .map((p) => `get ${key(p.key)}() { return ${this.expr(p.value, body)}; }`)
+          .join(', ')} })`;
+      case 'array':
+        return `[${all().join(', ')}]`;
+      case 'get':
+        return `${this.rt('getPath')}(${arg(0)}, ${arg(1)})`;
+      case 'eq':
+      case 'neq':
+      case 'gt':
+      case 'gte':
+      case 'lt':
+      case 'lte':
+        return `(${arg(0)} ${COMPARISONS[builtin]} ${arg(1)})`;
+      case 'not':
+        return `!${this.rt('bool')}(${arg(0)})`;
+      case 'and':
+      case 'or':
+        return `${this.rt(builtin)}(${all()
+          .map((p) => `() => ${p}`)
+          .join(', ')})`;
+      case 'has-block':
+      case 'has-block-params':
+        return `${this.rt(builtin === 'has-block' ? 'hasBlock' : 'hasBlockParams')}($_ctx${
+          params.length ? `, ${arg(0)}` : ''
+        })`;
+      case 'component':
+        return `${this.rt('curry')}(${arg(0)}, ${this.named(hash, body) ?? 'null'})`;
+      case 'log':
+        return `${this.rt('log')}(${all().join(', ')})`;
+      case 'element':
+        return `${this.rt('element')}(${arg(0)})`;
+      default:
+        throw new CodegenError(`\`${builtin}\` is not supported by the codegen compiler yet`, node);
+    }
+
+    let positional = this.positional(params, body);
+    let named = this.named(hash, body);
+    let id = this.uid('h');
+
+    let isStatic =
+      path.type === 'PathExpression' &&
+      path.head.type === 'VarHead' &&
+      path.tail.length === 0 &&
+      body.scope.lookup(path.head.name) === undefined;
+
+    if (isStatic) {
+      body.lines.push(
+        `const ${id} = ${this.rt('helper')}($_b, ${this.expr(path, body)}, ${positional}, ${named});`
+      );
+    } else {
+      body.lines.push(
+        `const ${id} = ${this.rt('helperDyn')}($_b, () => ${this.expr(path, body)}, ${positional}, ${named});`
+      );
+    }
+
+    return `${id}()`;
+  }
+}
+
+/**
+ * `{{"literal"}}` and friends can be part of the static markup.
+ */
+function staticText(node: ASTv1.MustacheStatement): string | null {
+  if (node.trusting || node.params.length > 0 || node.hash.pairs.length > 0) return null;
+
+  let { path } = node;
+  switch (path.type) {
+    case 'StringLiteral':
+      return path.value;
+    case 'NumberLiteral':
+    case 'BooleanLiteral':
+      return String(path.value);
+    case 'NullLiteral':
+    case 'UndefinedLiteral':
+      return '';
+    default:
+      return null;
+  }
+}
+
+export function generate(ast: ASTv1.Template, options: GenerateOptions): Generated {
+  let generator = new Generator(options);
+  let expression = generator.template(ast);
+  return { hoisted: generator.hoisted, expression };
+}
diff --git a/packages/@glimmer/compiler/lib/codegen/index.ts b/packages/@glimmer/compiler/lib/codegen/index.ts
new file mode 100644
index 00000000000..01aa614303f
--- /dev/null
+++ b/packages/@glimmer/compiler/lib/codegen/index.ts
@@ -0,0 +1,97 @@
+import type * as ASTv1 from '@glimmer/syntax/lib/v1/nodes-v1';
+import { preprocess } from '@glimmer/syntax/lib/parser/tokenizer-event-handlers';
+
+import type { GenerateOptions, Generated, ImportInfo } from './generate';
+
+import { generate } from './generate';
+
+export { codegenBabelPlugin, type CodegenBabelPluginOptions } from './babel-plugin';
+export {
+  CodegenError,
+  generate,
+  type GenerateOptions,
+  type Generated,
+  type ImportInfo,
+} from './generate';
+
+export interface CompileToDOMOptions {
+  /**
+   * The JavaScript bindings that are in scope for the template.
+   */
+  lexicalScope?: (name: string) => boolean;
+
+  /**
+   * Where (some of) those bindings were imported from.
+   */
+  importOf?: (name: string) => ImportInfo | undefined;
+
+  /**
+   * Where the runtime helpers are imported from.
+   */
+  runtimeModule?: string;
+}
+
+/**
+ * Collects the imports used by generated code.
+ */
+export class ImportCollector {
+  #imports = new Map<string, Map<string, string>>();
+
+  constructor(readonly runtimeModule = '@glimmer/dom') {}
+
+  runtime = (name: string): string => this.add(this.runtimeModule, name, `$$${name}`);
+
+  importBinding = (module: string, name: string): string =>
+    this.add(module, name, `$$_${name.replace(/\W/gu, '_')}`);
+
+  add(module: string, name: string, local: string): string {
+    let names = this.#imports.get(module);
+    if (!names) this.#imports.set(module, (names = new Map<string, string>()));
+    let existing = names.get(name);
+    if (existing) return existing;
+    names.set(name, local);
+    return local;
+  }
+
+  entries(): Array<[module: string, names: Map<string, string>]> {
+    return [...this.#imports];
+  }
+
+  toString(): string {
+    return this.entries()
+      .map(
+        ([module, names]) =>
+          `import { ${[...names].map(([name, local]) => `${name} as ${local}`).join(', ')} } from ${JSON.stringify(module)};`
+      )
+      .join('\n');
+  }
+}
+
+export function parse(source: string): ASTv1.Template {
+  return preprocess(source, { strictMode: true });
+}
+
+/**
+ * EXPERIMENTAL: compile a strict-mode template to an ES module whose default
+ * export is the compiled template (usable as a template-only component).
+ */
+export function compileToDOM(source: string, options: CompileToDOMOptions = {}): string {
+  let imports = new ImportCollector(options.runtimeModule);
+  let { hoisted, expression } = generateFor(parse(source), options, imports);
+
+  return [imports.toString(), ...hoisted, `export default ${expression};`].join('\n');
+}
+
+export function generateFor(
+  ast: ASTv1.Template,
+  options: CompileToDOMOptions,
+  imports: ImportCollector
+): Generated {
+  let generateOptions: GenerateOptions = {
+    isLexical: options.lexicalScope ?? (() => false),
+    runtime: imports.runtime,
+    importBinding: imports.importBinding,
+  };
+  if (options.importOf) generateOptions.importOf = options.importOf;
+  return generate(ast, generateOptions);
+}
diff --git a/packages/@glimmer/dom/README.md b/packages/@glimmer/dom/README.md
new file mode 100644
index 00000000000..6cbd0774661
--- /dev/null
+++ b/packages/@glimmer/dom/README.md
@@ -0,0 +1,107 @@
+# @glimmer/dom (experimental)
+
+Runtime helpers for **strict-mode** templates that are compiled directly to
+JavaScript DOM operations, skipping the wire format, the opcode compiler, and
+both VMs.
+
+```hbs
+{{#if @show}}<p>{{this.name}}</p>{{/if}}
+```
+
+compiles (via `codegenBabelPlugin` / `compileToDOM` in `@glimmer/compiler`) to
+roughly:
+
+```js
+const $_t1 = html('<!>');
+const $_t2 = html('<p><!></p>');
+
+template(($_b, $_ctx) => {
+  const $_s = $_ctx.self,
+    $_a = $_ctx.args;
+  const $_r = clone($_b, $_t1);
+  when(
+    $_b,
+    at($_r, 0),
+    () => bool($_a.show),
+    ($_b) => {
+      const $_r2 = clone($_b, $_t2);
+      content($_b, at($_r2, 0, 0), () => get($_s, 'name'), 0);
+      return $_r2;
+    }
+  );
+  return $_r;
+});
+```
+
+- Static markup is an HTML string, parsed once and cloned per render.
+- Each dynamic part is one helper call. Values are thunks, read inside
+  `@glimmer/validator` caches, so autotracking works unchanged.
+- Each helper registers an updater on its block instead of the VM recording
+  updating opcodes. Constant values never register one.
+- Lexical scope is JavaScript's own: the compiled template is emitted where
+  the `<template>` was, so it closes over the module's bindings.
+- Well-known built-ins (`on`, `fn`, `hash`, `array`, `concat`, `get`, `eq`,
+  `not`, `and`, `or`, `if`, ...) are compiled inline. Everything else goes
+  through the existing helper, modifier and component managers.
+
+## Using it in an app
+
+Add the babel plugin before `babel-plugin-ember-template-compilation` (which
+then only handles templates this one doesn't, such as `hbs` in tests):
+
+```js
+import { _codegenBabelPlugin } from 'ember-source/ember-template-compiler/index.js';
+
+export default {
+  plugins: [
+    _codegenBabelPlugin, // or [_codegenBabelPlugin, { vmInterop: true }]
+    ['babel-plugin-ember-template-compilation', {}],
+    // ...
+  ],
+};
+```
+
+and render with `renderComponent` from `@glimmer/dom`. Nothing from the VM is
+loaded unless something needs it.
+
+## Interop with the VM (`@glimmer/dom/vm`)
+
+Apps that also use the VM (the router, `@ember/renderer`, addons with VM
+templates) compile with `{ vmInterop: true }`. Compiled templates then import
+`template`/`setTemplate` from `@glimmer/dom/vm`, which makes them renderable
+by the VM too: as route templates, from `renderComponent` in
+`@ember/renderer`, and from VM-rendered components. In a route template,
+`{{outlet}}` becomes an element that the VM renders the route's `<@outlet />`
+into, in the same render tree as the route.
+
+Importing `@glimmer/dom/vm` also lets compiled templates render components
+that only have a VM template (e.g. `<LinkTo>`), inside a `<glimmer-island>`
+element, with named args, attributes and modifiers, and the default block.
+
+## Size
+
+The two smoke-test apps whose sizes CI reports
+(`smoke-tests/v2-app-hello-world-template` and `smoke-tests/v2-app-template`)
+are compiled with this. JS in `dist/` (bytes, raw / gzip):
+
+| app                                    | wire format + VM  | compiled to DOM   |
+| -------------------------------------- | ----------------- | ----------------- |
+| v2-app-hello-world-template            | 125,753 / 39,477  | 27,662 / 9,772    |
+| v2-app-template (router, `{{outlet}}`) | 350,767 / 112,176 | 360,143 / 115,341 |
+
+The full app gets slightly bigger: it still needs the VM for the router and
+for `{{outlet}}`, and adds this runtime and the interop on top.
+
+## Status
+
+This is a prototype for exploring the idea. Not supported yet:
+
+- loose mode (by design: this is for strict mode only)
+- positional arguments to components, the `helper`/`modifier` keywords,
+  `{{mount}}`
+- blocks and `...attributes` when the VM renders a compiled component, and
+  named blocks for components that only have a VM template
+- SSR / rehydration, the debug render tree (Ember Inspector)
+- foreign content at the root of a template (e.g. a component whose template
+  is just `<path>`), and HTML that the parser restructures (`<table><tr>`
+  without a `<tbody>`)
diff --git a/packages/@glimmer/dom/index.ts b/packages/@glimmer/dom/index.ts
new file mode 100644
index 00000000000..012b22b9341
--- /dev/null
+++ b/packages/@glimmer/dom/index.ts
@@ -0,0 +1,33 @@
+/**
+ * EXPERIMENTAL
+ *
+ * Runtime helpers for strict-mode templates that are compiled directly to
+ * DOM operations (see `compileToDOM` in `@glimmer/compiler`), instead of to
+ * the wire format and then to VM bytecode.
+ *
+ * Each dynamic part of a template becomes one call to one of these helpers;
+ * the helpers own all of the behavior, so compiled output stays small and
+ * apps only pay for the helpers their templates use.
+ */
+export type { AttrsFn, Block, BlockFn, Blocks, Ctx, Thunk } from './lib/core';
+export { at, clone, html, setTemplate, template, Template } from './lib/core';
+export { attr, listen, splat } from './lib/attributes';
+export { appendCall, content, MAY_CALL, TRUSTING } from './lib/content';
+export { each, inElement, scope, when, yieldTo } from './lib/control-flow';
+export { element } from './lib/element';
+export { curry, invoke, invokeDyn, setVMFallback } from './lib/invoke';
+export { helper, helperDyn, modifier } from './lib/managers';
+export { renderComponent, type RenderResult } from './lib/render';
+export {
+  and,
+  bool,
+  entries,
+  get,
+  getPath,
+  hasBlock,
+  hasBlockParams,
+  log,
+  memo,
+  or,
+  str,
+} from './lib/values';
diff --git a/packages/@glimmer/dom/lib/attributes.ts b/packages/@glimmer/dom/lib/attributes.ts
new file mode 100644
index 00000000000..4b146bb1bec
--- /dev/null
+++ b/packages/@glimmer/dom/lib/attributes.ts
@@ -0,0 +1,192 @@
+import { registerDestructor } from '@glimmer/destroyable';
+import { createCache, getValue, isConst } from '@glimmer/validator/lib/tracking';
+
+import type { Block, Ctx, Thunk } from './core';
+
+const XHTML = 'http://www.w3.org/1999/xhtml';
+
+/**
+ * These are set as properties, because the attribute only controls the
+ * *initial* state of the element.
+ */
+const PROPERTIES = new Set(['value', 'checked', 'selected', 'indeterminate', 'muted']);
+
+const SANITIZED_TAGS = new Set(['A', 'BODY', 'LINK', 'IMG', 'IFRAME', 'BASE', 'FORM']);
+const SANITIZED_ATTRS = new Set(['href', 'src', 'background', 'action']);
+const BAD_PROTOCOLS = new Set(['javascript:', 'vbscript:']);
+
+function normalizeAttrValue(value: unknown): string | null {
+  if (value === false || value === undefined || value === null) return null;
+  if (value === true) return '';
+  if (typeof value === 'function') return null;
+  if (typeof (value as { toString?: unknown }).toString !== 'function') return null;
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string -- same as the VM
+  return String(value);
+}
+
+function sanitize(element: Element, name: string, value: string | null): string | null {
+  if (value === null || !SANITIZED_TAGS.has(element.tagName) || !SANITIZED_ATTRS.has(name)) {
+    return value;
+  }
+
+  let protocol: string;
+  try {
+    protocol = new URL(value, 'http://localhost').protocol;
+  } catch {
+    return value;
+  }
+
+  return BAD_PROTOCOLS.has(protocol) ? `unsafe:${value}` : value;
+}
+
+type Setter = (value: unknown) => void;
+
+function setterFor(element: Element, name: string): Setter {
+  if (element.namespaceURI === XHTML && PROPERTIES.has(name) && name in element) {
+    return (value) => {
+      (element as unknown as Record<string, unknown>)[name] =
+        value === null || value === undefined ? (name === 'value' ? '' : false) : value;
+    };
+  }
+
+  return (value) => {
+    let normalized = sanitize(element, name, normalizeAttrValue(value));
+    if (normalized === null) {
+      element.removeAttribute(name);
+    } else {
+      element.setAttribute(name, normalized);
+    }
+  };
+}
+
+/**
+ * Binds a value to `setter`. `value` is either a static value (a string, for
+ * static attributes that need ordering relative to `...attributes`) or a thunk.
+ */
+function bind(b: Block, value: unknown, setter: Setter): void {
+  if (typeof value !== 'function') {
+    setter(value);
+    return;
+  }
+
+  let cache = createCache(value as Thunk);
+  let current = getValue(cache);
+  setter(current);
+
+  if (isConst(cache)) return;
+
+  b.updaters.push(() => {
+    let next = getValue(cache);
+    if (next !== current) {
+      current = next;
+      setter(next);
+    }
+  });
+}
+
+interface ClassState {
+  parts: string[];
+}
+
+const CLASSES = new WeakMap<Element, ClassState>();
+
+/**
+ * `class` is special: every source of classes for an element (its static
+ * class, dynamic class bindings, and classes from `...attributes`) is merged.
+ */
+function classPart(b: Block, element: Element, value: unknown): void {
+  let state = CLASSES.get(element);
+  if (!state) {
+    state = { parts: [] };
+    let existing = element.getAttribute('class');
+    if (existing) state.parts.push(existing);
+    CLASSES.set(element, state);
+  }
+
+  let { parts } = state;
+  let index = parts.length;
+  parts.push('');
+
+  bind(b, value, (next) => {
+    parts[index] = normalizeAttrValue(next) ?? '';
+    let className = parts.filter(Boolean).join(' ');
+    if (className) {
+      element.setAttribute('class', className);
+    } else {
+      element.removeAttribute('class');
+    }
+  });
+}
+
+export function attr(b: Block, element: Element, name: string, value: unknown): void {
+  if (name === 'class') {
+    classPart(b, element, value);
+  } else {
+    bind(b, value, setterFor(element, name));
+  }
+}
+
+/**
+ * `...attributes`
+ */
+export function splat(b: Block, element: Element, ctx: Ctx): void {
+  ctx.attrs?.(b, element);
+}
+
+/**
+ * The `{{on}}` modifier, specialized at compile time.
+ *
+ * The handler is read when the event fires, so changing it never requires
+ * re-binding the listener.
+ */
+function describeElement(element: Element): string {
+  return (
+    element.tagName.toLowerCase() +
+    (element.id ? `#${element.id}` : '') +
+    Array.from(element.classList)
+      .map((c) => `.${c}`)
+      .join('')
+  );
+}
+
+function assertHandler(fn: unknown, element: Element): asserts fn is (event: Event) => unknown {
+  if (typeof fn !== 'function') {
+    throw new Error(
+      `You must pass a function as the second argument to the \`on\` modifier; you passed ${
+        fn === null ? 'null' : typeof fn
+      }. While rendering:\n\n(unknown) on ${describeElement(element)}`
+    );
+  }
+}
+
+export function listen(
+  b: Block,
+  element: Element,
+  eventName: unknown,
+  handler: Thunk,
+  options?: AddEventListenerOptions
+): void {
+  let cache = createCache(handler);
+  let listener = (event: Event) => {
+    let fn = getValue(cache);
+    assertHandler(fn, element);
+    return fn(event);
+  };
+
+  // Validated once the element is fully set up (like modifiers are installed),
+  // so that messages describe the element with all of its attributes.
+  b.root.schedule(() => {
+    if (typeof eventName !== 'string' || !eventName) {
+      throw new Error(
+        `You must pass a valid DOM event name as the first argument to the \`on\` modifier on ${describeElement(element)}`
+      );
+    }
+
+    assertHandler(getValue(cache), element);
+
+    element.addEventListener(eventName, listener, options);
+    registerDestructor(b, () => {
+      element.removeEventListener(eventName, listener, options);
+    });
+  });
+}
diff --git a/packages/@glimmer/dom/lib/content.ts b/packages/@glimmer/dom/lib/content.ts
new file mode 100644
index 00000000000..c48f5332754
--- /dev/null
+++ b/packages/@glimmer/dom/lib/content.ts
@@ -0,0 +1,203 @@
+import { getInternalHelperManager } from '@glimmer/manager/lib/internal/api';
+import { createCache, getValue, isConst } from '@glimmer/validator/lib/tracking';
+
+import type { Block, Mounted, Thunk } from './core';
+import { mount, removeRange, unmount } from './core';
+import type { Named } from './managers';
+
+import { instantiate, invoke, invokeDyn, isComponentDefinition } from './invoke';
+import { helper, helperDyn } from './managers';
+import { str } from './values';
+
+/**
+ * `{{x}}` where `x` is a bare lexical identifier. It may be a helper, which
+ * is invoked with no arguments.
+ */
+export const MAY_CALL = 1;
+
+/**
+ * `{{{x}}}`
+ */
+export const TRUSTING = 2;
+
+const enum Kind {
+  text,
+  html,
+  node,
+  component,
+}
+
+interface SafeString {
+  toHTML(): string;
+}
+
+function isSafeString(value: unknown): value is SafeString {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof (value as Partial<SafeString>).toHTML === 'function'
+  );
+}
+
+function isNode(value: unknown): value is Node {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof (value as Partial<Node>).nodeType === 'number'
+  );
+}
+
+function kindOf(value: unknown, flags: number): Kind {
+  if (typeof value === 'string') return flags & TRUSTING ? Kind.html : Kind.text;
+  if (value === null || value === undefined) return Kind.text;
+  if (typeof value !== 'object' && typeof value !== 'function') return Kind.text;
+  if (isSafeString(value)) return Kind.html;
+  if (isNode(value)) return Kind.node;
+  if (isComponentDefinition(value)) return Kind.component;
+  return Kind.text;
+}
+
+function isHelperLike(value: unknown): value is object {
+  if (isComponentDefinition(value)) return false;
+  if (typeof value === 'function') return true;
+  return (
+    typeof value === 'object' && value !== null && getInternalHelperManager(value, true) !== null
+  );
+}
+
+interface Slot {
+  first: Node;
+  last: Node;
+  text: Text | null;
+  mounted: Mounted | null;
+}
+
+function insertNodes(parent: Node, before: Node, nodes: Node): Slot {
+  let doc = parent.ownerDocument ?? (parent as Document);
+
+  if (nodes.nodeType === 11 /* DocumentFragment */) {
+    if (!nodes.firstChild) nodes.appendChild(doc.createTextNode(''));
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- non-empty
+    let first = nodes.firstChild!;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- non-empty
+    let last = nodes.lastChild!;
+    parent.insertBefore(nodes, before);
+    return { first, last, text: null, mounted: null };
+  }
+
+  parent.insertBefore(nodes, before);
+  return { first: nodes, last: nodes, text: null, mounted: null };
+}
+
+function render(b: Block, parent: Node, before: Node, kind: Kind, value: unknown, flags: number) {
+  let doc = b.root.document;
+
+  switch (kind) {
+    case Kind.text: {
+      let text = doc.createTextNode(str(value));
+      parent.insertBefore(text, before);
+      return { first: text, last: text, text, mounted: null };
+    }
+    case Kind.html: {
+      let t = doc.createElement('template');
+      t.innerHTML =
+        flags & TRUSTING && !isSafeString(value) ? str(value) : (value as SafeString).toHTML();
+      return insertNodes(parent, before, t.content);
+    }
+    case Kind.node:
+      return insertNodes(parent, before, value as Node);
+    case Kind.component: {
+      let mounted = mount(b, before, (child) =>
+        instantiate(child, value as object, {}, null, null)
+      );
+      return { first: mounted.start, last: mounted.end, text: null, mounted };
+    }
+  }
+}
+
+function clear(slot: Slot) {
+  if (slot.mounted) {
+    unmount(slot.mounted);
+  } else {
+    removeRange(slot.first, slot.last);
+  }
+}
+
+/**
+ * `{{value}}` in content position. The value's type decides what is rendered
+ * (text, trusted HTML, a DOM node, or a component), and can change over time.
+ */
+export function content(b: Block, anchor: Node, fn: Thunk, flags = 0): void {
+  if (flags & MAY_CALL) {
+    let definition = fn();
+    if (isHelperLike(definition)) fn = helper(b, definition, null, null);
+  }
+
+  let cache = createCache(fn);
+  let value = getValue(cache);
+  let kind = kindOf(value, flags);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- anchors are always attached
+  let parent = anchor.parentNode!;
+  let slot: Slot = render(b, parent, anchor, kind, value, flags);
+  parent.removeChild(anchor);
+
+  if (isConst(cache) && kind !== Kind.component) return;
+
+  b.updaters.push(() => {
+    let next = getValue(cache);
+
+    if (next === value) {
+      slot.mounted?.b.update();
+      return;
+    }
+
+    let nextKind = kindOf(next, flags);
+
+    if (kind === Kind.text && nextKind === Kind.text && slot.text) {
+      slot.text.data = str(next);
+      value = next;
+      return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- slots are always attached
+    let nextSlot = render(b, slot.first.parentNode!, slot.first, nextKind, next, flags);
+    clear(slot);
+    slot = nextSlot;
+    kind = nextKind;
+    value = next;
+  });
+}
+
+/**
+ * `{{foo a b=c}}`: invokes `foo` as a component or as a helper, depending
+ * on what it is.
+ */
+export function appendCall(
+  b: Block,
+  anchor: Node,
+  definition: unknown,
+  isStatic: boolean,
+  positional: Thunk[] | null,
+  named: Named | null,
+  flags = 0
+): void {
+  let value = isStatic ? definition : (definition as Thunk)();
+
+  if (isComponentDefinition(value)) {
+    if (positional) {
+      throw new Error('positional arguments to components are not supported yet');
+    }
+    if (isStatic) {
+      invoke(b, anchor, value, named ?? {}, null, null);
+    } else {
+      invokeDyn(b, anchor, definition as Thunk, named ?? {}, null, null);
+    }
+    return;
+  }
+
+  let result = isStatic
+    ? helper(b, value as object, positional, named)
+    : helperDyn(b, definition as Thunk, positional, named);
+
+  content(b, anchor, result, flags);
+}
diff --git a/packages/@glimmer/dom/lib/control-flow.ts b/packages/@glimmer/dom/lib/control-flow.ts
new file mode 100644
index 00000000000..ccdecdc0caa
--- /dev/null
+++ b/packages/@glimmer/dom/lib/control-flow.ts
@@ -0,0 +1,217 @@
+import type { OpaqueIterator } from '@glimmer/reference/lib/iterable';
+import { createComputeRef, valueForRef } from '@glimmer/reference/lib/reference';
+import { createIteratorRef } from '@glimmer/reference/lib/iterable';
+import { consumeTag, createCache, getValue } from '@glimmer/validator/lib/tracking';
+import { createTag, DIRTY_TAG as dirtyTag } from '@glimmer/validator/lib/validators';
+import { tagFor } from '@glimmer/validator/lib/meta';
+
+import type { Block, BlockFn, Ctx, Mounted, Thunk } from './core';
+
+import { marker, mount, moveRange, removeRange, unmount } from './core';
+
+/**
+ * `{{#if}}` / `{{#unless}}` (the compiler negates the condition for unless).
+ */
+export function when(
+  b: Block,
+  anchor: Node,
+  condition: Thunk<boolean>,
+  consequent: BlockFn,
+  alternate?: BlockFn
+): void {
+  let cache = createCache(condition);
+  let current = Boolean(getValue(cache));
+
+  let render = (value: boolean): Mounted | null => {
+    let fn = value ? consequent : alternate;
+    return fn ? mount(b, anchor, fn) : null;
+  };
+
+  let m = render(current);
+
+  b.updaters.push(() => {
+    let next = Boolean(getValue(cache));
+    if (next === current) {
+      m?.b.update();
+      return;
+    }
+
+    if (m) unmount(m);
+    current = next;
+    m = render(next);
+  });
+}
+
+interface Cell {
+  read: Thunk;
+  set(value: unknown): void;
+}
+
+function cell(initial: unknown): Cell {
+  let tag = createTag();
+  let value = initial;
+  return {
+    read: () => {
+      consumeTag(tag);
+      return value;
+    },
+    set(next) {
+      if (next !== value) {
+        value = next;
+        dirtyTag(tag);
+      }
+    },
+  };
+}
+
+interface Row {
+  value: Cell;
+  index: Cell;
+  m: Mounted | null;
+}
+
+/**
+ * `{{#each}}`, keyed by `key` (`@identity` by default).
+ */
+export function each(
+  b: Block,
+  anchor: Node,
+  list: Thunk,
+  key: string | null,
+  item: BlockFn,
+  inverse?: BlockFn
+): void {
+  let listRef = createComputeRef(() => {
+    let value = list();
+    // equivalent to `-track-array`
+    if (typeof value === 'object' && value !== null) consumeTag(tagFor(value, '[]'));
+    return value;
+  });
+  let iteratorRef = createIteratorRef(listRef, key ?? '@identity');
+
+  let rows: Row[] = [];
+  let byKey = new Map<unknown, Row>();
+  let inverseMounted: Mounted | null = null;
+  let lastIterator: OpaqueIterator | null = null;
+
+  let sync = () => {
+    let iterator = valueForRef(iteratorRef) as OpaqueIterator;
+
+    if (iterator === lastIterator) {
+      for (let row of rows) row.m?.b.update();
+      inverseMounted?.b.update();
+      return;
+    }
+
+    lastIterator = iterator;
+
+    let nextRows: Row[] = [];
+    let nextByKey = new Map<unknown, Row>();
+
+    for (let entry = iterator.next(); entry !== null; entry = iterator.next()) {
+      let row = byKey.get(entry.key);
+
+      if (row) {
+        row.value.set(entry.value);
+        row.index.set(entry.memo);
+      } else {
+        row = { value: cell(entry.value), index: cell(entry.memo), m: null };
+      }
+
+      nextByKey.set(entry.key, row);
+      nextRows.push(row);
+    }
+
+    for (let [k, row] of byKey) {
+      if (nextByKey.get(k) !== row && row.m) unmount(row.m);
+    }
+
+    // Place rows back-to-front, so each row knows what it must precede.
+    let before: Node = anchor;
+    for (let i = nextRows.length - 1; i >= 0; i--) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- in bounds
+      let row = nextRows[i]!;
+
+      if (row.m === null) {
+        let { value, index } = row;
+        row.m = mount(b, before, (child) => item(child, value.read, index.read));
+      } else {
+        if (row.m.end.nextSibling !== before) moveRange(row.m, before);
+        row.m.b.update();
+      }
+
+      before = row.m.start;
+    }
+
+    rows = nextRows;
+    byKey = nextByKey;
+
+    if (rows.length === 0 && inverse && !inverseMounted) {
+      inverseMounted = mount(b, anchor, inverse);
+    } else if (rows.length > 0 && inverseMounted) {
+      unmount(inverseMounted);
+      inverseMounted = null;
+    }
+  };
+
+  sync();
+  b.updaters.push(sync);
+}
+
+function block(b: Block, anchor: Node, fn: BlockFn, params: Thunk[]): void {
+  let m = mount(b, anchor, (child) => fn(child, ...params));
+  b.updaters.push(() => {
+    m.b.update();
+  });
+}
+
+/**
+ * `{{yield}}` / `{{yield to="name"}}`
+ */
+export function yieldTo(b: Block, anchor: Node, ctx: Ctx, name: string, params: Thunk[]): void {
+  let fn = ctx.blocks?.[name] ?? (name === 'else' ? ctx.blocks?.['inverse'] : undefined);
+  if (fn) block(b, anchor, fn, params);
+}
+
+/**
+ * `{{#let}}` (bindings are created by the compiler via `memo`)
+ */
+export function scope(b: Block, anchor: Node, fn: BlockFn): void {
+  block(b, anchor, fn, []);
+}
+
+/**
+ * `{{#in-element}}`. By default the destination's content is replaced;
+ * pass `insertBefore=null` to append.
+ */
+export function inElement(b: Block, destination: Thunk, append: boolean, fn: BlockFn): void {
+  let cache = createCache(destination);
+  let current: Element | null = null;
+  let m: Mounted | null = null;
+  let end: Node | null = null;
+
+  let render = (target: Element | null) => {
+    current = target;
+    if (!target) return;
+    if (!append) target.innerHTML = '';
+    end = marker(b.root);
+    target.appendChild(end);
+    m = mount(b, end, fn);
+  };
+
+  render(getValue(cache) as Element | null);
+
+  b.updaters.push(() => {
+    let next = getValue(cache) as Element | null;
+    if (next === current) {
+      m?.b.update();
+      return;
+    }
+
+    if (m) unmount(m);
+    if (end) removeRange(end, end);
+    m = null;
+    end = null;
+    render(next);
+  });
+}
diff --git a/packages/@glimmer/dom/lib/core.ts b/packages/@glimmer/dom/lib/core.ts
new file mode 100644
index 00000000000..5f24ef61286
--- /dev/null
+++ b/packages/@glimmer/dom/lib/core.ts
@@ -0,0 +1,246 @@
+import { associateDestroyableChild, destroy } from '@glimmer/destroyable';
+
+/**
+ * A lazily-evaluated value. Compiled templates pass every dynamic value
+ * around as a thunk, so that reading it happens inside whichever tracking
+ * frame (cache) is consuming it.
+ */
+export type Thunk<T = unknown> = () => T;
+
+export type Updater = () => void;
+
+/**
+ * A render function for a block of template content.
+ *
+ * It receives the block that owns the content (for registering updaters and
+ * destructors), plus one thunk per block param, and returns the DOM it
+ * created (usually a DocumentFragment).
+ */
+export type BlockFn = (b: Block, ...params: Thunk[]) => Node;
+
+export type AttrsFn = (b: Block, element: Element) => void;
+
+export type Blocks = Partial<Record<string, BlockFn>>;
+
+/**
+ * Everything a component's template can see about its invocation.
+ */
+export interface Ctx {
+  self: unknown;
+  args: Record<string, unknown>;
+  blocks: Blocks | null;
+  attrs: AttrsFn | null;
+}
+
+export interface OutletSink {
+  /**
+   * Registers an element for the VM to render the route's `@outlet` into.
+   * Returns a function that unregisters it.
+   */
+  add(element: Element): () => void;
+}
+
+/**
+ * Shared state for one render tree (one `renderComponent` call).
+ */
+export class Root {
+  #queue: Array<() => void> = [];
+
+  /**
+   * Where `{{outlet}}`s go, when the VM renders this tree as a route
+   * template (see `@glimmer/dom/vm`).
+   */
+  outlets: OutletSink | null = null;
+
+  constructor(
+    readonly owner: object,
+    readonly document: Document
+  ) {}
+
+  /**
+   * Schedule work that must happen after DOM is inserted
+   * (modifier install/update, component didCreate hooks).
+   */
+  schedule(fn: () => void): void {
+    this.#queue.push(fn);
+  }
+
+  flush(): void {
+    while (this.#queue.length > 0) {
+      let queue = this.#queue;
+      this.#queue = [];
+      for (let fn of queue) fn();
+    }
+  }
+}
+
+/**
+ * The unit of ownership: a block owns the updaters and destructors for a
+ * contiguous region of DOM. Structural helpers (`when`, `each`, components,
+ * yields) create child blocks, and are responsible for updating them.
+ *
+ * This is the replacement for the UpdatingVM's opcode tree: rather than
+ * recording opcodes during an initial render, compiled templates register
+ * closures directly.
+ */
+export class Block {
+  readonly updaters: Updater[] = [];
+
+  constructor(
+    readonly root: Root,
+    parent: Block | null
+  ) {
+    if (parent) associateDestroyableChild(parent, this);
+  }
+
+  update(): void {
+    let { updaters } = this;
+    for (let i = 0; i < updaters.length; i++) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- in bounds
+      updaters[i]!();
+    }
+  }
+}
+
+/**
+ * A region of DOM owned by a child block, delimited by two empty text nodes.
+ * Empty text nodes are invisible in serialized HTML, and give us stable
+ * boundaries even when the content at either edge is itself dynamic.
+ */
+export interface Mounted {
+  b: Block;
+  start: Node;
+  end: Node;
+}
+
+export function marker(root: Root): Text {
+  return root.document.createTextNode('');
+}
+
+/**
+ * Create a child block, render into it, and insert the result before `before`.
+ */
+export function mount(parent: Block, before: Node, render: (b: Block) => Node): Mounted {
+  let b = new Block(parent.root, parent);
+  let start = marker(parent.root);
+  let end = marker(parent.root);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- anchors are always attached
+  let target = before.parentNode!;
+
+  target.insertBefore(start, before);
+  target.insertBefore(render(b), before);
+  target.insertBefore(end, before);
+
+  return { b, start, end };
+}
+
+export function unmount(m: Mounted): void {
+  removeRange(m.start, m.end);
+  destroy(m.b);
+}
+
+export function removeRange(first: Node, last: Node): void {
+  let parent = first.parentNode;
+  if (!parent) return;
+
+  let node: Node | null = first;
+  while (node) {
+    let next: Node | null = node === last ? null : node.nextSibling;
+    parent.removeChild(node);
+    node = next;
+  }
+}
+
+export function moveRange(m: Mounted, before: Node): void {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- anchors are always attached
+  let parent = before.parentNode!;
+  let node: Node | null = m.start;
+  while (node) {
+    let next: Node | null = node === m.end ? null : node.nextSibling;
+    parent.insertBefore(node, before);
+    node = next;
+  }
+}
+
+/////////////////////////////////////////////////////////////////////////////
+// Static HTML
+/////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Static markup for one block of a template. Parsed once (lazily), then
+ * cloned for every render. This is where most of the size savings come from:
+ * static content costs about what its HTML text costs.
+ */
+export interface StaticHTML {
+  markup: string;
+  parsed: HTMLTemplateElement | null;
+}
+
+export function html(markup: string): StaticHTML {
+  return { markup, parsed: null };
+}
+
+export function clone(b: Block, t: StaticHTML): DocumentFragment {
+  let parsed = t.parsed;
+  if (parsed === null) {
+    parsed = t.parsed = b.root.document.createElement('template');
+    parsed.innerHTML = t.markup;
+  }
+  return b.root.document.importNode(parsed.content, true);
+}
+
+/**
+ * Walk to a node by child indexes. Compiled templates resolve every node they
+ * need right after cloning, before any helper mutates the DOM.
+ */
+export function at(node: Node, ...path: number[]): Node {
+  for (let i of path) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- paths are computed by the compiler
+    node = node.childNodes[i]!;
+  }
+  return node;
+}
+
+/////////////////////////////////////////////////////////////////////////////
+// Templates
+/////////////////////////////////////////////////////////////////////////////
+
+export type RenderFn = (b: Block, ctx: Ctx) => Node;
+
+/**
+ * A compiled template. It doubles as a template-only component definition.
+ */
+export class Template {
+  constructor(readonly render: RenderFn) {}
+
+  toString(): string {
+    return '(compiled template)';
+  }
+}
+
+export function template(render: RenderFn): Template {
+  return new Template(render);
+}
+
+const TEMPLATES = new WeakMap<object, Template>();
+
+/**
+ * The equivalent of `setComponentTemplate` for compiled templates.
+ */
+export function setTemplate<T extends object>(definition: T, t: Template): T {
+  TEMPLATES.set(definition, t);
+  return definition;
+}
+
+export function templateFor(definition: object): Template | undefined {
+  if (definition instanceof Template) return definition;
+
+  let pointer: object | null = definition;
+  while (pointer !== null && pointer !== Function.prototype && pointer !== Object.prototype) {
+    let found = TEMPLATES.get(pointer);
+    if (found) return found;
+    pointer = Object.getPrototypeOf(pointer) as object | null;
+  }
+
+  return undefined;
+}
diff --git a/packages/@glimmer/dom/lib/element.ts b/packages/@glimmer/dom/lib/element.ts
new file mode 100644
index 00000000000..8faeaa8af3c
--- /dev/null
+++ b/packages/@glimmer/dom/lib/element.ts
@@ -0,0 +1,43 @@
+import type { Template } from './core';
+
+import { splat } from './attributes';
+import { marker, template } from './core';
+import { yieldTo } from './control-flow';
+
+const ELEMENTS = new Map<string, Template>();
+
+/**
+ * `(element "h1")`: a component that renders its block in an element with
+ * the given tag name (or without an element, for `""`).
+ */
+export function element(tagName: unknown): Template {
+  if (typeof tagName !== 'string') {
+    throw new Error(
+      `The argument passed to the \`element\` helper must be a string (you passed \`${String(tagName)}\`)`
+    );
+  }
+
+  let existing = ELEMENTS.get(tagName);
+  if (existing) return existing;
+
+  let created = template((b, ctx) => {
+    let doc = b.root.document;
+    let fragment = doc.createDocumentFragment();
+    let anchor = marker(b.root);
+
+    if (tagName === '') {
+      fragment.appendChild(anchor);
+    } else {
+      let el = doc.createElement(tagName);
+      splat(b, el, ctx);
+      el.appendChild(anchor);
+      fragment.appendChild(el);
+    }
+
+    yieldTo(b, anchor, ctx, 'default', []);
+    return fragment;
+  });
+
+  ELEMENTS.set(tagName, created);
+  return created;
+}
diff --git a/packages/@glimmer/dom/lib/invoke.ts b/packages/@glimmer/dom/lib/invoke.ts
new file mode 100644
index 00000000000..b01854a4f78
--- /dev/null
+++ b/packages/@glimmer/dom/lib/invoke.ts
@@ -0,0 +1,244 @@
+import type { CapturedArguments, Reference } from '@glimmer/interfaces';
+import { associateDestroyableChild } from '@glimmer/destroyable';
+import { getInternalComponentManager } from '@glimmer/manager/lib/internal/api';
+import { getComponentTemplate } from '@glimmer/manager/lib/public/template';
+import { valueForRef } from '@glimmer/reference/lib/reference';
+import { consumeTag, createCache, getValue } from '@glimmer/validator/lib/tracking';
+import { createTag, DIRTY_TAG as dirtyTag } from '@glimmer/validator/lib/validators';
+
+import type { AttrsFn, Block, Blocks, Thunk } from './core';
+import type { Named } from './managers';
+
+import { mount, Template, templateFor, unmount } from './core';
+import { capture } from './managers';
+
+/**
+ * The result of `(component Foo bar=1)`.
+ */
+export class Curried {
+  constructor(
+    readonly definition: object,
+    readonly named: Named
+  ) {}
+}
+
+export function curry(definition: unknown, named: Named | null): Curried | null {
+  if (!definition) return null;
+  return new Curried(definition, named ?? {});
+}
+
+export function isComponentDefinition(value: unknown): value is object {
+  if (value instanceof Template || value instanceof Curried) return true;
+  if ((typeof value !== 'object' && typeof value !== 'function') || value === null) return false;
+  if (templateFor(value)) return true;
+  return getInternalComponentManager(value, true) !== null;
+}
+
+/**
+ * Renders components that were not compiled with this compiler (e.g. from
+ * addons) via the VM. Registered by the Ember integration (see `render.ts`).
+ */
+export interface VMFallback {
+  /**
+   * Render `definition()` with the VM into `into`, and return a destroyable
+   * for the render. `definition` is tracked, so values that the VM can
+   * update in place (see `canUpdate`) don't require a new render.
+   */
+  render(
+    definition: Thunk<object>,
+    into: Element,
+    owner: object,
+    invocation: { named: Named; blocks: Blocks | null; attrs: AttrsFn | null }
+  ): object;
+
+  /**
+   * Can the VM render switch from `from` to `to` by itself (like it does for
+   * `<@outlet />` getting a new curried value)?
+   */
+  canUpdate(from: unknown, to: unknown): boolean;
+}
+
+let vmFallback: VMFallback | null = null;
+
+export function setVMFallback(fallback: VMFallback): void {
+  vmFallback = fallback;
+}
+
+function describe(definition: object): string {
+  return typeof definition === 'function'
+    ? definition.name || '(anonymous component)'
+    : Object.prototype.toString.call(definition);
+}
+
+function argsFor(captured: CapturedArguments): Record<string, unknown> {
+  let args = Object.create(null) as Record<string, unknown>;
+  for (let key of Object.keys(captured.named)) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- iterating own keys
+    let ref = captured.named[key]!;
+    Object.defineProperty(args, key, { enumerable: true, get: () => valueForRef(ref) });
+  }
+  return args;
+}
+
+function island(
+  b: Block,
+  definition: object,
+  named: Named,
+  blocks: Blocks | null,
+  attrs: AttrsFn | null,
+  current?: Thunk<object>
+): Node {
+  if (!vmFallback) {
+    throw new Error(
+      `${describe(definition)} does not have a compiled template. To render it with the VM, import '@glimmer/dom/vm' (or compile with \`vmInterop\`).`
+    );
+  }
+
+  // The VM needs an element it owns, so that our DOM moves and removals
+  // never invalidate its bounds.
+  let element = b.root.document.createElement('glimmer-island');
+  element.style.display = 'contents';
+
+  // A destroyable child, so the VM's render is torn down in the same pass
+  // as this block (not a scheduling round later).
+  associateDestroyableChild(
+    b,
+    vmFallback.render(current ?? (() => definition), element, b.root.owner, {
+      named,
+      blocks,
+      attrs,
+    })
+  );
+
+  return element;
+}
+
+interface CustomComponentManagerLike {
+  create(owner: object, definition: object, args: { capture(): CapturedArguments }): object;
+  getSelf(state: object): Reference;
+  getDestroyable(state: object): object | null;
+  didCreate(state: object): void;
+}
+
+/**
+ * Create a component and render its template into `b`.
+ */
+export function instantiate(
+  b: Block,
+  definition: object,
+  named: Named,
+  blocks: Blocks | null,
+  attrs: AttrsFn | null,
+  current?: Thunk<object>
+): Node {
+  while (definition instanceof Curried) {
+    named = { ...definition.named, ...named };
+    definition = definition.definition;
+  }
+
+  let compiled = templateFor(definition);
+
+  // A component without any template (e.g. a Glimmer component used only
+  // for its lifecycle) doesn't need the VM: it renders nothing.
+  let templateless =
+    !compiled &&
+    !getComponentTemplate(definition) &&
+    'getDelegateFor' in (getInternalComponentManager(definition, true) ?? {});
+
+  if (!compiled && !templateless) return island(b, definition, named, blocks, attrs, current);
+
+  let captured = capture(named, null);
+  let args = argsFor(captured);
+
+  // template-only
+  if (compiled === definition) {
+    return compiled.render(b, { self: undefined, args, blocks, attrs });
+  }
+
+  let manager = getInternalComponentManager(definition) as unknown as CustomComponentManagerLike;
+
+  if (!('getDelegateFor' in manager)) {
+    throw new Error(
+      `Compiled templates can only be used with components that have a custom component manager (like @glimmer/component). ${describe(definition)} does not.`
+    );
+  }
+
+  let state = manager.create(b.root.owner, definition, { capture: () => captured });
+  let self = valueForRef(manager.getSelf(state));
+
+  let destroyable = manager.getDestroyable(state);
+  if (destroyable) associateDestroyableChild(b, destroyable);
+
+  b.root.schedule(() => {
+    manager.didCreate(state);
+  });
+
+  if (!compiled) return b.root.document.createDocumentFragment();
+
+  return compiled.render(b, { self, args, blocks, attrs });
+}
+
+/**
+ * `<Foo />` where `Foo` is statically known (an import, or a local).
+ */
+export function invoke(
+  b: Block,
+  anchor: Node,
+  definition: object,
+  named: Named,
+  blocks: Blocks | null,
+  attrs: AttrsFn | null
+): void {
+  let m = mount(b, anchor, (child) => instantiate(child, definition, named, blocks, attrs));
+  b.updaters.push(() => {
+    m.b.update();
+  });
+}
+
+/**
+ * `<this.Foo />`, `<@foo />`, `{{component this.foo}}`, `<item.Foo />` ...
+ */
+export function invokeDyn(
+  b: Block,
+  anchor: Node,
+  definition: Thunk,
+  named: Named,
+  blocks: Blocks | null,
+  attrs: AttrsFn | null
+): void {
+  let cache = createCache(definition);
+  let current = getValue(cache);
+
+  // What the VM reads, when it renders the definition (see VMFallback)
+  let tag = createTag();
+  let read = () => {
+    consumeTag(tag);
+    return current as object;
+  };
+
+  let render = (value: unknown) =>
+    value
+      ? mount(b, anchor, (child) => instantiate(child, value, named, blocks, attrs, read))
+      : null;
+
+  let m = render(current);
+
+  b.updaters.push(() => {
+    let next = getValue(cache);
+    if (next === current) {
+      m?.b.update();
+      return;
+    }
+
+    if (m && vmFallback?.canUpdate(current, next)) {
+      current = next;
+      dirtyTag(tag);
+      m.b.update();
+      return;
+    }
+
+    if (m) unmount(m);
+    current = next;
+    m = render(next);
+  });
+}
diff --git a/packages/@glimmer/dom/lib/managers.ts b/packages/@glimmer/dom/lib/managers.ts
new file mode 100644
index 00000000000..d0445608937
--- /dev/null
+++ b/packages/@glimmer/dom/lib/managers.ts
@@ -0,0 +1,151 @@
+import type { CapturedArguments, Helper, Reference } from '@glimmer/interfaces';
+import { associateDestroyableChild, destroy } from '@glimmer/destroyable';
+import {
+  getInternalHelperManager,
+  getInternalModifierManager,
+} from '@glimmer/manager/lib/internal/api';
+import { createComputeRef, valueForRef } from '@glimmer/reference/lib/reference';
+import { consumeTag, createCache, getValue, track } from '@glimmer/validator/lib/tracking';
+import {
+  UPDATE_TAG as updateTag,
+  validateTag,
+  valueForTag,
+} from '@glimmer/validator/lib/validators';
+
+import type { Block, Thunk } from './core';
+
+export type Named = Record<string, Thunk>;
+
+/**
+ * Adapt thunks to the references that helper/modifier/component managers
+ * expect. This is the only place the compiled-template world touches
+ * references.
+ */
+export function capture(named: Named | null, positional: Thunk[] | null): CapturedArguments {
+  let capturedNamed: Record<string, Reference> = Object.create(null) as Record<string, Reference>;
+  if (named) {
+    for (let key of Object.keys(named)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- iterating own keys
+      capturedNamed[key] = createComputeRef(named[key]!);
+    }
+  }
+
+  let capturedPositional = (positional ?? []).map((thunk) => createComputeRef(thunk));
+
+  return {
+    named: capturedNamed,
+    positional: capturedPositional,
+  } as unknown as CapturedArguments;
+}
+
+function resolveHelper(definition: object): Helper {
+  let manager = getInternalHelperManager(definition);
+  return typeof manager === 'function' ? manager : manager.getHelper(definition);
+}
+
+function instantiateHelper(b: Block, definition: object, args: CapturedArguments): Reference {
+  let ref = resolveHelper(definition)(args, b.root.owner);
+  associateDestroyableChild(b, ref);
+  return ref;
+}
+
+/**
+ * A helper invocation with a statically known definition
+ * (usually an import). Returns a thunk for the helper's current value.
+ */
+export function helper(
+  b: Block,
+  definition: object,
+  positional: Thunk[] | null,
+  named: Named | null
+): Thunk {
+  let ref = instantiateHelper(b, definition, capture(named, positional));
+  return () => valueForRef(ref);
+}
+
+/**
+ * A helper invocation whose definition can change, like `(this.format x)`.
+ */
+export function helperDyn(
+  b: Block,
+  definition: Thunk,
+  positional: Thunk[] | null,
+  named: Named | null
+): Thunk {
+  let args = capture(named, positional);
+  let definitionCache = createCache(definition);
+  let current: unknown;
+  let ref: Reference | null = null;
+
+  return () => {
+    let next = getValue(definitionCache);
+    if (next !== current || ref === null) {
+      if (ref !== null) destroy(ref);
+      current = next;
+      ref = instantiateHelper(b, next as object, args);
+    }
+    return valueForRef(ref);
+  };
+}
+
+/**
+ * Any modifier other than `{{on}}`, which is specialized.
+ */
+export function modifier(
+  b: Block,
+  element: Element,
+  definition: object,
+  positional: Thunk[] | null,
+  named: Named | null
+): void {
+  let manager = getInternalModifierManager(definition);
+  let state = manager.create(
+    b.root.owner,
+    element as never,
+    definition,
+    capture(named, positional)
+  );
+
+  let destroyable = manager.getDestroyable(state);
+  if (destroyable) associateDestroyableChild(b, destroyable);
+
+  let tag = manager.getTag(state);
+
+  if (tag === null) {
+    b.root.schedule(() => {
+      manager.install(state);
+    });
+    return;
+  }
+
+  let lastRevision: number | null = null;
+
+  let run = (hook: (state: unknown) => void) => {
+    updateTag(
+      tag,
+      track(() => {
+        hook(state);
+      })
+    );
+    consumeTag(tag);
+    lastRevision = valueForTag(tag);
+  };
+
+  b.root.schedule(() => {
+    run((s) => {
+      manager.install(s);
+    });
+  });
+
+  b.updaters.push(() => {
+    consumeTag(tag);
+    if (lastRevision === null || validateTag(tag, lastRevision)) return;
+
+    lastRevision = null;
+    b.root.schedule(() => {
+      run((s) => {
+        manager.update(s);
+      });
+    });
+  });
+}
diff --git a/packages/@glimmer/dom/lib/render.ts b/packages/@glimmer/dom/lib/render.ts
new file mode 100644
index 00000000000..f4ab5cab2f4
--- /dev/null
+++ b/packages/@glimmer/dom/lib/render.ts
@@ -0,0 +1,184 @@
+import type { Tag } from '@glimmer/interfaces';
+import {
+  associateDestroyableChild,
+  destroy,
+  isDestroying,
+  registerDestructor,
+} from '@glimmer/destroyable';
+import { track } from '@glimmer/validator/lib/tracking';
+import { validateTag, valueForTag } from '@glimmer/validator/lib/validators';
+import { _backburner } from '@ember/runloop';
+
+import type { BlockFn, OutletSink, Template, Thunk } from './core';
+import type { Named } from './managers';
+
+import './setup';
+import { Block, mount, removeRange, Root } from './core';
+import { instantiate } from './invoke';
+
+export interface RenderResult {
+  /**
+   * Re-render now, if anything this render depends on has changed.
+   * (This also happens automatically at the end of every runloop.)
+   */
+  rerender(): void;
+  destroy(): void;
+}
+
+interface RootOptions {
+  into: Element;
+  owner?: object;
+  outlets?: OutletSink | undefined;
+}
+
+/**
+ * Runs `build` in a new render tree, and keeps it up to date (at the end of
+ * every runloop) until the result is destroyed.
+ */
+function startRoot(
+  owner: object,
+  document: Document,
+  outlets: OutletSink | undefined,
+  build: (b: Block) => void,
+  cleanup: () => void
+): RenderResult {
+  let root = new Root(owner, document);
+  root.outlets = outlets ?? null;
+  let b = new Block(root, null);
+
+  let tag: Tag;
+  let revision: number;
+  let destroyed = false;
+
+  // Everything read while rendering (including by modifiers, which run in
+  // `flush`) decides whether the next runloop needs to re-render.
+  let pass = (fn: () => void) => {
+    tag = track(() => {
+      fn();
+      root.flush();
+    });
+    revision = valueForTag(tag);
+  };
+
+  pass(() => {
+    build(b);
+  });
+
+  let result: RenderResult;
+
+  let rerender = () => {
+    // (destruction is scheduled, so this may still be called while destroying)
+    if (destroyed || isDestroying(result) || validateTag(tag, revision)) return;
+    pass(() => {
+      b.update();
+    });
+  };
+
+  // Same hook the VM renderer uses to revalidate.
+  _backburner.on('end', rerender);
+
+  result = {
+    rerender,
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      _backburner.off('end', rerender);
+      cleanup();
+      if (!isDestroying(result)) destroy(result);
+    },
+  };
+
+  // The result is a destroyable too: associating it with an owner (like a
+  // component instance) tears the tree down in the same pass as the owner.
+  associateDestroyableChild(result, b);
+  registerDestructor(result, () => {
+    result.destroy();
+  });
+
+  return result;
+}
+
+function renderRoot(
+  { into, owner = {}, outlets }: RootOptions,
+  render: (b: Block) => Node
+): RenderResult {
+  into.innerHTML = '';
+  let end = into.ownerDocument.createTextNode('');
+  into.appendChild(end);
+
+  return startRoot(
+    owner,
+    into.ownerDocument,
+    outlets,
+    (b) => {
+      let m = mount(b, end, render);
+      b.updaters.push(() => {
+        m.b.update();
+      });
+    },
+    () => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- always has content
+      removeRange(into.firstChild!, end);
+    }
+  );
+}
+
+/**
+ * Apply compiled template code to an existing element, and keep it up to
+ * date (e.g. attributes and modifiers passed to a component that the VM
+ * renders).
+ */
+export function attach(element: Element, owner: object, build: (b: Block) => void): RenderResult {
+  return startRoot(owner, element.ownerDocument, undefined, build, () => {});
+}
+
+/**
+ * Render a compiled block (with block params from the VM) into an element.
+ */
+export function renderBlock(
+  block: BlockFn,
+  params: Thunk[],
+  { into, owner }: { into: Element; owner: object }
+): RenderResult {
+  return renderRoot({ into, owner }, (child) => block(child, ...params));
+}
+
+/**
+ * Render a component (compiled with the codegen compiler) into an element.
+ *
+ * Mirrors `renderComponent` from `@ember/renderer`.
+ */
+export function renderComponent(
+  component: object,
+  {
+    into,
+    owner,
+    args,
+  }: {
+    into: Element;
+    owner?: object;
+    args?: Record<string, unknown>;
+  }
+): RenderResult {
+  let named: Named = {};
+  if (args) {
+    for (let key of Object.keys(args)) named[key] = () => args[key];
+  }
+
+  return renderRoot(owner ? { into, owner } : { into }, (child) =>
+    instantiate(child, component, named, null, null)
+  );
+}
+
+/**
+ * Render a compiled template for an already-created component instance
+ * (used when the VM renders a compiled component, see `@glimmer/dom/vm`).
+ */
+export function renderTemplate(
+  template: Template,
+  options: RootOptions & { self: unknown; args: Record<string, unknown> }
+): RenderResult {
+  return renderRoot(options, (child) =>
+    template.render(child, { self: options.self, args: options.args, blocks: null, attrs: null })
+  );
+}
diff --git a/packages/@glimmer/dom/lib/setup.ts b/packages/@glimmer/dom/lib/setup.ts
new file mode 100644
index 00000000000..09db1ddb06b
--- /dev/null
+++ b/packages/@glimmer/dom/lib/setup.ts
@@ -0,0 +1,4 @@
+// Compiled templates rely on Ember's global context (truthiness, property
+// lookup, scheduling revalidation and destruction), which is set up here.
+// This module is deliberately small: it does not bring in the VM.
+import '@ember/-internals/glimmer/lib/environment';
diff --git a/packages/@glimmer/dom/lib/values.ts b/packages/@glimmer/dom/lib/values.ts
new file mode 100644
index 00000000000..02a0f8e92b4
--- /dev/null
+++ b/packages/@glimmer/dom/lib/values.ts
@@ -0,0 +1,98 @@
+import { getPath as globalGetPath, getProp, toBool } from '@glimmer/global-context';
+import { createCache, getValue } from '@glimmer/validator/lib/tracking';
+
+import type { Ctx, Thunk } from './core';
+
+/**
+ * Property lookup, with the same semantics as a path in a template
+ * (null-safe, and consumes tags for classic `set()`-style properties).
+ */
+export function get(obj: unknown, ...keys: string[]): unknown {
+  for (let key of keys) {
+    if (obj === null || obj === undefined) return undefined;
+    obj = getProp(obj, key);
+  }
+  return obj;
+}
+
+/**
+ * `(get obj "a.b")`
+ */
+export function getPath(obj: unknown, path: unknown): unknown {
+  if (obj === null || obj === undefined || path === null || path === undefined) return undefined;
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string -- same as the `get` helper
+  return globalGetPath(obj, String(path));
+}
+
+/**
+ * Template truthiness (empty arrays are falsy, etc).
+ */
+export function bool(value: unknown): boolean {
+  return toBool(value);
+}
+
+function isEmpty(value: unknown): boolean {
+  return (
+    value === null ||
+    value === undefined ||
+    typeof (value as { toString?: unknown }).toString !== 'function'
+  );
+}
+
+/**
+ * Normalize a value for use as text (or within a concatenated attribute).
+ */
+export function str(value: unknown): string {
+  return isEmpty(value) ? '' : String(value);
+}
+
+export function and(...values: Thunk[]): unknown {
+  let last: unknown;
+  for (let value of values) {
+    last = value();
+    if (!toBool(last)) return last;
+  }
+  return last;
+}
+
+export function or(...values: Thunk[]): unknown {
+  let last: unknown;
+  for (let value of values) {
+    last = value();
+    if (toBool(last)) return last;
+  }
+  return last;
+}
+
+/**
+ * A cached thunk, used for `{{#let}}` bindings.
+ */
+export function memo<T>(fn: Thunk<T>): Thunk<T> {
+  let cache = createCache(fn);
+  return () => getValue(cache) as T;
+}
+
+export function log(...values: unknown[]): undefined {
+  // eslint-disable-next-line no-console
+  console.log(...values);
+  return undefined;
+}
+
+/**
+ * Backs `{{#each-in}}`: produces `[key, value]` pairs.
+ */
+export function entries(obj: unknown): Array<[string, unknown]> {
+  if (obj === null || obj === undefined) return [];
+  if (obj instanceof Map) return Array.from(obj.entries() as Iterable<[string, unknown]>);
+  return Object.keys(obj).map((key) => [key, get(obj, key)]);
+}
+
+export function hasBlock(ctx: Ctx, name = 'default'): boolean {
+  return Boolean(ctx.blocks?.[name]);
+}
+
+export function hasBlockParams(ctx: Ctx, name = 'default'): boolean {
+  let block = ctx.blocks?.[name];
+  // block functions are `(b, ...params)`
+  return block ? block.length > 1 : false;
+}
diff --git a/packages/@glimmer/dom/lib/vm.ts b/packages/@glimmer/dom/lib/vm.ts
new file mode 100644
index 00000000000..089879b79cb
--- /dev/null
+++ b/packages/@glimmer/dom/lib/vm.ts
@@ -0,0 +1,332 @@
+import type { AttrsFn, Block, BlockFn, RenderFn, Template } from './core';
+import type { RenderResult } from './render';
+import { registerDestructor } from '@glimmer/destroyable';
+import { componentCapabilities } from '@glimmer/manager/lib/public/component';
+import {
+  setComponentManager,
+  setHelperManager,
+  setModifierManager,
+} from '@glimmer/manager/lib/public/api';
+import { modifierCapabilities } from '@glimmer/manager/lib/public/modifier';
+import { helperCapabilities } from '@glimmer/manager/lib/public/helper';
+import { setComponentTemplate } from '@glimmer/manager/lib/public/template';
+import { getOwner, setOwner } from '@glimmer/owner';
+import { CURRIED_COMPONENT } from '@glimmer/constants/lib/curried';
+import { curry, isCurriedValue } from '@glimmer/runtime/lib/curried-value';
+import { trackedArray } from '@glimmer/validator/lib/collections/array';
+import { untrack } from '@glimmer/validator/lib/tracking';
+import { BaseRenderer } from '@ember/-internals/glimmer/lib/base-renderer';
+import { precompileTemplate } from '@ember/template-compilation';
+import templateOnly from '@ember/component/template-only';
+
+import {
+  setTemplate as setCompiledTemplate,
+  template as compiledTemplate,
+  templateFor,
+} from './core';
+import { setVMFallback } from './invoke';
+import { capture } from './managers';
+import { attach, renderBlock, renderTemplate } from './render';
+
+const RENDERERS = new WeakMap<object, BaseRenderer>();
+
+function rendererFor(owner: object): BaseRenderer {
+  let renderer = RENDERERS.get(owner);
+  if (!renderer) {
+    renderer = BaseRenderer.strict(owner, document, { isInteractive: true, hasDOM: true });
+    RENDERERS.set(owner, renderer);
+  }
+  return renderer;
+}
+
+/**
+ * `{{applyAttrs @attrs}}`: applies the attributes and modifiers of a
+ * compiled invocation to the element the VM-rendered component puts
+ * `...attributes` on (modifiers on an invocation are forwarded there).
+ */
+class ApplyAttrsManager {
+  capabilities = modifierCapabilities('3.22');
+
+  constructor(readonly owner: object) {}
+
+  createModifier(_definition: object, args: { positional: readonly unknown[] }) {
+    return { attrs: args.positional[0] as AttrsFn | null, result: null as RenderResult | null };
+  }
+
+  installModifier(state: { attrs: AttrsFn | null; result: RenderResult | null }, element: Element) {
+    let { attrs } = state;
+    if (attrs) {
+      state.result = attach(element, this.owner, (b) => {
+        attrs(b, element);
+      });
+    }
+  }
+
+  updateModifier() {}
+
+  destroyModifier(state: { result: RenderResult | null }) {
+    state.result?.destroy();
+  }
+}
+
+const applyAttrs = setModifierManager((owner: object) => new ApplyAttrsManager(owner), {});
+
+/**
+ * `{{blockIsland @block a b c}}`: renders the compiled block of an
+ * invocation, with the block params the VM-rendered component yields.
+ */
+class BlockIslandManager {
+  capabilities = helperCapabilities('3.23', { hasValue: true, hasDestroyable: true });
+
+  constructor(readonly owner: object) {}
+
+  createHelper(_definition: object, args: { positional: readonly unknown[] }) {
+    let block = args.positional[0] as BlockFn;
+    let params = [1, 2, 3].map((i) => () => args.positional[i]);
+
+    return untrack(() => {
+      let element = document.createElement('glimmer-island');
+      element.style.display = 'contents';
+      let result = renderBlock(block, params, { into: element, owner: this.owner });
+      return { element, result };
+    });
+  }
+
+  getValue(island: { element: Element }): Element {
+    return island.element;
+  }
+
+  getDestroyable(island: { result: RenderResult }): object {
+    return island.result;
+  }
+}
+
+const blockIsland = setHelperManager((owner) => new BlockIslandManager(owner ?? {}), {});
+
+/**
+ * How compiled templates invoke components that only have a VM template.
+ * The definition is curried with the invocation's named args (so this works
+ * for any component), and `@definition` is tracked, so the VM can update it
+ * in place.
+ */
+const INVOKE = setComponentTemplate(
+  precompileTemplate(
+    `{{#if @block}}<@definition {{applyAttrs @attrs}} as |a b c|>{{blockIsland @block a b c}}</@definition>{{else}}<@definition {{applyAttrs @attrs}} />{{/if}}`,
+    {
+      moduleName: 'packages/@glimmer/dom/lib/invoke.hbs',
+      strictMode: true,
+      scope() {
+        return { applyAttrs, blockIsland };
+      },
+    }
+  ),
+  templateOnly()
+);
+
+// Components that were not compiled with the codegen compiler are rendered
+// with the VM, into an element we own. The render root is returned as a
+// destroyable, so it is torn down together with the compiled block.
+setVMFallback({
+  render(definition, into, owner, { named, blocks, attrs }) {
+    let args = capture(named, null);
+    let last: object | undefined;
+    let curried: object | undefined;
+
+    return rendererFor(owner).render(INVOKE, {
+      into,
+      args: {
+        get definition() {
+          let value = definition();
+          if (value !== last || !curried) {
+            last = value;
+            curried = curry(CURRIED_COMPONENT, value, owner, args);
+          }
+          return curried;
+        },
+        attrs,
+        block: blocks?.['default'] ?? null,
+      },
+    });
+  },
+
+  canUpdate(from, to) {
+    return isCurriedValue(from) && isCurriedValue(to);
+  },
+});
+
+/**
+ * The VM's view of a template-only compiled component.
+ */
+class TemplateOnlyState {
+  constructor(
+    readonly template: Template,
+    readonly args: Record<string, unknown>
+  ) {}
+}
+
+interface Island {
+  element: Element;
+  outlets: Element[];
+  result: RenderResult;
+}
+
+/**
+ * Renders the compiled template for `context` (a component instance, or the
+ * state of a template-only component) into an element the VM can insert.
+ *
+ * This happens once per component instance; from then on, the compiled
+ * template updates itself.
+ */
+function createIsland(context: object): Island {
+  return untrack(() => {
+    let template: Template | undefined;
+    let self: unknown;
+    let args: Record<string, unknown>;
+
+    if (context instanceof TemplateOnlyState) {
+      template = context.template;
+      self = undefined;
+      args = context.args;
+    } else {
+      template = templateFor(context.constructor);
+      self = context;
+      args = (context as { args?: Record<string, unknown> }).args ?? {};
+    }
+
+    if (!template) {
+      throw new Error('BUG: rendering a compiled component without a compiled template');
+    }
+
+    let element = document.createElement('glimmer-island');
+    element.style.display = 'contents';
+
+    let outlets = trackedArray<Element>([]);
+
+    let result = renderTemplate(template, {
+      into: element,
+      owner: getOwner(context) ?? {},
+      self,
+      args,
+      outlets: {
+        add(outlet) {
+          outlets.push(outlet);
+          return () => {
+            let index = outlets.indexOf(outlet);
+            if (index !== -1) outlets.splice(index, 1);
+          };
+        },
+      },
+    });
+
+    return { element, outlets, result };
+  });
+}
+
+/**
+ * `(island this)`: a helper (rather than a plain function), so that the VM
+ * makes the island's render tree a destroyable child of its own block. That
+ * way compiled components are torn down in the same pass as the VM's own
+ * components, rather than a scheduling round later.
+ */
+class IslandHelperManager {
+  capabilities = helperCapabilities('3.23', { hasValue: true, hasDestroyable: true });
+
+  createHelper(_definition: object, args: { positional: readonly unknown[] }): Island {
+    return createIsland(args.positional[0] as object);
+  }
+
+  getValue(island: Island): Island {
+    return island;
+  }
+
+  getDestroyable(island: Island): object {
+    return island.result;
+  }
+}
+
+const island = setHelperManager(() => new IslandHelperManager(), {});
+
+/**
+ * The VM template of every compiled component: it inserts the island, where
+ * the compiled template renders (and updates) itself. For route templates,
+ * it also renders the route's `<@outlet />` into each `{{outlet}}` of the
+ * compiled template, in the same render tree as the route (like a route
+ * template compiled for the VM would).
+ */
+const BRIDGE = precompileTemplate(
+  `{{#let (island this) as |i|}}{{i.element}}{{#each i.outlets as |el|}}{{#in-element el insertBefore=null}}<@outlet />{{/in-element}}{{/each}}{{/let}}`,
+  {
+    moduleName: 'packages/@glimmer/dom/lib/vm.hbs',
+    strictMode: true,
+    scope() {
+      return { island };
+    },
+  }
+);
+
+const CAPABILITIES = componentCapabilities('3.13', {});
+
+class TemplateOnlyManager {
+  capabilities = CAPABILITIES;
+
+  constructor(readonly owner: object) {}
+
+  createComponent(definition: Template, args: { named: Record<string, unknown> }) {
+    let state = new TemplateOnlyState(definition, args.named);
+    setOwner(state, this.owner);
+    return state;
+  }
+
+  getContext(state: TemplateOnlyState) {
+    return state;
+  }
+}
+
+/**
+ * Makes a compiled template-only component renderable by the VM too.
+ */
+export function vmCompatible(t: Template): Template {
+  setComponentManager((owner: object) => new TemplateOnlyManager(owner), t);
+  setComponentTemplate(BRIDGE, t);
+  return t;
+}
+
+/**
+ * `template()`, for code compiled with `vmInterop`.
+ */
+export function template(render: RenderFn): Template {
+  return vmCompatible(compiledTemplate(render));
+}
+
+/**
+ * `setTemplate()`, for code compiled with `vmInterop`: the VM renders the
+ * class with its own component manager, and the compiled template through
+ * the bridge.
+ */
+export function setTemplate<T extends object>(definition: T, t: Template): T {
+  setCompiledTemplate(definition, t);
+  setComponentTemplate(BRIDGE, definition);
+  return definition;
+}
+
+/**
+ * `{{outlet}}` (with `vmInterop`): an element that the VM renders the
+ * route's `<@outlet />` into.
+ */
+export function outlet(b: Block, anchor: Node): void {
+  let sink = b.root.outlets;
+
+  if (!sink) {
+    throw new Error(
+      '{{outlet}} can only be used in a template that the router renders (a route template)'
+    );
+  }
+
+  let element = b.root.document.createElement('glimmer-outlet');
+  element.style.display = 'contents';
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- anchors are always attached
+  anchor.parentNode!.insertBefore(element, anchor);
+
+  let remove = sink.add(element);
+  registerDestructor(b, remove);
+}
diff --git a/packages/@glimmer/dom/package.json b/packages/@glimmer/dom/package.json
new file mode 100644
index 00000000000..587631a3086
--- /dev/null
+++ b/packages/@glimmer/dom/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@glimmer/dom",
+  "version": "0.94.0",
+  "private": true,
+  "license": "MIT",
+  "description": "EXPERIMENTAL: runtime helpers for templates compiled directly to DOM operations (strict mode only)",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./*": "./*.ts"
+  },
+  "dependencies": {
+    "@ember/-internals": "workspace:*",
+    "@ember/component": "workspace:*",
+    "@ember/runloop": "workspace:*",
+    "@ember/template-compilation": "workspace:*",
+    "@glimmer/constants": "workspace:*",
+    "@glimmer/destroyable": "workspace:*",
+    "@glimmer/global-context": "workspace:*",
+    "@glimmer/interfaces": "workspace:*",
+    "@glimmer/manager": "workspace:*",
+    "@glimmer/owner": "workspace:*",
+    "@glimmer/reference": "workspace:*",
+    "@glimmer/runtime": "workspace:*",
+    "@glimmer/validator": "workspace:*"
+  }
+}
diff --git a/packages/@glimmer/dom/test/codegen-test.ts b/packages/@glimmer/dom/test/codegen-test.ts
new file mode 100644
index 00000000000..a1379f47313
--- /dev/null
+++ b/packages/@glimmer/dom/test/codegen-test.ts
@@ -0,0 +1,464 @@
+import { generateDOM } from '@glimmer/compiler';
+import { preprocess } from '@glimmer/syntax';
+import * as runtime from '@glimmer/dom';
+import type { RenderResult } from '@glimmer/dom';
+import { tracked } from '@glimmer/tracking';
+import { trackedArray } from '@glimmer/validator';
+import { componentCapabilities, setComponentManager, setModifierManager } from '@glimmer/manager';
+import { capabilities as modifierCapabilities } from '@ember/modifier';
+import * as emberHelper from '@ember/helper';
+import * as emberModifier from '@ember/modifier';
+import { htmlSafe } from '@ember/template';
+import { template as vmTemplate } from '@ember/template-compiler/runtime';
+import { run } from '@ember/runloop';
+import { renderComponent as renderWithVM } from '@ember/renderer';
+import * as vm from '@glimmer/dom/vm';
+
+const { module, test } = QUnit;
+
+const IMPORTS: Record<string, Record<string, unknown>> = {
+  '@ember/helper': emberHelper,
+  '@ember/modifier': emberModifier,
+};
+
+/**
+ * Compile a template the way the babel plugin would, with `scope` as the
+ * JavaScript bindings that are in scope for it.
+ */
+const VM_NAMES = new Set(['template', 'setTemplate', 'outlet']);
+
+function compile(
+  source: string,
+  scope: Record<string, unknown> = {},
+  { vmInterop = false } = {}
+): runtime.Template {
+  let { hoisted, expression } = generateDOM(preprocess(source, { strictMode: true }), {
+    isLexical: (name) => name in scope,
+    importOf: (name) => {
+      for (let [module, exports] of Object.entries(IMPORTS)) {
+        if (name in exports && exports[name] === scope[name]) return { module, name };
+      }
+      return undefined;
+    },
+    runtime: (name) => (vmInterop && VM_NAMES.has(name) ? `$vm.${name}` : `$rt.${name}`),
+    vmInterop,
+    importBinding: (m, name) => `$imports[${JSON.stringify(m)}][${JSON.stringify(name)}]`,
+  });
+
+  let names = Object.keys(scope);
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval -- this is a compiler test
+  let factory = new Function(
+    '$rt',
+    '$vm',
+    '$imports',
+    ...names,
+    `${hoisted.join('\n')}\nreturn ${expression};`
+  );
+  return factory(runtime, vm, IMPORTS, ...names.map((n) => scope[n])) as runtime.Template;
+}
+
+let result: RenderResult | null = null;
+
+function fixture(): HTMLElement {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- always exists
+  return document.querySelector('#qunit-fixture')!;
+}
+
+function render(component: object, args?: Record<string, unknown>) {
+  run(() => {
+    result = runtime.renderComponent(
+      component,
+      args ? { into: fixture(), args } : { into: fixture() }
+    );
+  });
+}
+
+function html(): string {
+  // strip the comments used as anchors
+  return fixture().innerHTML.replace(/<!---->/gu, '');
+}
+
+function change(fn: () => void) {
+  run(fn);
+}
+
+function settled() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+/**
+ * The same shape as `@glimmer/component` (which is not available to these tests).
+ */
+class Component<_S = unknown> {
+  constructor(
+    _owner: object,
+    readonly args: Record<string, unknown>
+  ) {}
+
+  willDestroy() {}
+}
+
+setComponentManager(
+  () => ({
+    capabilities: componentCapabilities('3.13', { destructor: true }),
+    createComponent: (
+      Factory: new (owner: object, args: object) => Component,
+      args: { named: object }
+    ) => new Factory({}, args.named),
+    getContext: (component: Component) => component,
+    destroyComponent: (component: Component) => component.willDestroy(),
+  }),
+  Component
+);
+
+class State {
+  @tracked name = 'world';
+  @tracked show = true;
+  @tracked count = 0;
+}
+
+module('@glimmer/dom | codegen', (hooks) => {
+  hooks.afterEach(() => {
+    if (result) run(() => result?.destroy());
+    result = null;
+  });
+
+  test('static content', (assert) => {
+    render(compile(`<p class="a">hello &amp; <b>bye</b></p>{{"!"}}`));
+    assert.strictEqual(html(), '<p class="a">hello &amp; <b>bye</b></p>!');
+  });
+
+  test('dynamic text updates', (assert) => {
+    let state = new State();
+    render(compile(`<p>Hello {{state.name}}!</p>`, { state }));
+    assert.strictEqual(html(), '<p>Hello world!</p>');
+
+    change(() => (state.name = 'Ember'));
+    assert.strictEqual(html(), '<p>Hello Ember!</p>');
+  });
+
+  test('args', (assert) => {
+    let state = new State();
+    render(compile(`{{@name}}`), {
+      get name() {
+        return state.name;
+      },
+    });
+    assert.strictEqual(html(), 'world');
+
+    change(() => (state.name = 'args'));
+    assert.strictEqual(html(), 'args');
+  });
+
+  test('attributes', (assert) => {
+    let state = new State();
+    render(
+      compile(
+        `<div class="static {{if state.show 'shown'}}" title={{state.name}} data-count="{{state.count}} items"></div>`,
+        { state }
+      )
+    );
+    assert.strictEqual(
+      html(),
+      '<div class="static shown" title="world" data-count="0 items"></div>'
+    );
+
+    change(() => {
+      state.show = false;
+      state.count = 2;
+      state.name = 'x';
+    });
+    // (the same as the VM: the concatenated value keeps its trailing space)
+    assert.strictEqual(html(), '<div class="static " title="x" data-count="2 items"></div>');
+  });
+
+  test('if / else', (assert) => {
+    let state = new State();
+    render(
+      compile(`{{#if state.show}}<b>yes {{state.name}}</b>{{else}}<i>no</i>{{/if}}`, { state })
+    );
+    assert.strictEqual(html(), '<b>yes world</b>');
+
+    change(() => (state.name = 'there'));
+    assert.strictEqual(html(), '<b>yes there</b>');
+
+    change(() => (state.show = false));
+    assert.strictEqual(html(), '<i>no</i>');
+
+    change(() => (state.show = true));
+    assert.strictEqual(html(), '<b>yes there</b>');
+  });
+
+  test('each: keyed updates, moves, and else', (assert) => {
+    let a = { id: 'a', label: 'A' };
+    let b = { id: 'b', label: 'B' };
+    let c = { id: 'c', label: 'C' };
+    let list = trackedArray([a, b, c]);
+
+    render(
+      compile(
+        `<ul>{{#each list key="id" as |item i|}}<li>{{i}}:{{item.label}}</li>{{else}}<li>empty</li>{{/each}}</ul>`,
+        { list }
+      )
+    );
+    assert.strictEqual(html(), '<ul><li>0:A</li><li>1:B</li><li>2:C</li></ul>');
+
+    let firstLi = fixture().querySelector('li');
+
+    change(() => list.reverse());
+    assert.strictEqual(html(), '<ul><li>0:C</li><li>1:B</li><li>2:A</li></ul>');
+    assert.strictEqual(
+      fixture().querySelectorAll('li')[2],
+      firstLi,
+      'the DOM for "A" was moved, not re-created'
+    );
+
+    change(() => list.splice(1, 1));
+    assert.strictEqual(html(), '<ul><li>0:C</li><li>1:A</li></ul>');
+
+    change(() => list.push({ id: 'd', label: 'D' }));
+    assert.strictEqual(html(), '<ul><li>0:C</li><li>1:A</li><li>2:D</li></ul>');
+
+    change(() => list.splice(0, list.length));
+    assert.strictEqual(html(), '<ul><li>empty</li></ul>');
+  });
+
+  test('template-only components: args, yield, block params, named blocks', (assert) => {
+    let Card = compile(
+      `<section ...attributes><h1>{{yield to="title"}}</h1>{{#if (has-block "body")}}{{yield @count to="body"}}{{else}}no body{{/if}}</section>`
+    );
+    let state = new State();
+
+    render(
+      compile(
+        `<Card class="card" @count={{state.count}}><:title>Hi {{state.name}}</:title><:body as |n|>count: {{n}}</:body></Card>`,
+        { Card, state }
+      )
+    );
+    assert.strictEqual(html(), '<section class="card"><h1>Hi world</h1>count: 0</section>');
+
+    change(() => {
+      state.count = 5;
+      state.name = 'you';
+    });
+    assert.strictEqual(html(), '<section class="card"><h1>Hi you</h1>count: 5</section>');
+  });
+
+  test('...attributes merges classes, and ordering decides other attributes', (assert) => {
+    let Inner = compile(`<div class="inner" title="before" ...attributes data-x="after"></div>`);
+    render(compile(`<Inner class="outer" title="outer" data-x="outer" />`, { Inner }));
+    assert.strictEqual(html(), '<div class="inner outer" title="outer" data-x="after"></div>');
+  });
+
+  test('glimmer components with tracked state, on, and fn', (assert) => {
+    class Counter extends Component<{ Args: { step: number } }> {
+      @tracked count = 0;
+      increment = (by: number) => (this.count += by);
+    }
+    runtime.setTemplate(
+      Counter,
+      compile(`<button {{on "click" (fn this.increment @step)}}>{{this.count}}</button>`)
+    );
+
+    render(compile(`<Counter @step={{2}} />`, { Counter }));
+    assert.strictEqual(html(), '<button>0</button>');
+
+    let button = fixture().querySelector('button');
+    change(() => button?.click());
+    assert.strictEqual(html(), '<button>2</button>');
+  });
+
+  test('components are destroyed with their block', async (assert) => {
+    let destroyed = 0;
+    class Child extends Component {
+      override willDestroy() {
+        destroyed++;
+      }
+    }
+    runtime.setTemplate(Child, compile(`<span>child</span>`));
+    let state = new State();
+
+    render(compile(`{{#if state.show}}<Child />{{/if}}`, { Child, state }));
+    assert.strictEqual(html(), '<span>child</span>');
+
+    change(() => (state.show = false));
+    assert.strictEqual(html(), '');
+
+    // destruction is scheduled
+    await settled();
+    assert.strictEqual(destroyed, 1);
+  });
+
+  test('helpers: functions, built-ins, and inline keywords', (assert) => {
+    let shout = (text: string, { suffix }: { suffix?: string } = {}) =>
+      `${text.toUpperCase()}${suffix ?? ''}`;
+    let state = new State();
+
+    render(
+      compile(
+        `{{shout state.name suffix="!"}} {{concat "a" state.count}} {{if (eq state.count 0) "zero" "more"}} {{get (hash a=(array 1 2)) "a.length"}} {{and state.show "yes"}} {{or false "fallback"}} {{not state.show}}`,
+        { shout, state, concat: emberHelper.concat, get: emberHelper.get }
+      )
+    );
+    assert.strictEqual(html(), 'WORLD! a0 zero 2 yes fallback false');
+
+    change(() => (state.count = 3));
+    assert.strictEqual(html(), 'WORLD! a3 more 2 yes fallback false');
+  });
+
+  test('a bare lexical helper is invoked', (assert) => {
+    let now = () => 'called';
+    render(compile(`{{now}}`, { now }));
+    assert.strictEqual(html(), 'called');
+  });
+
+  test('custom modifiers install, update, and are destroyed', async (assert) => {
+    let events: string[] = [];
+
+    class Manager {
+      capabilities = modifierCapabilities('3.22');
+      createModifier() {
+        return {};
+      }
+      installModifier(_state: object, element: Element, args: { positional: unknown[] }) {
+        events.push(`install ${element.tagName} ${String(args.positional[0])}`);
+      }
+      updateModifier(_state: object, args: { positional: unknown[] }) {
+        events.push(`update ${String(args.positional[0])}`);
+      }
+      destroyModifier() {
+        events.push('destroy');
+      }
+    }
+    let track = setModifierManager(() => new Manager() as never, {});
+    let state = new State();
+
+    render(compile(`{{#if state.show}}<p {{track state.count}}></p>{{/if}}`, { track, state }));
+    assert.deepEqual(events, ['install P 0']);
+
+    change(() => (state.count = 1));
+    assert.deepEqual(events, ['install P 0', 'update 1']);
+
+    change(() => (state.show = false));
+    await settled();
+    assert.deepEqual(events, ['install P 0', 'update 1', 'destroy']);
+  });
+
+  test('let, each-in, and trusted content', (assert) => {
+    let obj = { a: 1, b: 2 };
+    render(
+      compile(
+        `{{#let "x" (concat "y" "z") as |x yz|}}{{x}}{{yz}}{{/let}}|{{#each-in obj as |k v|}}{{k}}={{v}};{{/each-in}}|{{{markup}}}|{{safe}}`,
+        { obj, markup: '<i>raw</i>', safe: htmlSafe('<b>safe</b>'), concat: emberHelper.concat }
+      )
+    );
+    assert.strictEqual(html(), 'xyz|a=1;b=2;|<i>raw</i>|<b>safe</b>');
+  });
+
+  test('dynamic content can switch between text and components', (assert) => {
+    let Bold = compile(`<b>bold</b>`);
+    let state = new State();
+    let value = {
+      get current(): unknown {
+        return state.show ? Bold : 'plain';
+      },
+    };
+
+    render(compile(`[{{value.current}}]`, { value }));
+    assert.strictEqual(html(), '[<b>bold</b>]');
+
+    change(() => (state.show = false));
+    assert.strictEqual(html(), '[plain]');
+
+    change(() => (state.show = true));
+    assert.strictEqual(html(), '[<b>bold</b>]');
+  });
+
+  test('components without a compiled template are rendered by the VM', (assert) => {
+    let VM = vmTemplate(`<p>vm: {{@name}}</p>`);
+    let state = new State();
+
+    render(compile(`<VM @name={{state.name}} />`, { VM, state }));
+    assert.strictEqual(
+      html(),
+      '<glimmer-island style="display: contents;"><p>vm: world</p></glimmer-island>'
+    );
+
+    change(() => (state.name = 'reactive'));
+    assert.strictEqual(
+      html(),
+      '<glimmer-island style="display: contents;"><p>vm: reactive</p></glimmer-island>'
+    );
+  });
+
+  test('element', (assert) => {
+    render(
+      compile(
+        `{{#let (element "h1") as |Tag|}}<Tag class="greeting">hello</Tag>{{/let}}{{#let (element "") as |None|}}<None>bare</None>{{/let}}`
+      )
+    );
+    assert.strictEqual(html(), '<h1 class="greeting">hello</h1>bare');
+  });
+
+  test('the VM can render compiled components (vmInterop)', (assert) => {
+    let state = new State();
+    let Greeting = compile(`<p>hello {{@name}}</p>`, {}, { vmInterop: true });
+
+    class Counter extends Component {
+      get doubled() {
+        return state.count * 2;
+      }
+    }
+    vm.setTemplate(Counter, compile(`<b>{{this.doubled}}</b>`, {}, { vmInterop: true }));
+
+    let Root = vmTemplate(`<Greeting @name={{state.name}} /><Counter />`, {
+      scope: () => ({ Greeting, Counter, state }),
+    });
+
+    let vmResult: { destroy(): void } | undefined;
+    run(() => {
+      vmResult = renderWithVM(Root, { into: fixture() });
+    });
+    assert.strictEqual(fixture().textContent, 'hello world0');
+
+    change(() => {
+      state.name = 'VM';
+      state.count = 2;
+    });
+    assert.strictEqual(fixture().textContent, 'hello VM4');
+
+    run(() => vmResult?.destroy());
+  });
+
+  test('VM-only components get attributes, named args, and blocks', (assert) => {
+    let Wrapper = vmTemplate(`<section ...attributes>{{@title}}: {{yield "from VM"}}</section>`);
+    let state = new State();
+
+    render(
+      compile(
+        `<Wrapper class="w" data-test @title={{state.name}} as |v|>{{v}} + {{state.count}}</Wrapper>`,
+        { Wrapper, state }
+      )
+    );
+    let section = fixture().querySelector('section');
+    assert.strictEqual(section?.getAttribute('class'), 'w');
+    assert.true(section?.hasAttribute('data-test'));
+    assert.strictEqual(section?.textContent, 'world: from VM + 0');
+
+    change(() => {
+      state.name = 'there';
+      state.count = 1;
+    });
+    assert.strictEqual(fixture().querySelector('section')?.textContent, 'there: from VM + 1');
+  });
+
+  test('{{outlet}} renders @outlet', (assert) => {
+    let Outlet = compile(`<i>child</i>`);
+    render(compile(`<p>{{outlet}}</p>`), { outlet: Outlet });
+    assert.strictEqual(html(), '<p><i>child</i></p>');
+  });
+
+  test('strict mode: unknown names are a compile error', (assert) => {
+    assert.throws(() => compile(`{{nope}}`), /`nope`, but it is not in scope/u);
+  });
+});
diff --git a/packages/@glimmer/dom/test/package.json b/packages/@glimmer/dom/test/package.json
new file mode 100644
index 00000000000..8090017c8c3
--- /dev/null
+++ b/packages/@glimmer/dom/test/package.json
@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "name": "@glimmer-test/dom",
+  "version": "0.94.0",
+  "scripts": {},
+  "dependencies": {
+    "@ember/helper": "workspace:*",
+    "@ember/modifier": "workspace:*",
+    "@ember/renderer": "workspace:*",
+    "@ember/runloop": "workspace:*",
+    "@ember/template": "workspace:*",
+    "@ember/template-compiler": "workspace:*",
+    "@glimmer/compiler": "workspace:*",
+    "@glimmer/dom": "workspace:*",
+    "@glimmer/manager": "workspace:*",
+    "@glimmer/syntax": "workspace:*",
+    "@glimmer/tracking": "workspace:*",
+    "@glimmer/validator": "workspace:*"
+  }
+}
diff --git a/packages/@glimmer/dom/vm.ts b/packages/@glimmer/dom/vm.ts
new file mode 100644
index 00000000000..2fc630c516c
--- /dev/null
+++ b/packages/@glimmer/dom/vm.ts
@@ -0,0 +1,16 @@
+/**
+ * EXPERIMENTAL
+ *
+ * Interop between compiled templates and the VM, in both directions:
+ *
+ * - compiled templates can render components that only have a VM template
+ *   (e.g. from addons), and
+ * - the VM (the router, `@ember/renderer`, VM-rendered components) can render
+ *   components whose template was compiled to DOM operations, including
+ *   route templates.
+ *
+ * The codegen babel plugin imports from here when `vmInterop` is enabled.
+ * Apps that never hand a compiled component to the VM don't need this module,
+ * and then don't pay for the VM.
+ */
+export { outlet, setTemplate, template, vmCompatible } from './lib/vm';
diff --git a/packages/ember-template-compiler/minimal.ts b/packages/ember-template-compiler/minimal.ts
index 9676b01d89f..2b48be0c905 100644
--- a/packages/ember-template-compiler/minimal.ts
+++ b/packages/ember-template-compiler/minimal.ts
@@ -7,6 +7,27 @@
 // needs to compile templates. Unlike the full ./index.ts, this module can be
 // directly evaluted in node because it doesn't try to pull in the whole kitchen
 // sink.
+import { preprocess } from '@glimmer/syntax';
+import {
+  codegenBabelPlugin,
+  type CodegenBabelPluginOptions,
+} from '@glimmer/compiler/lib/codegen/babel-plugin';
+import { ALLOWED_GLOBALS } from '@ember/template-compiler/lib/plugins/allowed-globals';
+
 export { default as precompile } from './lib/system/precompile';
 export { buildCompileOptions as _buildCompileOptions } from './lib/system/compile-options';
 export { preprocess as _preprocess, print as _print } from '@glimmer/syntax';
+
+// EXPERIMENTAL: compile strict-mode templates directly to DOM operations
+// (no wire format, no VM). Use instead of babel-plugin-ember-template-compilation
+// for gjs/gts; see packages/@glimmer/dom.
+export function _codegenBabelPlugin(
+  babel: unknown,
+  options: Omit<CodegenBabelPluginOptions, 'preprocess'> = {}
+) {
+  return codegenBabelPlugin(babel, {
+    preprocess,
+    isGlobal: (name) => ALLOWED_GLOBALS.has(name),
+    ...options,
+  });
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73af5a19048..6fc9ed71be9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1752,6 +1752,87 @@ importers:
         specifier: workspace:*
         version: link:../../debug-util
 
+  packages/@glimmer/dom:
+    dependencies:
+      '@ember/-internals':
+        specifier: workspace:*
+        version: link:../../@ember/-internals
+      '@ember/component':
+        specifier: workspace:*
+        version: link:../../@ember/component
+      '@ember/runloop':
+        specifier: workspace:*
+        version: link:../../@ember/runloop
+      '@ember/template-compilation':
+        specifier: workspace:*
+        version: link:../../@ember/template-compilation
+      '@glimmer/constants':
+        specifier: workspace:*
+        version: link:../constants
+      '@glimmer/destroyable':
+        specifier: workspace:*
+        version: link:../destroyable
+      '@glimmer/global-context':
+        specifier: workspace:*
+        version: link:../global-context
+      '@glimmer/interfaces':
+        specifier: workspace:*
+        version: link:../interfaces
+      '@glimmer/manager':
+        specifier: workspace:*
+        version: link:../manager
+      '@glimmer/owner':
+        specifier: workspace:*
+        version: link:../owner
+      '@glimmer/reference':
+        specifier: workspace:*
+        version: link:../reference
+      '@glimmer/runtime':
+        specifier: workspace:*
+        version: link:../runtime
+      '@glimmer/validator':
+        specifier: workspace:*
+        version: link:../validator
+
+  packages/@glimmer/dom/test:
+    dependencies:
+      '@ember/helper':
+        specifier: workspace:*
+        version: link:../../../@ember/helper
+      '@ember/modifier':
+        specifier: workspace:*
+        version: link:../../../@ember/modifier
+      '@ember/renderer':
+        specifier: workspace:*
+        version: link:../../../@ember/renderer
+      '@ember/runloop':
+        specifier: workspace:*
+        version: link:../../../@ember/runloop
+      '@ember/template':
+        specifier: workspace:*
+        version: link:../../../@ember/template
+      '@ember/template-compiler':
+        specifier: workspace:*
+        version: link:../../../@ember/template-compiler
+      '@glimmer/compiler':
+        specifier: workspace:*
+        version: link:../../compiler
+      '@glimmer/dom':
+        specifier: workspace:*
+        version: link:..
+      '@glimmer/manager':
+        specifier: workspace:*
+        version: link:../../manager
+      '@glimmer/syntax':
+        specifier: workspace:*
+        version: link:../../syntax
+      '@glimmer/tracking':
+        specifier: workspace:*
+        version: link:../../tracking
+      '@glimmer/validator':
+        specifier: workspace:*
+        version: link:../../validator
+
   packages/@glimmer/encoder:
     dependencies:
       '@glimmer/interfaces':
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 4491f00f19c..3838a615925 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -295,6 +295,9 @@ export function exposedDependencies() {
       'packages/@glimmer/tracking/primitives/cache.ts'
     ),
     '@glimmer/env': resolve(packageCache.appRoot, 'packages/@glimmer/env/index.ts'),
+    // EXPERIMENTAL: the runtime for templates compiled directly to DOM operations
+    '@glimmer/dom': resolve(packageCache.appRoot, 'packages/@glimmer/dom/index.ts'),
+    '@glimmer/dom/vm': resolve(packageCache.appRoot, 'packages/@glimmer/dom/vm.ts'),
   };
 }
 
diff --git a/smoke-tests/v2-app-hello-world-template/app.gjs b/smoke-tests/v2-app-hello-world-template/app.gjs
index 3551eb2cd3a..83b9d3d9bdc 100644
--- a/smoke-tests/v2-app-hello-world-template/app.gjs
+++ b/smoke-tests/v2-app-hello-world-template/app.gjs
@@ -1,4 +1,4 @@
-import { renderComponent } from '@ember/renderer';
+import { renderComponent } from '@glimmer/dom';
 
 renderComponent(
   <template>hi </template>,
diff --git a/smoke-tests/v2-app-hello-world-template/babel.config.mjs b/smoke-tests/v2-app-hello-world-template/babel.config.mjs
index 0b55ede7cd6..311cbaf0245 100644
--- a/smoke-tests/v2-app-hello-world-template/babel.config.mjs
+++ b/smoke-tests/v2-app-hello-world-template/babel.config.mjs
@@ -1,11 +1,15 @@
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { buildMacros } from '@embroider/macros/babel';
+// EXPERIMENTAL: compiles <template>s directly to DOM operations (no wire
+// format, no VM). See packages/@glimmer/dom in ember-source.
+import { _codegenBabelPlugin } from 'ember-source/ember-template-compiler/index.js';
 
 const macros = buildMacros({});
 
 export default {
   plugins: [
+    _codegenBabelPlugin,
     [
       'babel-plugin-ember-template-compilation',
       {
diff --git a/smoke-tests/v2-app-template/babel.config.mjs b/smoke-tests/v2-app-template/babel.config.mjs
index f77022f8482..7ecff7ef440 100644
--- a/smoke-tests/v2-app-template/babel.config.mjs
+++ b/smoke-tests/v2-app-template/babel.config.mjs
@@ -4,9 +4,15 @@ import {
   babelCompatSupport,
   templateCompatSupport,
 } from '@embroider/compat/babel';
+// EXPERIMENTAL: compiles <template>s directly to DOM operations (no wire
+// format, no VM). `vmInterop` lets the router render compiled templates.
+// See packages/@glimmer/dom in ember-source.
+import { _codegenBabelPlugin } from 'ember-source/ember-template-compiler/index.js';
 
 export default {
   plugins: [
+    // must come before babel-plugin-ember-template-compilation
+    [_codegenBabelPlugin, { vmInterop: true }],
     [
       'babel-plugin-ember-template-compilation',
       {
diff --git a/tests/node-vitest/tree-shakability.test.js b/tests/node-vitest/tree-shakability.test.js
index a26056a90ee..df85835bec0 100644
--- a/tests/node-vitest/tree-shakability.test.js
+++ b/tests/node-vitest/tree-shakability.test.js
@@ -28,6 +28,7 @@ it('[dev] source modules with side effects', () => {
       "@ember/-internals/runtime/lib/ext/rsvp.js",
       "@ember/debug/index.js",
       "@ember/routing/route.js",
+      "@glimmer/dom/lib/vm.js",
       "@glimmer/runtime/lib/compiled/opcodes/component.js",
       "@glimmer/runtime/lib/compiled/opcodes/content.js",
       "@glimmer/runtime/lib/compiled/opcodes/debugger.js",
@@ -54,6 +55,7 @@ it('[prod] source modules with side effects', () => {
       "@ember/-internals/glimmer/lib/environment.js",
       "@ember/-internals/runtime/lib/ext/rsvp.js",
       "@ember/routing/route.js",
+      "@glimmer/dom/lib/vm.js",
       "@glimmer/runtime/lib/compiled/opcodes/component.js",
       "@glimmer/runtime/lib/compiled/opcodes/content.js",
       "@glimmer/runtime/lib/compiled/opcodes/debugger.js",