overview

bitty is a lightweight framework for making web pages. The key features are:

• Using native HTML attributes and vanilla JavaScript functions
• Connecting events and elements through signals
• Providing shorthand functions for common tasks
• Works equally well with progressive enhancement or loading content dynamically
• Requires no extra tooling or build processes

getting started

bitty is designed to be straight-forward to use. All you need besides a copy of bitty is an HTML file and a JavaScript file.

html

For the HTML file:

• Pull bitty in with a <script> tag.

• Add a <bitty-8> tag with a data-connect attribute pointing to your JavaScript file.

• Use data-s attributes to send signals.

• Use data-r attributes to receive signals.

For example, we'll load the script tag here one time for the rest of the examples on the page.

<script type="module" src="/bitty-v8.0.0.js"></script>

Then, the bitty code looks like this:

<bitty-8 data-connect="/v8-bits/timestamp.js"></bitty-8>

<button data-s="theTime">get the time</button>
<div data-r="theTime">waiting</div>

javascript

bitty loads the JavaScript file as a module that:

• Must export a `b` object
• Exports functions that have the same name as the data-s and data-r attributes in the HTML

For example, the HTML above has data-s and data-r attributes whose values are theTime. This JavaScript exports a function with the same name to handle them.

export const b = {};

export function theTime(ev, sender, el) {
  el.innerHTML = b.time();
}

Combined, those files produce this button that gets you the time:

(The b.time() method is a feature of bitty. More on that below.)

native events and elements

bitty listens for events on elements with data-s attributes. When one fires, bitty calls the function with the same name once for each element with a corresponding data-r attribute. The functions receive three arguments:

1. The event that triggered the signal (ev).

2. The element with the data-s attribute that sent the signal (sender).

3. The element with the data-r attribute receiving the signal (el).

For example:

<bitty-8 data-connect="/v8-bits/args-example.js"></bitty-8>

<button data-s="argsExample">The Sender</button>
<div data-r="argsExample">waiting</div>

export const b = {};

export function argsExample(ev, sender, el) {
  el.innerHTML = `${sender.innerHTML} sent a ${ev.type}`;
}

element additions

bitty adds convenience methods to elements it sends through functions. The .innerHTMLAsInt() method is one example. It runs an element's .innerHTML through .parseInt(). You can use it to make a counter that doesn't require an external variable.

<bitty-8 data-connect="/v8-bits/html-counter.js"></bitty-8>

<button data-s="count" data-r="count">0</button>

export const b = {};

export function count(ev, sender, el) {
  el.innerHTML = el.innerHTMLAsInt() + 1;
}

Details on all the methods are in the documentation.

bitty methods

bitty also provides convenience methods outside the elements. b.time() was used in the prior example to print out a timestamp in the current locale. Another is b.randomInt() which returns a random number.

<bitty-8 data-connect="/v8-bits/random.js"></bitty-8>

<button data-s="getNumber">get number</button>
<div data-r="getNumber">-</div>

export const b = {};

export function getNumber(ev, sender, el) {
  el.innerHTML = b.randomInt(1, 100);
}

The full list of bitty methods is available in the documentation.

next steps

That's it for the basics. Check out the rest of the site to dig in.

• There's a "hello, world" example on the installation page.
• The snippets and examples pages will give you some ideas of what you can do and how to do it.

• The documentation provides details on all the features.

• More about bitty itself is on the Q&A page.

• Tutorials are on the way soon.