Skip to content

Latest commit

 

History

History
72 lines (50 loc) · 2.45 KB

README.md

File metadata and controls

72 lines (50 loc) · 2.45 KB
Raw

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