ComponentsEmbed blocks

content@texuli/blocksagent-emittablecontent

Embed blocks

blocks-embed

Validated link previews (URL policy) and embed-app shells. Texuli never runs app JSON; hosts mount via mountEmbed with a sandboxed iframe contract.

Live examples

Embed blocks example

Embed blocks example

Loading demo…

Props

Public props for Embed blocks
NameKindRequiredDefaultDescription
blockobjectyes—Untrusted block data validated by the component before rendering.
mountEmbedeventno—Host runtime after user Start. Prefer createSandboxedEmbedMount (sandbox without allow-same-origin, referrerpolicy=no-referrer, HTTPS allowlist). Host CSP frame-src + postMessage origin checks required; never relax sandbox or inject HTML from app data.
labelsobjectno——
oninvalideventno—Host-provided callback; omit when no host behavior is needed.

Keyboard

Keyboard behavior for Embed blocks
KeyAction
aStart control is a real button; nothing loads until activation.

Accessibility

  • Start control is a real button; nothing loads until activation.
  • Iframe title (when used) names the embedded app; host must keep keyboard access inside the frame.
  • Link previews use rel=noopener noreferrer on new-window links.

Evidence for blocks-embed

Latest committed gates for blocks-embed (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

@texuli/blocks/blocks-embed · budget 20.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Show a deferred mini-app shell where the host mounts after user Start.
  • Show an offline link preview with HTTPS-only href (URL policy).

Don’t use when

Prefer another component

  • Application navigation, account controls or mutations.
  • Running untrusted app JSON with innerHTML, eval, or an unsandboxed iframe.
  • Relaxing iframe sandbox (especially adding allow-same-origin) or skipping CSP frame-src / postMessage origin checks.