--- title: How to make postMessage type-safe in under 350... description: typed-channel is a small library that makes postMessage type-safe in around 350 bytes. You define message names and payloads once in a type map, and TypeScript... canonical: https://daily.dev/posts/how-to-make-postmessage-type-safe-in-under-350-bytes-martian-chronicles-evil-martians-team-blog-relvgempt twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to make postMessage type-safe in under 350 bytes—Martian Chronicles, Evil Martians’ team blog | daily.dev og:description: typed-channel is a small library that makes postMessage type-safe in around 350 bytes. You define message names and payloads once in a type map, and TypeScript... og:url: https://daily.dev/posts/how-to-make-postmessage-type-safe-in-under-350-bytes-martian-chronicles-evil-martians-team-blog-relvgempt og:image: https://api.daily.dev/og/posts/relVGEMpT.png og:image:alt: How to make postMessage type-safe in under 350 bytes—Martian Chronicles, Evil Martians’ team blog og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to make postMessage type-safe in under 350 bytes—Martian Chronicles, Evil Martians’ team blog **[Martian Chronicles](https://daily.dev/sources/evilmartians)** · 12 min read · 1 upvotes · 0 comments ## Summary typed-channel is a small library that makes postMessage type-safe in around 350 bytes. You define message names and payloads once in a type map, and TypeScript checks both the sending and receiving sides. The same API works across Web Workers, iframes, BroadcastChannel, tabs, and in-page event buses, with transports as pluggable adapters. Version 0.11 adds createTypedRpcChannel for request/response calls, supporting AbortSignal-based cancellation and timeouts so a canceled request also stops the handler's work on the other side. Core messaging weighs 271 bytes minified and brotli-compressed, while the RPC channel adds up to 1 kB total. Evil Martians built it while developing Harmonizer, a color palette generator that uses it across a worker, an event bus, and a Figma plugin. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I make postMessage communication between a page and a Web Worker type-safe in TypeScript? Use a library like typed-channel, which wraps postMessage with typed message maps so TypeScript checks message names and payloads on both sides. You define a type map for each direction's messages once, then call typed emit and on functions instead of raw postMessage and a switch on event.data.type. The core library is about 271 bytes minified and brotli-compressed, with zero dependencies. _daily.dev surfaces practical patterns like this for developers wiring up typed cross-context messaging._ ### How do I cancel a pending postMessage request/response call and stop the worker from continuing the computation? Pass an AbortSignal to the request call, for example using AbortSignal.timeout(5000) or AbortSignal.any combined with a manual controller. Aborting the signal rejects the caller's promise and sends an abort message to the other side, which aborts the signal the handler received, so the worker stops the work instead of finishing it for nobody. This is how typed-channel's createTypedRpcChannel (added in version 0.11) implements cancellation instead of a plain timeout option. _Developers building cancelable request/response messaging can track patterns like this on daily.dev._ ### How big is the typed-channel library for type-safe postMessage messaging? The core messaging part is 271 bytes minified and brotli-compressed, or 341 bytes including the postMessage transport, with zero dependencies. The optional RPC channel for request/response calls, added in version 0.11 via createTypedRpcChannel, is about 1 kB total since it includes cancellation and error handling on top of messaging. _Teams weighing bundle size against typed messaging features can follow library updates like this on daily.dev._ ## Similar posts on daily.dev - [Stop using the localStorage hack to sync browser tabs. BroadcastChannel does it natively.](https://daily.dev/posts/stop-using-the-localstorage-hack-to-sync-browser-tabs-broadcastchannel-does-it-natively--ozaqoxhny) · DEV · 76 upvotes · 4 comments - [Issue \#807: The up to 8x faster Rust port of TypeScript — JavaScript Weekly](https://daily.dev/posts/issue-807-the-up-to-8x-faster-rust-port-of-typescript-javascript-weekly-ddwszb0no) · JavaScript Weekly · 0 upvotes · 0 comments - [Testing an iframe’s postMessage Handler – Master.dev Blog](https://daily.dev/posts/testing-an-iframe-s-postmessage-handler-master-dev-blog-qw8ifr8ld) · Frontend Masters · 2 upvotes · 0 comments - [From React to native web with nanotags: a migration that saved 100 KB—Martian Chronicles, Evil Martians’ team blog](https://daily.dev/posts/from-react-to-native-web-with-nanotags-a-migration-that-saved-100-kb-martian-chronicles-evil-marti-u8vasuj56) · Martian Chronicles · 19 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#typescript](https://daily.dev/tags/typescript) [View this post on daily.dev](https://daily.dev/posts/how-to-make-postmessage-type-safe-in-under-350-bytes-martian-chronicles-evil-martians-team-blog-relvgempt) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How to make postMessage type-safe in under 350 bytes—Martian Chronicles, Evil Martians’ team blog","url":"https://daily.dev/posts/how-to-make-postmessage-type-safe-in-under-350-bytes-martian-chronicles-evil-martians-team-blog-relvgempt","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-make-postmessage-type-safe-in-under-350-bytes-martian-chronicles-evil-martians-team-blog-relvgempt"},"datePublished":"2026-10-28T14:25:37.290Z","dateModified":"2026-10-28T14:58:30.261Z","description":"typed-channel is a small library that makes postMessage type-safe in around 350 bytes. You define message names and payloads once in a type map, and TypeScript...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6fa5498d3555fe5b53d97a62154a0303?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6fa5498d3555fe5b53d97a62154a0303?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Martian Chronicles","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Martian Chronicles","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/6334c9de96a7414ebbf4b7667ba572c5","url":"https://daily.dev/sources/evilmartians"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-to-make-postmessage-type-safe-in-under-350-bytes-martian-chronicles-evil-martians-team-blog-relvgempt","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,javascript,typescript","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Martian Chronicles","item":"https://daily.dev/sources/evilmartians"},{"@type":"ListItem","position":3,"name":"How to make postMessage type-safe in under 350 bytes—Martian Chronicles, Evil Martians’ team blog"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-to-make-postmessage-type-safe-in-under-350-bytes-martian-chronicles-evil-martians-team-blog-relvgempt#faq","mainEntity":[{"@type":"Question","name":"How can I make postMessage communication between a page and a Web Worker type-safe in TypeScript?","acceptedAnswer":{"@type":"Answer","text":"Use a library like typed-channel, which wraps postMessage with typed message maps so TypeScript checks message names and payloads on both sides. You define a type map for each direction's messages once, then call typed emit and on functions instead of raw postMessage and a switch on event.data.type. The core library is about 271 bytes minified and brotli-compressed, with zero dependencies. daily.dev surfaces practical patterns like this for developers wiring up typed cross-context messaging."}},{"@type":"Question","name":"How do I cancel a pending postMessage request/response call and stop the worker from continuing the computation?","acceptedAnswer":{"@type":"Answer","text":"Pass an AbortSignal to the request call, for example using AbortSignal.timeout(5000) or AbortSignal.any combined with a manual controller. Aborting the signal rejects the caller's promise and sends an abort message to the other side, which aborts the signal the handler received, so the worker stops the work instead of finishing it for nobody. This is how typed-channel's createTypedRpcChannel (added in version 0.11) implements cancellation instead of a plain timeout option. Developers building cancelable request/response messaging can track patterns like this on daily.dev."}},{"@type":"Question","name":"How big is the typed-channel library for type-safe postMessage messaging?","acceptedAnswer":{"@type":"Answer","text":"The core messaging part is 271 bytes minified and brotli-compressed, or 341 bytes including the postMessage transport, with zero dependencies. The optional RPC channel for request/response calls, added in version 0.11 via createTypedRpcChannel, is about 1 kB total since it includes cancellation and error handling on top of messaging. Teams weighing bundle size against typed messaging features can follow library updates like this on daily.dev."}}]} ```