- Category
- Developer Tools
- Rank
- No. 1383Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- millionco
- GitHub
- 406 stars
- Date
About
Package any web component as a self-contained, isolated widget that embeds anywhere with one script tag.
What it does
Isolet wraps browser UI code in a small lifecycle with mounting, prop updates, and cleanup. It defaults to shadow DOM style isolation, while its build tooling converts CSS and local assets into portable bundle content.
Why it's ranked here
Isolet has a focused design and unusually broad delivery options for an experimental project. Framework-neutral mounting, custom elements, three isolation modes, and multiple module formats make it practical. The explicit stability warning and update cleanup behavior still warrant caution.
What's good
The core does not depend on a UI framework, and adapters cover React, Solid, Preact, Vue, Svelte, and vanilla JavaScript. CSS imports become strings, local asset references become data URIs, and injected styles can inherit a detected content-security-policy nonce.
Tradeoffs
The project explicitly warns that its APIs may change without notice. Prop updates invoke mounting logic again without first running the previous cleanup, so adapters or components must tolerate repeated renders. Inlining fonts, images, audio, or video can also produce large bundles.
How to use it well
Use Isolet for browser widgets that must cross framework or host-page boundaries while keeping styling controlled. Start with shadow DOM, expose deliberate props, and test repeated updates and teardown. It does not replace application hosting, server APIs, or a full component framework.
Technical notes+
packages/isolet/src/create-isolet.ts merges partial props and invokes the configured mount callback on updates, but only invokes the stored cleanup during unmount. packages/isolet/src/define-element.ts does tear down before every attribute-driven render. packages/isolet/src/mount-container.ts implements shadow DOM, scoped, and none modes, including host attributes, host styles, and z-index. packages/isolet/plugins/plugins.ts transforms CSS imports, inlines supported assets, and resolves configured style paths. packages/isolet/vite.config.ts emits an IIFE plus CJS and ESM library entries, declarations for non-IIFE entries, Node-targeted plugins, and an ESM CLI. packages/isolet/vitest.config.ts selects happy-dom for tests.
Observed
- License
- MIT
- Primary language
- TypeScript
- Installation
- Available through npm as isolet-js
- Interfaces
- JavaScript and TypeScript library, custom elements, and an init/build CLI
- Bundle formats
- IIFE, ESM, and CommonJS
- Platform surface
- Browser runtime with Node-based CLI and build plugins
- Framework support
- Adapters are built for React, Solid, Preact, Vue, Svelte, and vanilla JavaScript
Read from README.md, package.json, packages/isolet/vite.config.ts, packages/isolet/vitest.config.ts, packages/isolet/cli/cli.ts, packages/isolet/src/index.ts, packages/isolet/src/types.ts, packages/isolet/src/runtime.ts, packages/isolet/plugins/plugins.ts, packages/isolet/src/create-isolet.ts, packages/isolet/src/define-config.ts, packages/isolet/src/inject-styles.ts, packages/isolet/src/define-element.ts, packages/isolet/src/mount-container.ts, packages/isolet/src/detect-csp-nonce.ts.
What it can do
Package web component as isolated widget
Web component code → Self-contained widget
Generate embed script tag
Packaged widget → Single script tag
Isolate widget dependencies
Web component with dependencies → Standalone widget with bundled dependencies
Enable cross-site widget embedding
Isolated widget and target website → Embedded widget on external site
Encapsulate widget styling
Web component with CSS → Widget with isolated styles
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.