Skip to content

drenther/izod

Repository files navigation

izod

Bundle Size npm version types

Type-safe iframe communication using the Standard Schema interface for runtime validation.

Works with any Standard Schema compliant validator — zod, valibot, arktype, and more.

Packages

Package Description
@izod/core Iframe communication engine — no framework dependency
@izod/react React hooks wrapper around @izod/core

Installation

# Core only
pnpm add @izod/core

# With React hooks
pnpm add @izod/core @izod/react

You also need a Standard Schema compliant validator as a peer:

pnpm add zod       # or valibot, arktype, etc.

Quick Start

Define shared event schemas

// events.ts
import { z } from 'zod';
import type { EventMap } from '@izod/core';

export const parentEvents = {
  askQuestion: z.object({ question: z.string() }),
  shout: z.object({ message: z.string() }),
} as const satisfies EventMap;

export const childEvents = {
  answerQuestion: z.object({ answer: z.string() }),
  whisper: z.object({ message: z.string() }),
} as const satisfies EventMap;

Parent page (creates the iframe)

import { createChild } from '@izod/core';
import { parentEvents, childEvents } from './events';

const child = createChild({
  container: document.getElementById('app'),
  url: 'https://child.example.com',
  inboundEvents: childEvents,
  outboundEvents: parentEvents,
});

child.on('whisper', (data) => {
  console.log(`Child whispered: ${data.message}`);
});

const api = await child.executeHandshake();
api.emit('shout', { message: 'Hello from parent' });

Child page (inside the iframe)

import { connectToParent } from '@izod/core';
import { parentEvents, childEvents } from './events';

const parent = connectToParent({
  inboundEvents: parentEvents,
  outboundEvents: childEvents,
});

parent.on('shout', (data) => {
  console.log(`Parent shouted: ${data.message}`);
});

const api = await parent.executeHandshake();
api.emit('whisper', { message: 'Hi from child' });

See individual package READMEs for full API documentation:

Examples

The examples/ directory contains a working Astro demo app with both core and React examples.

pnpm install
cd examples/astro-demo
pnpm dev

Standard Schema Compatibility

Any validator implementing the Standard Schema spec works out of the box. Schemas must validate synchronously — async validators will throw a TypeError.

Validator Supported
zod (v3.24+, v4) Yes
valibot Yes
arktype Yes

Development

pnpm install
pnpm run build        # build all packages
pnpm run test         # run tests
pnpm run test:coverage # run tests with coverage
pnpm run typecheck    # type-check
pnpm run lint         # oxlint
pnpm run format:check # check formatting

Prior Art

License

MIT

About

Type-safe iframe communication engine using the Standard Schema interface for runtime validation.

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors