synergy

Synergy is a tiny runtime library for building web user interfaces

Features

• Simple templates for declarative data & event binding
• Reactive data bindings update your view efficiently and automatically
• Full component workflow using standard Web Components
• Small footprint (~4k)
• No special tooling required (e.g., compilers, plugins)
• Minimal learning curve (almost entirely standard HTML, JS, and CSS!)
• Seamless pre-rendering & hydration for great performance and SEO

Learn how to use Synergy in your own project.

Browser Support

Works in any modern browser that supports JavaScript Proxy.

Installation

Synergy doesn't require any special toolchain, compiler, plugins etc. Its a tiny (~4k) package that gives you everything you need to start building directly in the browser.

The quickest way to get started is to import the Synergy package directly from a CDN.

Unpkg CDN

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

You can also install directly into your project using NPM.

NPM

$ npm i synergy

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 }) => ({ name }));
</script>
<template id="hello-world">
  <p>Hello {{ name }}</p>
</template>

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.