Application framework built on the top of DNA Web Components.

Usage no npm install needed!

<script type="module">
  import chialabSynapse from 'https://cdn.skypack.dev/@chialab/synapse';


Synapse logo

Synapse • Application framework built on the top of DNA Web Components.


Get the library

Usage via unpkg.com, as UMD package:

<script src="https://unpkg.com/@chialab/synapse" type="text/javascript"></script>

or as ES6 module:

import { App, Router, ... } from 'https://unpkg.com/@chialab/synapse?module';

Install via NPM:

$ npm i @chialab/synapse
$ yarn add @chialab/synapse
import { App, Router, ... } from '@chialab/synapse';

Create an application

import { html, customElements, render } from '@chialab/dna';
import { App } from '@chialab/synapse';

const routes = [
        pattern: '/',
        render(req, res) {
            return html`<div>
        handler(req, res) {
            res.data = new Error('not found');
        render(req, res) {
            return html`<div>

class DemoApp extends App {
    render() {
        return html`
                <h1>Synapse 3.0</h1>
                        <a href="/">Home</a>

customElements.define('demo-app', DemoApp);

const app = render(document.getElementById('app'), html`<${DemoApp} routes=${routes} />`);


Build status codecov

Build the project

Install the dependencies and run the build script:

$ yarn install
$ yarn build

This will generate the UMD and ESM bundles in the dist folder, as well as the declaration file.

Test the project

Run the test script:

$ yarn test


The release script uses Semantic Release to update package version, create a Github release and publish to the NPM registry.

An environment variable named GH_TOKEN with a generated Github Access Token needs to be defined in a local .env file.

$ echo 'export GH_TOKEN="abcxyz"' > .env

Now you are ready to run the release command:

$ yarn release


Synapse is released under the MIT license.