synergy

Synergy is a JavaScript library for building Web Components

Features

• Simple templates for declarative data & event binding
• Reactive data bindings update your view efficiently and automatically
• Full component workflow using standard Custom Elements
• Small footprint (<5k)
• No special compiler, plugins, required
• Minimal learning curve (almost entirely standard HTML, JS, and CSS!)
• Interoperable with other libraries and frameworks

Learn how to use Synergy in your own project.

Browser Support

Works in any modern browser that supports JavaScript Proxy.

Installation

Synergy is available from npm:

$ npm i synergy

You can also import Synergy directly in the browser via CDN:

<script type="module">
  import { define } from "https://unpkg.com/synergy"
</script>

Documentation

You can find the Synergy documentation on the website.

Example

Step 1. Define your custom element

<script type="module">
  import { define } from "https://unpkg.com/synergy"

  define("hello-world", () => ({ name }), "<p>Hello {{ name }}!</p>")
</script>

Step 2. Use the Custom Element

<hello-world name="kimberley"></hello-world>

This example will render "Hello Kimberley!" into a container on the page.

You'll notice that everything here is valid HTML and JS, and you can copy and paste this example and run it directly in the browser with no need to compile or install anything special to make it work.

License

Synergy is MIT licensed.