A 1.3kB library for embedding Preact/React widgets onto third-party websites with reactive props and flexible mounting.
Preact Island is a lightweight JavaScript library that allows developers to embed Preact or React components as interactive widgets onto any third-party website. It solves the problem of integrating custom UI elements—like Shopify widgets, email sign-up forms, or comment sections—into environments where you lack full control over the host page. The library provides a React-style workflow with hooks, reactive props, and flexible mounting options while keeping the bundle size under 5kB.
Frontend developers building embeddable widgets for platforms like Shopify, CMS websites, or any third-party web pages where custom components need to be injected. It's also suitable for teams creating micro-frontends or portable UI snippets.
Developers choose Preact Island for its minimal footprint, React-like developer experience, and flexibility in handling prop updates and mounting strategies. Unlike alternatives, it offers reactive props, multiple rendering methods, and seamless integration without global namespace pollution, making it ideal for lightweight, scalable widget embedding.
🏝 Create your own slice of paradise on any website.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
At less than 1.3kB minified, it adds negligible overhead, making it ideal for performance-sensitive embeds where every kilobyte counts, as shown in the bundle size comparisons.
Components automatically rerender when props change from multiple sources like element attributes or script tags, providing a dynamic experience without manual updates, demonstrated in the reactive props examples.
Supports rendering by CSS selector, inline placement, or via script attributes, offering developers versatile ways to integrate widgets into existing pages, as detailed in the API options.
Works seamlessly with React through preact/compat, allowing reuse of existing React components and hooks while reducing bundle size by up to 15x, per the README's bundle analysis.
Web component support is labeled experimental, meaning it's not stable for production and may lack features or have bugs, limiting its use in standards-based environments.
Offers no built-in CSS scoping, forcing developers to manually prevent style leaks with prefixes or modules, which is error-prone on third-party sites and cautioned against in the styling section.
Client-only rendering means components can't be pre-rendered on the server, hindering SEO and initial load performance for content-heavy widgets.