Crossings

A tiny library focused on easily connecting JS to HTML.

No build tools, configuration, or complex frameworks. It's just pure JavaScript. Including it is very easy, you can either use a CDN or download it directly.
Download / CDN

Interactive Demo

View the source

How it works

Start by putting data-crossing attributes on the elements you want to have data passed ("crossed") to.

<body>
  <h1>Hi, I am <span data-crossing="title">cool</span>!</h1>
</body>

Then initialize a Bridge.

// Pass a CSS selector or an HTML element to the constructor
const bridge = new Bridge('body');

Finally, get crossing!

bridge.cross({
  title: 'MystPi'
});

// or

bridge.title = 'MystPi';