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

说明与用途

ForgeFrame 通过类型安全的 API、来源控制和零运行时依赖，简化跨域 iframe 集成。

问题

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

结果

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

工作流

• 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).

证据

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.

来源

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

来源

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

来源

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

来源