synergy
v7.0.5
Published
A JavaScript library for building Web Components
Downloads
152
Maintainers
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.