Skip to content

Commit

Permalink
fix README example
Browse files Browse the repository at this point in the history
  • Loading branch information
defx committed Jan 9, 2021
1 parent 03c7676 commit 6039ab0
Showing 1 changed file with 26 additions and 31 deletions.
57 changes: 26 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,21 @@

## [![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 tiny runtime library for building web
user interfaces
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
- 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
- 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](https://synergyjs.org/getting-started.html).

Expand All @@ -31,13 +28,13 @@ 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.
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.
The quickest way to get started is to import the Synergy
package directly from a CDN.

### Unpkg CDN

Expand All @@ -47,8 +44,7 @@ Synergy package directly from a CDN.
</script>
```

You can also install directly into your project
using NPM.
You can also install directly into your project using NPM.

### NPM

Expand All @@ -67,9 +63,9 @@ You can find the Synergy documentation

```html
<script type="module">
import define from 'https://unpkg.com/synergy';
import synergy from 'https://unpkg.com/synergy';
define('hello-world', ({ name }) => ({ name }));
synergy.define('hello-world', ({ name }) => ({ name }));
</script>
<template id="hello-world">
<p>Hello {{ name }}</p>
Expand All @@ -82,14 +78,13 @@ You can find the Synergy documentation
<hello-world name="kimberley"></hello-world>
```

This example will render "Hello Kimberley" into a
container on the page.
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.
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

Expand Down

0 comments on commit 6039ab0

Please sign in to comment.