Build an Embeddable Widget using Preact and the Shadow DOM

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • React

    The library for web and native user interfaces.

  • As we added 3rd party libraries, our bundle size grew. We found that Preact was a good solution to this problem. It provides all the same features as React, but in a much smaller package. You can compare the unpacked size of Preact to a combined React and React-DOM and see a significant difference!

  • Preact

    ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

  • As we added 3rd party libraries, our bundle size grew. We found that Preact was a good solution to this problem. It provides all the same features as React, but in a much smaller package. You can compare the unpacked size of Preact to a combined React and React-DOM and see a significant difference!

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

  • As our application grew, managing our styles became cumbersome and our team wanted to find another solution. At CompanyCam, our designers enjoy designing our products with styled-components. With styled-components, a generated stylesheet is injected at the end of the head of the document. Due to our Shadow DOM layer, this won't work without some configuration.

  • preact-shadow-dom-starter

    Boilerplate setup for encapsulatated applications using Webpack, Babel, Preact, Styled Components, and the Shadow DOM API

  • Now, let's jump into some code! Feel free to clone this starter repo if a working example is helpful for you.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Preact vs React: A Comparative Guide

    2 projects | dev.to | 23 Apr 2024
  • Setup ReactJs + TS + Styled-Componets + Redux

    3 projects | dev.to | 27 Mar 2023
  • Intégration analytics avec TypeScript, React et les Styled Components

    7 projects | dev.to | 5 Dec 2022
  • I made React with a faster Virtual DOM

    3 projects | dev.to | 31 May 2022
  • Trim the fat: tips for keeping bundle size small 🏋️

    3 projects | dev.to | 15 May 2022