Skip to content

defx/synergy

Repository files navigation

npm Build Status Coverage Status gzip size

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.

About

Synergy is a tiny runtime library for crafting Web Components

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published