Web Component Loader

Test your web components here!

Have you ever stumbled across a web component and wondered what it looked like?

This is a simple page that let's you load up a web component from a cdn or unpkg.com on the fly and view it. Added components are saved to local storage for repeated viewing.

There's also a small library of web components I've found already to tinker with. If you know of any cool ones I should add, please add them to components.json and submit a PR!

This is just hacked together with jquery as a proof of concept.

Installing / Getting started

Check it out here:

https://jpchip.github.io/web-component-loader/

Example Web Components:

ui-avatar

• URL: https://unpkg.com/[email protected]/dist/uiavatar.js
• Name: ui-avatar
• Key: name
• Value: Your Name

stencil-voice2text

• URL: https://unpkg.com/stencil-voice2text@latest/dist/voice2text.js
• Name: st-voice2text
• Content: <input type="text"></input>

Find many more components to try at https://stencilcomponents.com/.

Polymer web components also work:

paper-button

• URL: https://cdn.rawgit.com/download/polymer-cdn/2.6.0/lib/paper-button/paper-button.html
• Name: paper-button
• Content: Hello World

Developing

Setting up Dev

Install some local web server. Recommend http-server.

git clone https://github.com/jpchip/web-component-loader.git
cd web-component-loader/
http-server

Load up site at http://127.0.0.1:8080.

Todos

• Allow setting unlimited number of parameters
• Allow adding more than one component
• Add each component as a widget in a dashboard
• Store added components in local storage
• Allow editing component parameters and content
• Add support for polymer based components (ie. html)
• Add onload/onerror handlers
• Allow removing single component
• Import/Export components
• Allow adding components from a pre-defined library (ie. components.json)

Licensing

MIT