I built a zero-dependency, TypeScript-first alternative to Zoid for cross-domain iframes

Description and use

ForgeFrame simplifies cross-domain iframe integration with type-safe APIs, origin control, and zero runtime dependencies.

Problem

Embedding cross-domain content (payment forms, login widgets, micro-frontends) is painful due to postMessage, origin checks, handshakes, and drifting message types.

Outcome

ForgeFrame simplifies cross-domain iframe integration by eliminating manual postMessage handling, ensuring type safety, and providing origin security out of the box.

Workflow

• Define component once with create({tag, url, dimensions, props}) in a shared module.
• Render component in consumer app, passing props including callbacks.
• Initialize host with initHost(component, {consumerOrigins}) in the iframe app.
• Host reads props, performs UI, calls callbacks, and can expose typed methods back to consumer.
• Both sides benefit from TypeScript compile-time checks and typed lifecycle events.
• Use npm install forgeframe to add the library.
• Deploy in production (e.g., Tyro Health).

Evidence

Zoid sorted a lot of this out ages ago, but I wanted something a bit more modern. I wanted types that actually carry across the iframe boundary, zero dependencies and a proper ESM build.

Source

Types come straight from the schema, so if you forget a required prop it just won't compile.

Source

Origin allow-listing is built in and required, so you can't accidentally leave the door open.

Source

It works with iframes or popups, and you get typed lifecycle events like rendered, close and error.

Source