diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 0000000..845ef76
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,73 @@
+name: Main CI
+
+on: [push]
+
+permissions: {}
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    strategy:
+      matrix:
+        node-version: [24.x]
+    steps:
+    - uses: actions/checkout@v7
+      with:
+        persist-credentials: false
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v7
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - name: Run eslint
+      run: npm run lint
+  test-karma:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    strategy:
+      matrix:
+        node-version: [24.x]
+    steps:
+    - uses: actions/checkout@v7
+      with:
+        persist-credentials: false
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v7
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: |
+        npm install
+        cd test
+        npm install
+    - name: Run test with Node.js ${{ matrix.node-version }} and Karma
+      run: |
+        cd test
+        npm test
+  # coverage:
+  #   needs: [test-karma]
+  #   runs-on: ubuntu-latest
+  #   timeout-minutes: 10
+  #   strategy:
+  #     matrix:
+  #       node-version: [24.x]
+  #   steps:
+  #   - uses: actions/checkout@v7
+  #   - name: Use Node.js ${{ matrix.node-version }}
+  #     uses: actions/setup-node@v7
+  #     with:
+  #       node-version: ${{ matrix.node-version }}
+  #   - run: |
+  #       npm install
+  #       cd test
+  #       npm install
+  #   - name: Generate coverage report
+  #     run: |
+  #       cd test
+  #       npm run coverage-ci
+  #   - name: Upload coverage to Codecov
+  #     uses: codecov/codecov-action@v7
+  #     with:
+  #       files: ./test/coverage/lcov.info
+  #       fail_ci_if_error: true
+  #       token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6f170d9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,15 @@
+*.log
+*.sw[nop]
+*~
+.nyc_output
+.project
+.settings
+.vscode
+TAGS
+coverage
+node_modules
+reports
+.cache
+dist
+package-lock.json
+test/package-lock.json
\ No newline at end of file
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..e9ee3cb
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..9557023
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,12 @@
+# @digitalbazaar/vc-html-render-method ChangeLog
+
+## 1.0.0 - 2026-XX-XX
+
+- Initial release: render Verifiable Credential HTML Render Methods in a
+  nested, sandboxed iframe (framework-agnostic; the consuming app's CSP is
+  untouched).
+- `HtmlRenderer` render API: a `ready` promise, `resize`/`error`/`loaded`
+  events, and `destroy()`.
+- Selective disclosure (`renderProperty` via `selectJsonLd`),
+  `renderMethodReady()` over a `MessageChannel`, and `outputPreference.style`
+  sizing.
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..df549c2
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,26 @@
+Copyright (c) 2026, Digital Bazaar, Inc.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/README.md b/README.md
index e95d598..bf1d0d9 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,115 @@
-# bedrock-web-vc-html-renderer
-Bedrock library that renders Verifiable Credential HTML Render Methods inside a nested, sandboxed iframe.
+# @digitalbazaar/vc-html-render-method
+
+Render a Verifiable Credential's **HTML Render Method** inside a nested,
+sandboxed iframe — framework-agnostic, and without changing the consuming app's
+own Content-Security-Policy.
+
+This library implements the `html` render suite of the
+[W3C VC Render Method specification](https://w3c.github.io/vc-render-method/#the-html-render-suite):
+an issuer-supplied HTML/CSS/JS template is rendered against a filtered copy of
+the credential, fully isolated from the host application.
+
+## Why a nested iframe?
+
+- The spec requires the page hosting the template to set a strict CSP
+(`frame-src 'none'`). Applying that to a whole application would break other
+`<iframe src>`-based features (for example CHAPI).
+- This library instead places the spec's "host page" role inside an iframe it
+owns, so the strict policy is scoped to that subtree and the consuming app's
+CSP is never touched.
+
+```text
+App (any CSP; CHAPI <iframe src> keeps working)
+  |-> host frame (library-owned; srcdoc)  CSP: frame-src 'none'
+        |-> template frame  sandbox="allow-scripts", opaque origin
+              CSP: default-src data: 'unsafe-inline'
+              -> issuer HTML + filtered credential
+```
+
+The issuer template runs at an opaque origin under `allow-scripts` with no
+network access; it cannot reach the host frame or the application.
+
+## Install
+
+```sh
+npm install @digitalbazaar/vc-html-render-method
+```
+
+## Usage
+
+```js
+import {HtmlRenderer, supportsHtml} from '@digitalbazaar/vc-html-render-method';
+
+if(supportsHtml({credential})) {
+  const handle = new HtmlRenderer().render({
+    mount: document.querySelector('#slot'),
+    credential
+  });
+
+  // resolves when rendered
+  await handle.ready;
+  // frame auto-sizes to content
+  handle.on('resize', ({height}) => {});
+  // tear down when done
+  handle.destroy();
+}
+```
+
+The template runs at an opaque origin under `sandbox="allow-scripts"` with no
+network access, so it cannot reach the host frame or the application. Before the
+template runs, the credential is filtered to the render method's `renderProperty`
+JSON pointers — the template only sees the fields the issuer exposed.
+
+## Configuration
+
+`new HtmlRenderer(options)` holds defaults for every render:
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `timeout` | `number` | `10000` | Milliseconds to wait for a ready/error signal before rejecting; `0` disables. |
+| `sandbox` | `string` | `'allow-scripts'` | `sandbox` attribute for the template frame. |
+| `waitForReady` | `boolean` | `false` | Require an explicit `renderMethodReady()`; do not treat frame `load` as success. |
+| `signalGrace` | `number` | `250` | Milliseconds after `load` to wait for an explicit signal before treating load as success. |
+
+`render({mount, credential, renderMethod?})` returns a handle
+(`renderMethod` defaults to the first HTML render method on the credential):
+
+| Member | Description |
+|---|---|
+| `handle.ready` | Promise that resolves on success; rejects on error, timeout, or `destroy()`. |
+| `handle.element` | The rendered `<iframe>` element. |
+| `handle.on(type, fn)` / `off(type, fn)` | Events: `ready`, `error` (`Error`), `resize` (`{width, height}`), `loaded`. |
+| `handle.destroy()` | Remove the iframe and listeners; reject `ready` if still pending. |
+
+A render method's `outputPreference.style` (`width`/`height`) is honored as a
+fixed box; otherwise the frame auto-sizes to its content.
+
+## Conformance
+
+Conforms to the inline HTML render suite of the
+[specification](https://w3c.github.io/vc-render-method/#the-html-render-suite)
+(experimental, under active development):
+
+- Security: host `frame-src 'none'`, template `sandbox="allow-scripts"`, wrapper
+  `default-src data: 'unsafe-inline'`, no navigation/network/host access.
+- Wrapper: headless template with the credential in an `application/vc` data
+  block.
+- Selective disclosure via `selectJsonLd` over `renderProperty`.
+- `renderMethodReady()` handshake over a `MessageChannel`.
+- `outputPreference.style` sizing preference.
+
+## Roadmap
+
+- Remote `template` fetch — only inline `data:` templates are supported today.
+- `digestMultibase` template integrity verification (multibase `u`, SHA-2-256).
+- The `template` map form `{id, mediaType, digestMultibase}`.
+- `outputPreference.accessMode` and preferred `mediaType`.
+
+## Commercial Support
+
+Commercial support for this library is available upon request from
+Digital Bazaar: support@digitalbazaar.com
+
+## License
+
+[BSD-3-Clause](LICENSE) © Digital Bazaar, Inc.
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..733edef
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,26 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import browserConfig from '@digitalbazaar/eslint-config/browser-recommended';
+
+export default [
+  {
+    ignores: ['dist/**']
+  },
+  ...browserConfig,
+  {
+    // browser test specs also use mocha + chai `should` globals
+    files: ['test/web/**/*.js'],
+    languageOptions: {
+      globals: {
+        describe: 'readonly',
+        it: 'readonly',
+        before: 'readonly',
+        after: 'readonly',
+        beforeEach: 'readonly',
+        afterEach: 'readonly',
+        should: 'readonly'
+      }
+    }
+  }
+];
diff --git a/lib/constants.js b/lib/constants.js
new file mode 100644
index 0000000..eb275c1
--- /dev/null
+++ b/lib/constants.js
@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+
+// HTML Render Suite constants. Tags: [spec] = mandated by
+// https://w3c.github.io/vc-render-method/#the-html-render-suite ;
+// [lib] = library-defined (not spec-mandated).
+
+// [spec] HTML suite = `TemplateRenderMethod` with `renderSuite: "html"`.
+export const RENDER_METHOD_TYPE = 'TemplateRenderMethod';
+export const HTML_RENDER_SUITE = 'html';
+
+// [spec] wrapper/template-frame CSP: inline + `data:` only, no network.
+export const TEMPLATE_CSP = `default-src data: 'unsafe-inline'`;
+
+// [spec] host-frame CSP requires `frame-src 'none'` (allows `srcdoc`, blocks
+// `<iframe src>` -> isolates the template and preserves the app's CHAPI
+// framing). The remaining directives are added hardening (not spec-mandated):
+// `default-src 'none'` blocks all network; `script-src`/`style-src
+// 'unsafe-inline'` admit only the host controller's inline script and styles.
+export const HOST_CSP = `default-src 'none'; script-src 'unsafe-inline'; ` +
+  `style-src 'unsafe-inline'; frame-src 'none'`;
+
+// [spec] template-frame sandbox; no `allow-same-origin` -> opaque origin.
+export const TEMPLATE_SANDBOX = 'allow-scripts';
+
+// [lib] reject `handle.ready` if no ready/error by this time; `0` disables.
+export const DEFAULT_TIMEOUT = 10000;
+
+// Transports: app<->host via `postMessage` [lib]; host<->template via a
+// transferred `MessageChannel` port [spec].
+export const MESSAGE_NAMESPACE = '@digitalbazaar/vc-html-render-method';
+
+export const MESSAGE_TYPE = {
+  // [lib] host->app: controller ready to receive the template
+  HOST_READY: `${MESSAGE_NAMESPACE}:host-ready`,
+  // [lib] app->host: deliver template document + options
+  RENDER: `${MESSAGE_NAMESPACE}:render`,
+  // [spec] host->template: transfer the MessageChannel port
+  PORT: `${MESSAGE_NAMESPACE}:port`,
+  // [lib] host->app: template frame `load` fired (drives no-signal fallback)
+  LOADED: `${MESSAGE_NAMESPACE}:loaded`,
+  // [spec] renderMethodReady() success (template->host port->app)
+  READY: `${MESSAGE_NAMESPACE}:ready`,
+  // [spec] renderMethodReady(Error) (template->host port->app)
+  ERROR: `${MESSAGE_NAMESPACE}:error`,
+  // [lib] content size changed (template->host port->app)
+  RESIZE: `${MESSAGE_NAMESPACE}:resize`
+};
diff --git a/lib/detect.js b/lib/detect.js
new file mode 100644
index 0000000..302f299
--- /dev/null
+++ b/lib/detect.js
@@ -0,0 +1,85 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {HTML_RENDER_SUITE, RENDER_METHOD_TYPE} from './constants.js';
+import {selectJsonLd} from './select.js';
+
+/**
+ * Check if a verifiable credential has an HTML Render Method.
+ *
+ * @param {object} options - Options.
+ * @param {object} options.credential - The verifiable credential.
+ *
+ * @returns {boolean} `true` if an HTML render method is present.
+ */
+export function supportsHtml({credential} = {}) {
+  return findHtmlRenderMethods({credential}).length > 0;
+}
+
+/**
+ * Find all HTML Render Methods on a verifiable credential.
+ *
+ * [spec] An HTML Render Method is a `TemplateRenderMethod` whose `renderSuite`
+ * is `"html"`. `renderMethod` may be a single object or an array.
+ *
+ * @param {object} options - Options.
+ * @param {object} options.credential - The verifiable credential.
+ *
+ * @returns {Array} The matching render method objects (possibly empty).
+ */
+export function findHtmlRenderMethods({credential} = {}) {
+  let renderMethods = credential?.renderMethod;
+  if(!renderMethods) {
+    return [];
+  }
+  // normalize a single render method to an array
+  if(!Array.isArray(renderMethods)) {
+    renderMethods = [renderMethods];
+  }
+  return renderMethods.filter(_isHtmlRenderMethod);
+}
+
+/**
+ * Find the first HTML Render Method on a verifiable credential.
+ *
+ * @param {object} options - Options.
+ * @param {object} options.credential - The verifiable credential.
+ *
+ * @returns {object|null} The first matching render method, or `null`.
+ */
+export function findHtmlRenderMethod({credential} = {}) {
+  const [renderMethod = null] = findHtmlRenderMethods({credential});
+  return renderMethod;
+}
+
+/**
+ * Filter a credential to the fields named by a render method's
+ * `renderProperty` JSON pointers (selective disclosure).
+ *
+ * [spec] MUST filter with the `selectJsonLd` algorithm from VC-DI-ECDSA over
+ * the RFC-6901 `renderProperty` pointers; an absent `renderProperty` exposes
+ * the whole credential. Every pointer must resolve or `selectJsonLd` throws.
+ *
+ * @param {object} options - Options.
+ * @param {object} options.credential - The verifiable credential.
+ * @param {object} options.renderMethod - The HTML render method.
+ *
+ * @returns {object} The filtered credential.
+ */
+export function filterCredential({credential, renderMethod} = {}) {
+  // [lib] deep-clone to strip framework reactive proxies (e.g. Vue); the
+  // selection algorithm requires a plain object
+  const document = JSON.parse(JSON.stringify(credential));
+  const pointers = renderMethod?.renderProperty;
+  if(!Array.isArray(pointers) || pointers.length === 0) {
+    // [spec] no `renderProperty`: expose the whole credential
+    return document;
+  }
+  return selectJsonLd({document, pointers});
+}
+
+// [spec] discriminator: `TemplateRenderMethod` + `renderSuite: "html"`
+function _isHtmlRenderMethod(renderMethod) {
+  return renderMethod?.type === RENDER_METHOD_TYPE &&
+    renderMethod?.renderSuite === HTML_RENDER_SUITE;
+}
diff --git a/lib/documents.js b/lib/documents.js
new file mode 100644
index 0000000..84df9e0
--- /dev/null
+++ b/lib/documents.js
@@ -0,0 +1,229 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {
+  HOST_CSP, MESSAGE_TYPE, TEMPLATE_CSP, TEMPLATE_SANDBOX
+} from './constants.js';
+import {filterCredential} from './detect.js';
+
+/**
+ * Build the inner *template* frame document (the spec's "wrapper code").
+ *
+ * [spec] The wrapper provides `<html>/<head>/<body>` (the issuer template MUST
+ * be a headless fragment), applies the template-frame CSP, and embeds the
+ * filtered credential as a `<script type="application/vc">` data block in the
+ * `<head>`. A bootstrap adds the spec's `window.renderMethodReady()` and
+ * signals over a `MessageChannel` port.
+ *
+ * @param {object} options - Options.
+ * @param {object} options.credential - The verifiable credential.
+ * @param {object} options.renderMethod - The HTML render method.
+ *
+ * @returns {string} The inner template frame document as an HTML string.
+ */
+export function createTemplateDocument({credential, renderMethod} = {}) {
+  const templateCode = _resolveTemplate({renderMethod});
+  const filtered = filterCredential({credential, renderMethod});
+  const json = _safeJson(filtered);
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-security-policy" content="${TEMPLATE_CSP}">
+<style>html,body{margin:0}</style>
+<script name="credential" type="application/vc">${json}</script>
+${_templateBootstrap()}
+</head>
+<body>
+${templateCode}
+</body>
+</html>`;
+}
+
+/**
+ * Build the outer *host* frame document (the spec's "host page" role).
+ *
+ * Static (identical for every credential), so it can be cached. [spec] It
+ * carries the host CSP (`frame-src 'none'`) and hosts the template in a
+ * sandboxed `srcdoc` iframe. It announces readiness to the app, and on a
+ * `RENDER` message creates the template frame and relays the template's
+ * ready/error/resize up to the app.
+ *
+ * @returns {string} The host frame document as an HTML string.
+ */
+export function createHostDocument() {
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-security-policy" content="${HOST_CSP}">
+</head>
+<body>
+${_hostController()}
+</body>
+</html>`;
+}
+
+// Resolve `renderMethod.template` to raw template HTML.
+// [spec] `template` is a string `data:` URL (RFC-2397): `;base64,` is decoded,
+// plain `data:text/html,` is used verbatim.
+function _resolveTemplate({renderMethod} = {}) {
+  const template = renderMethod?.template;
+  if(typeof template !== 'string') {
+    throw new TypeError('"renderMethod.template" must be a string.');
+  }
+  const base64Prefix = 'data:text/html;base64,';
+  const plainPrefix = 'data:text/html,';
+  if(template.startsWith(base64Prefix)) {
+    return atob(template.slice(base64Prefix.length));
+  }
+  if(template.startsWith(plainPrefix)) {
+    return template.slice(plainPrefix.length);
+  }
+  // [lib] otherwise treat the string as raw HTML.
+  return template;
+}
+
+// [lib] serialize to JSON and neutralize `<` so a credential value containing
+// `</script>` cannot break out of the `application/vc` data block
+function _safeJson(value) {
+  return JSON.stringify(value, null, 2).replace(/</g, '\\u003c');
+}
+
+// Bootstrap injected into the template frame.
+// [spec] defines `window.renderMethodReady()` and signals ready/error over a
+// transferred `MessageChannel` port. [lib] also reports content size, and
+// buffers a terminal signal made before the port arrives.
+function _templateBootstrap() {
+  return `<script>
+(function() {
+  'use strict';
+  let port = null;
+  let pendingTerminal = null;
+  let settled = false;
+  function send(message) {
+    if(port) {
+      port.postMessage(message);
+    }
+  }
+  function reportSize() {
+    // [lib] measure body (documentElement.scrollHeight is viewport-clamped)
+    // so the frame hugs its content instead of a minimum height
+    const body = document.body;
+    if(!body) {
+      return;
+    }
+    send({
+      type: '${MESSAGE_TYPE.RESIZE}',
+      width: body.scrollWidth,
+      height: body.scrollHeight
+    });
+  }
+  function flush() {
+    if(port && pendingTerminal) {
+      port.postMessage(pendingTerminal);
+      pendingTerminal = null;
+    }
+  }
+  // [spec] the completion signal the issuer template calls
+  window.renderMethodReady = function(error) {
+    if(settled) {
+      return;
+    }
+    settled = true;
+    if(error) {
+      const message = (error && error.message) ?
+        String(error.message) : String(error);
+      pendingTerminal = {type: '${MESSAGE_TYPE.ERROR}', message: message};
+    } else {
+      pendingTerminal = {type: '${MESSAGE_TYPE.READY}'};
+    }
+    flush();
+    reportSize();
+  };
+  // [spec] receive the MessageChannel port handed off by the host frame
+  window.addEventListener('message', function(event) {
+    if(event.source !== window.parent) {
+      return;
+    }
+    const data = event.data || {};
+    if(data.type === '${MESSAGE_TYPE.PORT}' && event.ports && event.ports[0]) {
+      port = event.ports[0];
+      flush();
+      reportSize();
+    }
+  });
+  window.addEventListener('load', reportSize);
+  if(typeof ResizeObserver !== 'undefined') {
+    new ResizeObserver(reportSize).observe(document.documentElement);
+  } else {
+    window.addEventListener('resize', reportSize);
+  }
+})();
+</script>`;
+}
+
+// Controller injected into the host frame.
+// [spec] creates the sandboxed `srcdoc` template frame and a `MessageChannel`
+// to it. [lib] relays the template's messages to the app and applies sizing.
+function _hostController() {
+  return `<script>
+(function() {
+  'use strict';
+  const app = window.parent;
+  let inner = null;
+  let fill = false;
+  function toApp(message) {
+    app.postMessage(message, '*');
+  }
+  function render(data) {
+    fill = !!data.fill;
+    if(inner) {
+      inner.remove();
+      inner = null;
+    }
+    if(fill) {
+      // [lib] issuer declared a fixed height: let the inner frame fill the
+      // host frame's box rather than hugging its content
+      document.documentElement.style.height = '100%';
+      document.body.style.height = '100%';
+    }
+    const frame = document.createElement('iframe');
+    // [spec] template frame is a sandboxed srcdoc iframe (opaque origin)
+    frame.setAttribute('sandbox', data.sandbox || '${TEMPLATE_SANDBOX}');
+    frame.setAttribute('scrolling', 'no');
+    frame.style.cssText = 'display:block;border:0;width:100%;height:' +
+      (fill ? '100%' : '0') + ';overflow:hidden';
+    // [spec] dedicated MessageChannel to the template: it signals
+    // ready/error/resize over the transferred port; the host relays to the app
+    const channel = new MessageChannel();
+    channel.port1.onmessage = function(event) {
+      const msg = event.data || {};
+      if(!fill && msg.type === '${MESSAGE_TYPE.RESIZE}' &&
+        typeof msg.height === 'number') {
+        inner.style.height = msg.height + 'px';
+      }
+      toApp(msg);
+    };
+    frame.addEventListener('load', function() {
+      toApp({type: '${MESSAGE_TYPE.LOADED}'});
+      // [spec] transfer port2 to the template frame
+      frame.contentWindow.postMessage(
+        {type: '${MESSAGE_TYPE.PORT}'}, '*', [channel.port2]);
+    });
+    frame.srcdoc = data.document;
+    document.body.appendChild(frame);
+    inner = frame;
+  }
+  document.documentElement.style.margin = '0';
+  document.body.style.margin = '0';
+  window.addEventListener('message', function(event) {
+    if(event.source === app) {
+      const data = event.data || {};
+      if(data.type === '${MESSAGE_TYPE.RENDER}') {
+        render(data);
+      }
+    }
+  });
+  toApp({type: '${MESSAGE_TYPE.HOST_READY}'});
+})();
+</script>`;
+}
diff --git a/lib/htmlRenderer.js b/lib/htmlRenderer.js
new file mode 100644
index 0000000..d9e0492
--- /dev/null
+++ b/lib/htmlRenderer.js
@@ -0,0 +1,328 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {createHostDocument, createTemplateDocument} from './documents.js';
+import {
+  DEFAULT_TIMEOUT, MESSAGE_TYPE, TEMPLATE_SANDBOX
+} from './constants.js';
+import {findHtmlRenderMethod} from './detect.js';
+
+// [lib] after the template frame's `load`, wait this long for an explicit
+// `renderMethodReady()` before treating load as success (fallback for
+// templates that never signal)
+const DEFAULT_SIGNAL_GRACE = 250;
+
+// [spec] coerce an `outputPreference.style` width/height to a CSS length
+function _cssSize(value) {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
+/**
+ * Controls a single in-progress render: owns the outer host iframe, runs the
+ * `HOST_READY -> RENDER -> LOADED -> READY/ERROR` handshake, applies size
+ * updates, and exposes lifecycle events plus a `ready` promise.
+ */
+export class RenderHandle {
+  /**
+    * @param {object} options - Options (supplied by {@link HtmlRenderer}).
+    * @param {Element} options.mount - The element to render into.
+    * @param {object} options.credential - The verifiable credential.
+    * @param {object} options.renderMethod - The HTML render method.
+    * @param {number} options.timeout - Readiness timeout in ms (`0` disables).
+    * @param {string} options.sandbox - `sandbox` for the inner template frame.
+    * @param {boolean} options.waitForReady - Require an explicit ready signal.
+    * @param {number} options.signalGrace - Post-`load` grace period in ms.
+    * @param {object} [options.style] - Issuer-declared `outputPreference.style`
+    *  with optional CSS `width`/`height` for the rendered frame.
+    */
+  constructor({
+    mount, credential, renderMethod, timeout, sandbox, waitForReady,
+    signalGrace, style
+  } = {}) {
+    this._listeners = new Map();
+    this._settled = false;
+    this._destroyed = false;
+    this._sandbox = sandbox;
+    this._waitForReady = waitForReady;
+    this._signalGrace = signalGrace;
+    this._graceTimer = null;
+    this._timeoutTimer = null;
+    // [spec] `outputPreference.style` (width/height): a declared height makes
+    // the frame a fixed box instead of hugging its content
+    this._style = style || null;
+    this._fill = !!(style && style.height);
+    this._document = createTemplateDocument({credential, renderMethod});
+
+    /**
+      * Resolves when the render signals readiness, rejects on error, timeout,
+      * or `destroy()` before completion.
+      *
+      * @type {Promise<RenderHandle>}
+      */
+    this.ready = new Promise((resolve, reject) => {
+      this._resolve = resolve;
+      this._reject = reject;
+    });
+    // [lib] avoid unhandled-rejection noise when the caller only uses events
+    this.ready.catch(() => {});
+
+    // create the outer host iframe (NOT sandboxed: it runs the trusted host
+    // controller as a same-origin `srcdoc` frame under the strict HOST_CSP)
+    const frame = document.createElement('iframe');
+    frame.setAttribute('title', 'Verifiable Credential');
+    frame.setAttribute('scrolling', 'no');
+    frame.style.cssText = 'display:block;border:0;width:100%;overflow:hidden';
+    // [spec] honor an issuer-declared box (`outputPreference.style`)
+    if(this._style && this._style.width) {
+      frame.style.width = _cssSize(this._style.width);
+    }
+    if(this._style && this._style.height) {
+      frame.style.height = _cssSize(this._style.height);
+    }
+
+    /**
+      * The outer host iframe element.
+      *
+      * @type {HTMLIFrameElement}
+      */
+    this.element = frame;
+    this._frame = frame;
+
+    this._onMessage = event => this._handleMessage(event);
+    window.addEventListener('message', this._onMessage);
+
+    // [lib] safeguard: reject if no ready/error arrives in time.
+    if(timeout > 0) {
+      this._timeoutTimer = setTimeout(() => this._fail(new Error(
+        'Timed out waiting for the HTML render method to signal readiness.')),
+      timeout);
+    }
+
+    // [lib] attach the listener before mounting so HOST_READY is never missed
+    frame.srcdoc = createHostDocument();
+    mount.appendChild(frame);
+  }
+
+  /**
+    * Subscribe to an event (`ready`, `error`, `resize`, or `loaded`).
+    *
+    * @param {string} type - The event type.
+    * @param {Function} listener - The listener.
+    *
+    * @returns {RenderHandle} This handle, for chaining.
+    */
+  on(type, listener) {
+    let set = this._listeners.get(type);
+    if(!set) {
+      set = new Set();
+      this._listeners.set(type, set);
+    }
+    set.add(listener);
+    return this;
+  }
+
+  /**
+    * Unsubscribe a previously-registered listener.
+    *
+    * @param {string} type - The event type.
+    * @param {Function} listener - The listener.
+    *
+    * @returns {RenderHandle} This handle, for chaining.
+    */
+  off(type, listener) {
+    const set = this._listeners.get(type);
+    if(set) {
+      set.delete(listener);
+    }
+    return this;
+  }
+
+  /**
+    * Tear down the render: remove the iframe and listeners, clear timers, and
+    * reject `ready` if it has not already settled.
+    *
+    * @returns {void}
+    */
+  destroy() {
+    if(this._destroyed) {
+      return;
+    }
+    this._destroyed = true;
+    this._clearTimers();
+    window.removeEventListener('message', this._onMessage);
+    if(this._frame && this._frame.parentNode) {
+      this._frame.parentNode.removeChild(this._frame);
+    }
+    if(!this._settled) {
+      this._settled = true;
+      this._reject(new Error('Renderer destroyed before completion.'));
+    }
+    this._listeners.clear();
+  }
+
+  _handleMessage(event) {
+    // only accept messages relayed by this render's host frame
+    if(this._destroyed || event.source !== this._frame.contentWindow) {
+      return;
+    }
+    const data = event.data || {};
+    switch(data.type) {
+      case MESSAGE_TYPE.HOST_READY:
+        // [lib] host controller ready: deliver the template + render options
+        this._frame.contentWindow.postMessage({
+          type: MESSAGE_TYPE.RENDER,
+          document: this._document,
+          sandbox: this._sandbox,
+          fill: this._fill
+        }, '*');
+        break;
+      case MESSAGE_TYPE.LOADED:
+        // [lib] fallback: if no explicit signal arrives within the grace
+        // period, treat `load` as success (for templates that never signal)
+        this._emit('loaded', {});
+        if(!this._waitForReady && !this._settled) {
+          this._graceTimer = setTimeout(
+            () => this._succeed(), this._signalGrace);
+        }
+        break;
+      case MESSAGE_TYPE.READY:
+        // [spec] renderMethodReady() -> resolve the render promise
+        this._succeed();
+        break;
+      case MESSAGE_TYPE.ERROR:
+        // [spec] renderMethodReady(Error) -> reject the render promise
+        this._fail(new Error(data.message || 'HTML render method failed.'));
+        break;
+      case MESSAGE_TYPE.RESIZE:
+        this._applySize(data);
+        break;
+      default:
+        break;
+    }
+  }
+
+  _applySize({width, height} = {}) {
+    // [spec] a declared `outputPreference` height wins; else hug content
+    if(!(this._style && this._style.height) &&
+      typeof height === 'number' && height > 0) {
+      this._frame.style.height = `${height}px`;
+    }
+    this._emit('resize', {width, height});
+  }
+
+  // settle as success (resolve `ready`); the first signal wins
+  _succeed() {
+    if(this._settled) {
+      return;
+    }
+    this._settled = true;
+    this._clearTimers();
+    this._emit('ready', {});
+    this._resolve(this);
+  }
+
+  // settle as failure (reject `ready`); the first signal wins
+  _fail(error) {
+    if(this._settled) {
+      return;
+    }
+    this._settled = true;
+    this._clearTimers();
+    this._emit('error', error);
+    this._reject(error);
+  }
+
+  _clearTimers() {
+    if(this._timeoutTimer) {
+      clearTimeout(this._timeoutTimer);
+      this._timeoutTimer = null;
+    }
+    if(this._graceTimer) {
+      clearTimeout(this._graceTimer);
+      this._graceTimer = null;
+    }
+  }
+
+  _emit(type, detail) {
+    const set = this._listeners.get(type);
+    if(!set) {
+      return;
+    }
+    for(const listener of set) {
+      try {
+        listener(detail);
+      } catch(e) {
+        // surface listener errors globally without breaking the emit loop
+        setTimeout(() => {
+          throw e;
+        });
+      }
+    }
+  }
+}
+
+/**
+ * Renders Verifiable Credential HTML Render Methods inside a nested, sandboxed
+ * iframe.
+ *
+ * A single instance holds default options and may be reused for many renders.
+ * Each `render()` call returns an independent {@link RenderHandle}.
+ */
+export class HtmlRenderer {
+  /**
+    * @param {object} [options] - Default options for every render.
+    * @param {number} [options.timeout] - Milliseconds to wait for readiness
+    *  before rejecting; `0` disables the timeout.
+    * @param {string} [options.sandbox] - `sandbox` attribute for the inner
+    *  template frame.
+    * @param {boolean} [options.waitForReady] - If `true`, only an explicit
+    *  `renderMethodReady()` (or error) settles the render; the template's
+    *  `load` event is not treated as success.
+    * @param {number} [options.signalGrace] - Milliseconds to wait after the
+    *  template `load` for an explicit signal before treating load as success
+    *  (ignored when `waitForReady` is `true`).
+    */
+  constructor({
+    timeout = DEFAULT_TIMEOUT,
+    sandbox = TEMPLATE_SANDBOX,
+    waitForReady = false,
+    signalGrace = DEFAULT_SIGNAL_GRACE
+  } = {}) {
+    this.timeout = timeout;
+    this.sandbox = sandbox;
+    this.waitForReady = waitForReady;
+    this.signalGrace = signalGrace;
+  }
+
+  /**
+    * Render a credential's HTML Render Method into a mount element.
+    *
+    * @param {object} options - Options.
+    * @param {Element} options.mount - The element to render into; the outer
+    *  host iframe is appended to it.
+    * @param {object} options.credential - The verifiable credential.
+    * @param {object} [options.renderMethod] - The HTML render method to use;
+    *  defaults to the first one found on the credential.
+    *
+    * @returns {RenderHandle} A handle exposing `ready`, `element`, events, and
+    *  `destroy()`.
+    */
+  render({mount, credential, renderMethod} = {}) {
+    if(!(mount && mount.nodeType === 1)) {
+      throw new TypeError('"mount" must be a DOM element.');
+    }
+    renderMethod = renderMethod || findHtmlRenderMethod({credential});
+    if(!renderMethod) {
+      throw new Error(
+        'The verifiable credential does not have an HTML render method.');
+    }
+    return new RenderHandle({
+      mount, credential, renderMethod,
+      timeout: this.timeout,
+      sandbox: this.sandbox,
+      waitForReady: this.waitForReady,
+      signalGrace: this.signalGrace,
+      style: renderMethod?.outputPreference?.style || null
+    });
+  }
+}
diff --git a/lib/index.js b/lib/index.js
new file mode 100644
index 0000000..5a4eed8
--- /dev/null
+++ b/lib/index.js
@@ -0,0 +1,15 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+
+// Public API of @digitalbazaar/vc-html-render-method.
+// primary entry point: render a credential's HTML render method into the DOM
+export {HtmlRenderer, RenderHandle} from './htmlRenderer.js';
+
+// detection + selective-disclosure helpers (usable without rendering)
+export {
+  filterCredential, findHtmlRenderMethod, findHtmlRenderMethods, supportsHtml
+} from './detect.js';
+
+// lower-level building blocks: the host/template frame document strings
+export {createHostDocument, createTemplateDocument} from './documents.js';
diff --git a/lib/pointer.js b/lib/pointer.js
new file mode 100644
index 0000000..588f660
--- /dev/null
+++ b/lib/pointer.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2026 Digital Bazaar, Inc.
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+// JSON pointer escape sequences
+// ~0 => '~'
+// ~1 => '/'
+const POINTER_ESCAPE_REGEX = /~[01]/g;
+
+export function parsePointer(pointer) {
+  // see RFC 6901: https://www.rfc-editor.org/rfc/rfc6901.html
+  const parsed = [];
+  const paths = pointer.split('/').slice(1);
+  for(const path of paths) {
+    if(!path.includes('~')) {
+      // convert any numerical path to a number as an array index
+      const index = parseInt(path, 10);
+      parsed.push(isNaN(index) ? path : index);
+    } else {
+      parsed.push(path.replace(POINTER_ESCAPE_REGEX, _unescapePointerPath));
+    }
+  }
+  return parsed;
+}
+
+function _unescapePointerPath(m) {
+  if(m === '~1') {
+    return '/';
+  }
+  if(m === '~0') {
+    return '~';
+  }
+  throw new Error(`Invalid JSON pointer escape sequence "${m}".`);
+}
diff --git a/lib/select.js b/lib/select.js
new file mode 100644
index 0000000..41e0d2d
--- /dev/null
+++ b/lib/select.js
@@ -0,0 +1,111 @@
+/*
+ * Copyright 2026 Digital Bazaar, Inc.
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import {parsePointer} from './pointer.js';
+
+// this is the standard `selectJsonLd` algorithm from:
+// https://www.w3.org/TR/vc-di-ecdsa/#selectjsonld
+export function selectJsonLd({document, pointers} = {}) {
+  if(!(document && typeof document === 'object')) {
+    throw new TypeError('"document" must be an object.');
+  }
+  if(!Array.isArray(pointers)) {
+    throw new TypeError('"pointers" must be an array.');
+  }
+  if(pointers.length === 0) {
+    // no pointers, so nothing selected
+    return null;
+  }
+
+  // track arrays to make them dense after selection
+  const arrays = [];
+
+  // perform selection
+  const selectionDocument = {'@context': structuredClone(document['@context'])};
+  _initSelection({selection: selectionDocument, source: document});
+  for(const pointer of pointers) {
+    // parse pointer into individual paths
+    const paths = parsePointer(pointer);
+    if(paths.length === 0) {
+      // whole document selected
+      return structuredClone(document);
+    }
+    _selectPaths({document, pointer, paths, selectionDocument, arrays});
+  }
+
+  // make any sparse arrays dense
+  for(const array of arrays) {
+    let i = 0;
+    while(i < array.length) {
+      if(array[i] === undefined) {
+        array.splice(i, 1);
+        continue;
+      }
+      i++;
+    }
+  }
+
+  return selectionDocument;
+}
+
+function _selectPaths({
+  document, pointer, paths, selectionDocument, arrays
+} = {}) {
+  // make pointer path in selection document
+  let parentValue = document;
+  let value = parentValue;
+  let selectedParent = selectionDocument;
+  let selectedValue = selectedParent;
+  for(const path of paths) {
+    selectedParent = selectedValue;
+    parentValue = value;
+
+    // get next document value
+    value = parentValue[path];
+    if(value === undefined) {
+      throw new TypeError(
+        `JSON pointer "${pointer}" does not match document.`);
+    }
+
+    // get next value selection
+    selectedValue = selectedParent[path];
+    if(selectedValue === undefined) {
+      if(Array.isArray(value)) {
+        selectedValue = [];
+        arrays.push(selectedValue);
+      } else {
+        selectedValue = _initSelection({source: value});
+      }
+      selectedParent[path] = selectedValue;
+    }
+  }
+
+  // path traversal complete, compute selected value
+  if(typeof value !== 'object') {
+    // literal selected
+    selectedValue = value;
+  } else if(Array.isArray(value)) {
+    // full array selected
+    selectedValue = structuredClone(value);
+  } else {
+    // object selected, blend with `id` / `type` / `@context`
+    selectedValue = {...selectedValue, ...structuredClone(value)};
+  }
+
+  // add selected value to selected parent
+  selectedParent[paths.at(-1)] = selectedValue;
+}
+
+function _initSelection({selection = {}, source}) {
+  // must include non-blank node IDs
+  if(source.id && !source.id.startsWith('_:')) {
+    selection.id = source.id;
+  }
+  // always include types
+  if(source.type) {
+    selection.type = source.type;
+  }
+  return selection;
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a8d1257
--- /dev/null
+++ b/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@digitalbazaar/vc-html-render-method",
+  "version": "0.1.0",
+  "description": "Render Verifiable Credential HTML Render Methods inside a nested, sandboxed iframe.",
+  "license": "BSD-3-Clause",
+  "type": "module",
+  "exports": "./lib/index.js",
+  "files": [
+    "lib/*"
+  ],
+  "scripts": {
+    "lint": "eslint",
+    "build": "esbuild lib/index.js --bundle --format=esm --outfile=dist/vc-html-render-method.esm.js"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@digitalbazaar/eslint-config": "^9.0.0",
+    "esbuild": "^0.28.1",
+    "eslint": "^10.8.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/digitalbazaar/vc-html-render-method"
+  },
+  "keywords": [
+    "vc",
+    "verifiable credentials",
+    "render method",
+    "html render method",
+    "iframe",
+    "sandbox"
+  ],
+  "author": {
+    "name": "Digital Bazaar, Inc.",
+    "email": "support@digitalbazaar.com",
+    "url": "https://digitalbazaar.com"
+  },
+  "bugs": {
+    "url": "https://github.com/digitalbazaar/vc-html-render-method/issues"
+  },
+  "homepage": "https://github.com/digitalbazaar/vc-html-render-method"
+}
diff --git a/test/.npmrc b/test/.npmrc
new file mode 100644
index 0000000..e9ee3cb
--- /dev/null
+++ b/test/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
\ No newline at end of file
diff --git a/test/package.json b/test/package.json
new file mode 100644
index 0000000..4e6d7a4
--- /dev/null
+++ b/test/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "vc-html-render-method-test",
+  "version": "0.0.1-0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "test": "node --preserve-symlinks test.js test --framework karma",
+    "debug": "node --preserve-symlinks test.js test --framework karma --log-level debug",
+    "coverage": "node --preserve-symlinks test.js test --framework karma-coverage",
+    "coverage-ci": "node --preserve-symlinks test.js test --framework karma-coverage-ci"
+  },
+  "dependencies": {
+    "@bedrock/core": "^6.3.0",
+    "@bedrock/express": "^8.7.0",
+    "@bedrock/https-agent": "^4.1.0",
+    "@bedrock/karma": "^7.0.1",
+    "@bedrock/server": "^5.1.0",
+    "@bedrock/test": "^9.0.0",
+    "@digitalbazaar/vc-html-render-method": "file:.."
+  }
+}
\ No newline at end of file
diff --git a/test/test.config.js b/test/test.config.js
new file mode 100644
index 0000000..1e3b7bc
--- /dev/null
+++ b/test/test.config.js
@@ -0,0 +1,24 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {config} from '@bedrock/core';
+import {fileURLToPath} from 'node:url';
+import path from 'node:path';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// run the browser specs under `web/`
+config.karma.suites['vc-html-render-method'] =
+  path.join('web', '**', '*.js');
+
+// resolve the linked library (`file:..`) and its deps for the browser bundle
+config.karma.config.webpack.resolve = {
+  modules: [
+    'node_modules',
+    path.resolve(__dirname, '..', 'node_modules'),
+    path.resolve(__dirname, 'node_modules')
+  ],
+  fallback: {
+    crypto: false
+  }
+};
diff --git a/test/test.js b/test/test.js
new file mode 100644
index 0000000..095811b
--- /dev/null
+++ b/test/test.js
@@ -0,0 +1,11 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import * as bedrock from '@bedrock/core';
+import '@bedrock/https-agent';
+import '@bedrock/express';
+import '@bedrock/server';
+import '@bedrock/test';
+import '@bedrock/karma';
+
+bedrock.start();
diff --git a/test/web/10-detect.js b/test/web/10-detect.js
new file mode 100644
index 0000000..11a6d19
--- /dev/null
+++ b/test/web/10-detect.js
@@ -0,0 +1,160 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {
+  filterCredential, findHtmlRenderMethod, findHtmlRenderMethods, supportsHtml
+} from '@digitalbazaar/vc-html-render-method';
+
+const HTML_RENDER_METHOD = {
+  type: 'TemplateRenderMethod',
+  renderSuite: 'html',
+  renderProperty: ['/issuer/name', '/credentialSubject/name'],
+  template: 'data:text/html,<h1>hi</h1>'
+};
+
+function makeCredential({renderMethod} = {}) {
+  const credential = {
+    '@context': ['https://www.w3.org/ns/credentials/v2'],
+    type: ['VerifiableCredential'],
+    issuer: {id: 'did:example:123', name: 'The Issuer'},
+    credentialSubject: {name: 'Ada', secret: 'do-not-expose'}
+  };
+  if(renderMethod) {
+    credential.renderMethod = renderMethod;
+  }
+  return credential;
+}
+
+describe('detection', function() {
+  describe('supportsHtml()', function() {
+    it('returns true for an html render method', async () => {
+      const credential = makeCredential({renderMethod: HTML_RENDER_METHOD});
+      supportsHtml({credential}).should.equal(true);
+    });
+    it('returns true when render methods are an array', async () => {
+      const credential = makeCredential({
+        renderMethod: [
+          {type: 'SvgRenderingTemplate2024', template: '<svg/>'},
+          HTML_RENDER_METHOD
+        ]
+      });
+      supportsHtml({credential}).should.equal(true);
+    });
+    it('returns false when there is no render method', async () => {
+      supportsHtml({credential: makeCredential()}).should.equal(false);
+    });
+    it('returns false for a non-html render suite', async () => {
+      const credential = makeCredential({
+        renderMethod: {type: 'SvgRenderingTemplate2024', template: '<svg/>'}
+      });
+      supportsHtml({credential}).should.equal(false);
+    });
+    it('returns false for a TemplateRenderMethod with a non-html renderSuite',
+      async () => {
+        const credential = makeCredential({
+          renderMethod: {type: 'TemplateRenderMethod', renderSuite: 'svg',
+            template: 'x'}
+        });
+        supportsHtml({credential}).should.equal(false);
+      });
+  });
+
+  describe('findHtmlRenderMethod() / findHtmlRenderMethods()', function() {
+    it('finds the first html render method', async () => {
+      const credential = makeCredential({
+        renderMethod: [
+          {type: 'SvgRenderingTemplate2024', template: '<svg/>'},
+          HTML_RENDER_METHOD
+        ]
+      });
+      const renderMethod = findHtmlRenderMethod({credential});
+      should.exist(renderMethod);
+      renderMethod.renderSuite.should.equal('html');
+    });
+    it('returns null when none match', async () => {
+      const renderMethod = findHtmlRenderMethod({credential: makeCredential()});
+      should.equal(renderMethod, null);
+    });
+    it('returns all html render methods', async () => {
+      const credential = makeCredential({
+        renderMethod: [HTML_RENDER_METHOD, HTML_RENDER_METHOD]
+      });
+      findHtmlRenderMethods({credential}).length.should.equal(2);
+    });
+  });
+
+  describe('filterCredential()', function() {
+    it('selects only the renderProperty fields', async () => {
+      const credential = makeCredential({renderMethod: HTML_RENDER_METHOD});
+      const filtered = filterCredential({
+        credential, renderMethod: HTML_RENDER_METHOD
+      });
+      filtered.issuer.name.should.equal('The Issuer');
+      filtered.credentialSubject.name.should.equal('Ada');
+      should.equal(filtered.credentialSubject.secret, undefined);
+    });
+    it('returns the whole credential when renderProperty is absent',
+      async () => {
+        const renderMethod = {
+          type: 'TemplateRenderMethod', renderSuite: 'html',
+          template: 'data:text/html,<h1>hi</h1>'
+        };
+        const credential = makeCredential({renderMethod});
+        const filtered = filterCredential({credential, renderMethod});
+        filtered.credentialSubject.secret.should.equal('do-not-expose');
+      });
+    it('selects a nested field and drops its unselected siblings',
+      async () => {
+        const credential = {
+          '@context': ['https://www.w3.org/ns/credentials/v2'],
+          type: ['VerifiableCredential'],
+          issuer: {id: 'did:example:123', name: 'The Issuer'},
+          credentialSubject: {
+            name: 'Ada',
+            secret: 'do-not-expose',
+            address: {city: 'London', zip: 'EC1', country: 'UK'}
+          }
+        };
+        const renderMethod = {
+          type: 'TemplateRenderMethod', renderSuite: 'html',
+          renderProperty: ['/credentialSubject/address/city'],
+          template: 'data:text/html,<h1>hi</h1>'
+        };
+        const filtered = filterCredential({credential, renderMethod});
+        // the selected leaf is present
+        filtered.credentialSubject.address.city.should.equal('London');
+        // unselected siblings at every level are gone
+        should.equal(filtered.credentialSubject.address.zip, undefined);
+        should.equal(filtered.credentialSubject.address.country, undefined);
+        should.equal(filtered.credentialSubject.name, undefined);
+        should.equal(filtered.credentialSubject.secret, undefined);
+        should.equal(filtered.issuer, undefined);
+        // JSON-LD type is always propagated
+        filtered.type.should.include('VerifiableCredential');
+      });
+    it('selects one array element and compacts the array', async () => {
+      const credential = {
+        '@context': ['https://www.w3.org/ns/credentials/v2'],
+        type: ['VerifiableCredential'],
+        credentialSubject: {
+          name: 'Ada',
+          degrees: [
+            {type: 'BachelorDegree', name: 'CS'},
+            {type: 'MasterDegree', name: 'Math'}
+          ]
+        }
+      };
+      const renderMethod = {
+        type: 'TemplateRenderMethod', renderSuite: 'html',
+        renderProperty: ['/credentialSubject/degrees/1/name'],
+        template: 'data:text/html,<h1>hi</h1>'
+      };
+      const filtered = filterCredential({credential, renderMethod});
+      // only the selected element survives, and the array is made dense
+      filtered.credentialSubject.degrees.length.should.equal(1);
+      filtered.credentialSubject.degrees[0].name.should.equal('Math');
+      // the element's type is carried along
+      filtered.credentialSubject.degrees[0].type.should.equal('MasterDegree');
+    });
+  });
+});
diff --git a/test/web/20-documents.js b/test/web/20-documents.js
new file mode 100644
index 0000000..1e885bb
--- /dev/null
+++ b/test/web/20-documents.js
@@ -0,0 +1,98 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {createHostDocument, createTemplateDocument}
+  from '@digitalbazaar/vc-html-render-method';
+
+const CREDENTIAL = {
+  '@context': ['https://www.w3.org/ns/credentials/v2'],
+  type: ['VerifiableCredential'],
+  issuer: {id: 'did:example:123', name: 'The Issuer'},
+  credentialSubject: {name: 'Ada', secret: 'do-not-expose'}
+};
+
+function htmlRenderMethod({template, renderProperty} = {}) {
+  const renderMethod = {
+    type: 'TemplateRenderMethod',
+    renderSuite: 'html',
+    template: template || 'data:text/html,<h1>hi</h1>'
+  };
+  if(renderProperty) {
+    renderMethod.renderProperty = renderProperty;
+  }
+  return renderMethod;
+}
+
+describe('documents', function() {
+  describe('createTemplateDocument()', function() {
+    it('applies the template-frame CSP', async () => {
+      const renderMethod = htmlRenderMethod();
+      const doc =
+        createTemplateDocument({credential: CREDENTIAL, renderMethod});
+      doc.should.include(`default-src data: 'unsafe-inline'`);
+    });
+    it('embeds the credential in an application/vc data block', async () => {
+      const renderMethod = htmlRenderMethod();
+      const doc =
+        createTemplateDocument({credential: CREDENTIAL, renderMethod});
+      doc.should.include('type="application/vc"');
+    });
+    it('embeds only the filtered credential fields', async () => {
+      const renderMethod = htmlRenderMethod({renderProperty: ['/issuer/name']});
+      const doc =
+        createTemplateDocument({credential: CREDENTIAL, renderMethod});
+      doc.should.include('The Issuer');
+      doc.should.not.include('do-not-expose');
+    });
+    it('includes the template markup in the body', async () => {
+      const renderMethod = htmlRenderMethod({
+        template: 'data:text/html,<h1>PLAIN</h1>'
+      });
+      const doc =
+        createTemplateDocument({credential: CREDENTIAL, renderMethod});
+      doc.should.include('<h1>PLAIN</h1>');
+    });
+    it('decodes a base64 data: URL template', async () => {
+      const template = 'data:text/html;base64,' + btoa('<h1>B64</h1>');
+      const renderMethod = htmlRenderMethod({template});
+      const doc =
+        createTemplateDocument({credential: CREDENTIAL, renderMethod});
+      doc.should.include('<h1>B64</h1>');
+    });
+    it('treats a non-data: string as raw HTML', async () => {
+      const renderMethod = htmlRenderMethod({template: '<h1>RAW</h1>'});
+      const doc =
+        createTemplateDocument({credential: CREDENTIAL, renderMethod});
+      doc.should.include('<h1>RAW</h1>');
+    });
+    it('neutralizes `</script>` in credential values', async () => {
+      const credential = {
+        ...CREDENTIAL,
+        credentialSubject: {name: 'Ada', evil: '</script><img src=x>'}
+      };
+      // no renderProperty -> the whole credential is embedded
+      const renderMethod = htmlRenderMethod();
+      const doc = createTemplateDocument({credential, renderMethod});
+      doc.should.include('\\u003c/script');
+      doc.should.not.include('<img src=x>');
+    });
+    it('throws when the template is not a string', async () => {
+      const fn = () => createTemplateDocument({
+        credential: CREDENTIAL,
+        renderMethod: {type: 'TemplateRenderMethod', renderSuite: 'html'}
+      });
+      fn.should.throw(TypeError);
+    });
+  });
+
+  describe('createHostDocument()', function() {
+    it('applies the host-frame CSP with frame-src none', async () => {
+      const doc = createHostDocument();
+      doc.should.include(`frame-src 'none'`);
+      doc.should.include(`default-src 'none'`);
+    });
+    it('sets up a MessageChannel in the controller', async () => {
+      createHostDocument().should.include('MessageChannel');
+    });
+  });
+});
diff --git a/test/web/30-render.js b/test/web/30-render.js
new file mode 100644
index 0000000..b233778
--- /dev/null
+++ b/test/web/30-render.js
@@ -0,0 +1,148 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {HtmlRenderer} from '@digitalbazaar/vc-html-render-method';
+
+const READY_TEMPLATE =
+  'data:text/html,<h1 id="card">CARD</h1>' +
+  '<script>window.renderMethodReady()</script>';
+
+function makeCredential({
+  template = READY_TEMPLATE, renderProperty, outputPreference
+} = {}) {
+  const renderMethod = {
+    type: 'TemplateRenderMethod', renderSuite: 'html', template
+  };
+  if(renderProperty) {
+    renderMethod.renderProperty = renderProperty;
+  }
+  if(outputPreference) {
+    renderMethod.outputPreference = outputPreference;
+  }
+  return {
+    '@context': ['https://www.w3.org/ns/credentials/v2'],
+    type: ['VerifiableCredential'],
+    issuer: {name: 'The Issuer'},
+    credentialSubject: {name: 'Ada'},
+    renderMethod
+  };
+}
+
+describe('HtmlRenderer', function() {
+  let mount;
+  let handle;
+
+  beforeEach(() => {
+    mount = document.createElement('div');
+    document.body.appendChild(mount);
+  });
+
+  afterEach(() => {
+    if(handle) {
+      handle.destroy();
+      handle = null;
+    }
+    if(mount && mount.parentNode) {
+      mount.parentNode.removeChild(mount);
+    }
+    mount = null;
+  });
+
+  it('resolves ready and mounts an iframe', async () => {
+    handle = new HtmlRenderer().render({mount, credential: makeCredential()});
+    const result = await handle.ready;
+    result.should.equal(handle);
+    handle.element.tagName.should.equal('IFRAME');
+    mount.contains(handle.element).should.equal(true);
+  });
+
+  it('nests a sandboxed template frame', async () => {
+    handle = new HtmlRenderer().render({mount, credential: makeCredential()});
+    await handle.ready;
+    // the outer host frame is same-origin; read into it for the inner frame
+    const innerFrame = handle.element.contentDocument.querySelector('iframe');
+    should.exist(innerFrame);
+    innerFrame.getAttribute('sandbox').should.equal('allow-scripts');
+  });
+
+  it('auto-sizes the frame to its content', async () => {
+    handle = new HtmlRenderer().render({mount, credential: makeCredential()});
+    await handle.ready;
+    // allow the resize message to be applied
+    await new Promise(resolve => setTimeout(resolve, 300));
+    const height = parseInt(handle.element.style.height || '0', 10);
+    height.should.be.above(0);
+  });
+
+  it('honors outputPreference.style as a fixed box', async () => {
+    const credential = makeCredential({
+      outputPreference: {style: {width: '640px', height: '480px'}}
+    });
+    handle = new HtmlRenderer().render({mount, credential});
+    await handle.ready;
+    handle.element.style.width.should.equal('640px');
+    handle.element.style.height.should.equal('480px');
+  });
+
+  it('emits a resize event', async () => {
+    handle = new HtmlRenderer().render({mount, credential: makeCredential()});
+    let resized = false;
+    handle.on('resize', () => {
+      resized = true;
+    });
+    await handle.ready;
+    await new Promise(resolve => setTimeout(resolve, 300));
+    resized.should.equal(true);
+  });
+
+  it('rejects when the template signals an error', async () => {
+    const template =
+      'data:text/html,<script>' +
+      'window.renderMethodReady(new Error("boom"))</script>';
+    const credential = makeCredential({template});
+    handle = new HtmlRenderer().render({mount, credential});
+    let error;
+    try {
+      await handle.ready;
+    } catch(e) {
+      error = e;
+    }
+    should.exist(error);
+    error.message.should.equal('boom');
+  });
+
+  it('throws when the credential has no html render method', async () => {
+    const credential = {
+      '@context': ['https://www.w3.org/ns/credentials/v2'],
+      type: ['VerifiableCredential'],
+      credentialSubject: {name: 'Ada'}
+    };
+    let error;
+    try {
+      new HtmlRenderer().render({mount, credential});
+    } catch(e) {
+      error = e;
+    }
+    should.exist(error);
+  });
+
+  it('throws when mount is not an element', async () => {
+    let error;
+    try {
+      new HtmlRenderer().render({mount: null, credential: makeCredential()});
+    } catch(e) {
+      error = e;
+    }
+    should.exist(error);
+    error.should.be.instanceof(TypeError);
+  });
+
+  it('destroy() removes the iframe', async () => {
+    handle = new HtmlRenderer().render({mount, credential: makeCredential()});
+    await handle.ready;
+    handle.destroy();
+    should.not.exist(mount.querySelector('iframe'));
+    // already destroyed; prevent afterEach from destroying again
+    handle = null;
+  });
+});
diff --git a/test/web/40-isolation.js b/test/web/40-isolation.js
new file mode 100644
index 0000000..8f78203
--- /dev/null
+++ b/test/web/40-isolation.js
@@ -0,0 +1,96 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {HtmlRenderer} from '@digitalbazaar/vc-html-render-method';
+
+// a template that probes its own isolation, then reports to `window.top`:
+//  - can it read `window.top` / the parent host frame? (must not)
+//  - do `fetch` and `<iframe src>` trip the template-frame CSP? (must)
+const ISOLATION_TEMPLATE = 'data:text/html,' + `
+<script>
+window.__violations = [];
+document.addEventListener('securitypolicyviolation', function(e) {
+  window.__violations.push(e.violatedDirective);
+});
+</script>
+<script>
+(function() {
+  var d = {reachedTop: false, reachedParent: false};
+  try { void window.top.location.href; d.reachedTop = true; } catch(e) {}
+  try { void window.parent.document; d.reachedParent = true; } catch(e) {}
+  fetch('https://example.com/x').catch(function() {});
+  var f = document.createElement('iframe');
+  f.src = 'https://example.com/';
+  document.body.appendChild(f);
+  setTimeout(function() {
+    d.violations = window.__violations.slice();
+    window.top.postMessage({__iso: d}, '*');
+    window.renderMethodReady();
+  }, 100);
+})();
+</script>`;
+
+const ISOLATION_CREDENTIAL = {
+  '@context': ['https://www.w3.org/ns/credentials/v2'],
+  type: ['VerifiableCredential'],
+  credentialSubject: {name: 'Ada'},
+  renderMethod: {
+    type: 'TemplateRenderMethod', renderSuite: 'html',
+    template: ISOLATION_TEMPLATE
+  }
+};
+
+describe('isolation', function() {
+  let mount;
+  let handle;
+  let diag;
+
+  before(async function() {
+    mount = document.createElement('div');
+    document.body.appendChild(mount);
+    // render, and resolve once the template reports its probe results
+    diag = await new Promise(resolve => {
+      // the template posts to `window.top`; under karma the spec runs in an
+      // iframe, so listen on the top window (same-origin) rather than `window`
+      function onMessage(event) {
+        if(event.data && event.data.__iso) {
+          window.top.removeEventListener('message', onMessage);
+          // clone into this realm: the payload comes from `window.top`, so its
+          // arrays lack this realm's chai `should` augmentation otherwise
+          resolve(JSON.parse(JSON.stringify(event.data.__iso)));
+        }
+      }
+      window.top.addEventListener('message', onMessage);
+      handle = new HtmlRenderer().render({
+        mount, credential: ISOLATION_CREDENTIAL
+      });
+    });
+  });
+
+  after(function() {
+    if(handle) {
+      handle.destroy();
+      handle = null;
+    }
+    if(mount && mount.parentNode) {
+      mount.parentNode.removeChild(mount);
+    }
+    mount = null;
+  });
+
+  it('cannot read window.top', function() {
+    diag.reachedTop.should.equal(false);
+  });
+
+  it('cannot read the parent host frame', function() {
+    diag.reachedParent.should.equal(false);
+  });
+
+  it('is blocked from network fetch by CSP', function() {
+    diag.violations.should.include('connect-src');
+  });
+
+  it('is blocked from framing external content by CSP', function() {
+    diag.violations.should.include('frame-src');
+  });
+});
diff --git a/test/web/50-handshake.js b/test/web/50-handshake.js
new file mode 100644
index 0000000..26e78b5
--- /dev/null
+++ b/test/web/50-handshake.js
@@ -0,0 +1,89 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {HtmlRenderer} from '@digitalbazaar/vc-html-render-method';
+
+// never calls renderMethodReady()
+const NO_SIGNAL_TEMPLATE = 'data:text/html,<h1>no signal</h1>';
+// signals synchronously during parse (before the port is transferred)
+const SYNC_READY_TEMPLATE =
+  'data:text/html,<h1>x</h1>' +
+  '<script>window.renderMethodReady()</script>';
+// signals after a short delay
+const DELAYED_READY_TEMPLATE =
+  'data:text/html,<script>' +
+  'setTimeout(function() { window.renderMethodReady(); }, 100)</script>';
+
+function makeCredential({template}) {
+  return {
+    '@context': ['https://www.w3.org/ns/credentials/v2'],
+    type: ['VerifiableCredential'],
+    credentialSubject: {name: 'Ada'},
+    renderMethod: {
+      type: 'TemplateRenderMethod', renderSuite: 'html', template
+    }
+  };
+}
+
+describe('handshake', function() {
+  let mount;
+  let handle;
+
+  beforeEach(() => {
+    mount = document.createElement('div');
+    document.body.appendChild(mount);
+  });
+
+  afterEach(() => {
+    if(handle) {
+      handle.destroy();
+      handle = null;
+    }
+    if(mount && mount.parentNode) {
+      mount.parentNode.removeChild(mount);
+    }
+    mount = null;
+  });
+
+  it('resolves via the load fallback when the template does not signal',
+    async () => {
+      const credential = makeCredential({template: NO_SIGNAL_TEMPLATE});
+      handle = new HtmlRenderer().render({mount, credential});
+      const result = await handle.ready;
+      result.should.equal(handle);
+    });
+
+  it('buffers a synchronous renderMethodReady() before the port arrives',
+    async () => {
+      const credential = makeCredential({template: SYNC_READY_TEMPLATE});
+      // waitForReady disables the load fallback, so resolution can only come
+      // from the pre-port signal being buffered and later flushed
+      handle = new HtmlRenderer({waitForReady: true, timeout: 2000})
+        .render({mount, credential});
+      const result = await handle.ready;
+      result.should.equal(handle);
+    });
+
+  it('rejects on timeout when waitForReady and no signal arrives',
+    async () => {
+      const credential = makeCredential({template: NO_SIGNAL_TEMPLATE});
+      handle = new HtmlRenderer({waitForReady: true, timeout: 500})
+        .render({mount, credential});
+      let error;
+      try {
+        await handle.ready;
+      } catch(e) {
+        error = e;
+      }
+      should.exist(error);
+      error.message.should.include('Timed out');
+    });
+
+  it('resolves under waitForReady once the template signals', async () => {
+    const credential = makeCredential({template: DELAYED_READY_TEMPLATE});
+    handle = new HtmlRenderer({waitForReady: true, timeout: 2000})
+      .render({mount, credential});
+    const result = await handle.ready;
+    result.should.equal(handle);
+  });
+});
diff --git a/test/web/60-lifecycle.js b/test/web/60-lifecycle.js
new file mode 100644
index 0000000..550c9b8
--- /dev/null
+++ b/test/web/60-lifecycle.js
@@ -0,0 +1,103 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {HtmlRenderer} from '@digitalbazaar/vc-html-render-method';
+
+const READY_TEMPLATE =
+  'data:text/html,<h1>x</h1>' +
+  '<script>window.renderMethodReady()</script>';
+
+function makeCredential({template = READY_TEMPLATE} = {}) {
+  return {
+    '@context': ['https://www.w3.org/ns/credentials/v2'],
+    type: ['VerifiableCredential'],
+    credentialSubject: {name: 'Ada'},
+    renderMethod: {
+      type: 'TemplateRenderMethod', renderSuite: 'html', template
+    }
+  };
+}
+
+describe('lifecycle', function() {
+  let mount;
+  let handle;
+
+  beforeEach(() => {
+    mount = document.createElement('div');
+    document.body.appendChild(mount);
+  });
+
+  afterEach(() => {
+    if(handle) {
+      handle.destroy();
+      handle = null;
+    }
+    if(mount && mount.parentNode) {
+      mount.parentNode.removeChild(mount);
+    }
+    mount = null;
+  });
+
+  it('emits a loaded event', async () => {
+    handle = new HtmlRenderer().render({mount, credential: makeCredential()});
+    let loaded = false;
+    handle.on('loaded', () => {
+      loaded = true;
+    });
+    await handle.ready;
+    await new Promise(resolve => setTimeout(resolve, 100));
+    loaded.should.equal(true);
+  });
+
+  it('off() stops delivering an event', async () => {
+    handle = new HtmlRenderer().render({mount, credential: makeCredential()});
+    let removed = 0;
+    let kept = 0;
+    const onRemoved = () => {
+      removed++;
+    };
+    handle.on('resize', onRemoved);
+    handle.on('resize', () => {
+      kept++;
+    });
+    handle.off('resize', onRemoved);
+    await handle.ready;
+    await new Promise(resolve => setTimeout(resolve, 300));
+    removed.should.equal(0);
+    kept.should.be.above(0);
+  });
+
+  it('reuses one renderer instance for multiple renders', async () => {
+    const renderer = new HtmlRenderer();
+    const mountA = document.createElement('div');
+    const mountB = document.createElement('div');
+    document.body.appendChild(mountA);
+    document.body.appendChild(mountB);
+    const a = renderer.render({mount: mountA, credential: makeCredential()});
+    const b = renderer.render({mount: mountB, credential: makeCredential()});
+    await Promise.all([a.ready, b.ready]);
+    a.should.not.equal(b);
+    should.exist(mountA.querySelector('iframe'));
+    should.exist(mountB.querySelector('iframe'));
+    a.destroy();
+    b.destroy();
+    mountA.remove();
+    mountB.remove();
+  });
+
+  it('rejects ready when destroyed before it settles', async () => {
+    // never signals, and waitForReady disables the load fallback
+    const credential = makeCredential({template: 'data:text/html,<h1>x</h1>'});
+    handle = new HtmlRenderer({waitForReady: true, timeout: 5000})
+      .render({mount, credential});
+    let error;
+    const settled = handle.ready.catch(e => {
+      error = e;
+    });
+    handle.destroy();
+    await settled;
+    should.exist(error);
+    error.message.should.include('destroyed');
+    handle = null;
+  });
+});