Software Alternatives & Reviews

Build an Embeddable Widget using Preact and the Shadow DOM

Recommended and mentioned products

  1. styled-components is a visual primitive for the component age that also helps the user to use the ES6 and CSS to style apps.

    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.
  2. A JavaScript library for building user interfaces

    It's imperative that the widget loads quickly. With the strategy the team had in place, it was clear that it was going to be difficult to code-split our application. At CompanyCam, engineers write user interfaces in React therefore it made sense to stick with that.
  3. Preact is a fast 3kB alternative to React 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!
  4. The only app every contractor needs.


    Our team at CompanyCam was tasked with building a widget that our users could embed on their websites. The widget needed to be easy to install, responsive, and provide a fullscreen application experience. This article introduces and explains the technical decisions made and how we got there.