Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Web Component JS

A javascript library for very simply adding data driven web components to a HTML page, by defining your own domain specific, HTML language via templates.

Recent Releases

Version 1.2.8 (Stable?) August 23rd 2019

Version 1.2.7 (Buggy) December 4th 2015

Version 1.2.6 (Stable) October 6th 2015

Version 1.2.5 (Stable) July 11th 2015

Version 1.2.4 (Stable, supports loading of its own dependencies) July 6th 2015

Version 1.2.0 (Seems stable, old style depdendency errors) 30th June 2015


  • jQuery - for remote calls to server to provide components with data
  • Handlebars - for "minimal templating on steroids"

What it can do

Web Component is a javascript library that can convert custom HTML tags, like in this example...

Web Component Data Loading Example Source

... into rendered content, using client side JavaScript, and template definitions:

Web Component Data Loading Example

Online Demos


Web Component JS Composer - with Live Editor and JS Packager:

The composer is a great way to play around with new templates and view the results in the live window. It also packs up your script, template and style tags into a JS packaged format which you can distribute via CDN or include by reference into local web pages.

Sample Data

Some example JSON data to help with the examples:

Using Web Component JS

  1. Copy script tags for Web Component JS into the <head></head> of your HTML page
  2. Define a <template for="your-custom-element"></template> tag
  3. Insert your custom tags into the page
  4. Load the page in a web browser to see your custom tags render

A complete example to get you started:

<!DOCTYPE html>
  <title>Web Component Examples - Index</title>
  <script src=""></script>

  <style for="page">
    body { padding: 20px; font-family: sans-serif; }

  <github-repo user="Markavian" repo="web-component"></github-repo>
  <github-repo user="johnbeech" repo="product-monitor"></github-repo>

  <template for="github-repo">
      <a href="{{user}}/{{repo}}/">

Beyond this simple example, Web Component can be used for auto-loading data via jQuery AJAX calls, and re-rendering other components defined by your page template based on these events.

Projects using Web Component

Local development setup

npm install http-server -g

Then open http://localhost:8080 in a web-browser of your choice.

Edits can be made to lib/web-component.js directly, and you can use the HTML files in tests/ as harnesses for various situations. Preferred browser for debugging is Chrome.

Local tests

To run tests against the web-component-js compiler, use:

npm test

This will run a series of compilation tests that convert sample components into a compiled format, based on a dependency resolution template, and then diff them against an expected output.

Web Component Wiki

Please see the wiki for documentation and examples on using the Web Component library and extending custom components with your own javascript.


A javascript library for very simply adding data driven web components to a HTML page, by defining your own domain specific, HTML language via templates.




No packages published