https://github.com/defx/synergy

Synergy is a tiny runtime library for crafting Web Components
https://github.com/defx/synergy

custom-elements web-components

Last synced: about 1 month ago
JSON representation

Synergy is a tiny runtime library for crafting Web Components

• Host: GitHub
• URL: https://github.com/defx/synergy
• Owner: defx
• License: mit
• Created: 2020-11-04T16:34:17.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T09:35:21.000Z (almost 2 years ago)
• Last Synced: 2024-10-01T02:41:47.622Z (about 1 month ago)
• Topics: custom-elements, web-components
• Language: JavaScript
• Homepage: https://synergyjs.org
• Size: 905 KB
• Stars: 310
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [synergy](https://synergyjs.org)

## [![npm](https://img.shields.io/npm/v/synergy.svg)](http://npm.im/synergy) [![Build Status](https://travis-ci.com/defx/synergy.svg?branch=master)](https://travis-ci.com/defx/synergy) [![Coverage Status](https://coveralls.io/repos/github/defx/synergy/badge.svg?branch=master)](https://coveralls.io/github/defx/synergy?branch=master) [![gzip size](https://img.badgesize.io/https://unpkg.com/synergy/dist/synergy.min.js?compression=gzip&label=gzip)]()

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](https://synergyjs.org/learn/introduction).

## Browser Support

Works in any

[modern browser](https://caniuse.com/mdn-javascript_builtins_proxy_proxy)

that supports JavaScript Proxy.

## Installation

Synergy is available from npm:

```bash

$ npm i synergy

```

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

```html

  import { define } from "https://unpkg.com/synergy"

```

## Documentation

You can find the Synergy documentation

[on the website](https://synergyjs.org/).

## Example

### Step 1. Define your custom element

```html

  import { define } from "https://unpkg.com/synergy"

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

```

### Step 2. Use the Custom Element

```html

```

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](./LICENSE).