Package Exports

synergy
synergy/dist/synergy.min.js
synergy/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (synergy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.