Minified CDN version

<script src=""></script>

Dev CDN version

<script src=""></script>


Download bridge.min.js Download bridge.js



1. Initialize a Bridge between an element

// In this case, the element is 'body'
let bridge = new Bridge('body');

// You can use CSS selectors too
// bridge = new Bridge('p.logo');

2. Put placeholders in your HTML code

  <!-- Placeholders are surrounded by curly braces ({}) -->

3. Cross (send data) over the bridge

bridge.cross({text: 'Hello Bridge!'});

// You can cross the bridge as many times as you want
// bridge.cross({text: 'Hello, world!'});
// You can also send as much data as you want
// bridge.cross({text: 'Hello!', number: 42});

4. Done! The \{{text}} placeholder has been replaced with 'Hello Bridge!'

Hello Bridge!


There are times when you might want to literally show a placeholder. To do this, just put a backslash (\) in front of the placeholder: