bitwrench.js: A JavaScript UI Library

Bitwrench is an innovative front-end library that simplifies UI development by allowing users to build interfaces from plain JavaScript objects. This library provides a seamless approach to structuring components, styling, and managing state, all while being lightweight and dependency-free.

Key Features

• Unified Object Format: Bitwrench uses a single object format for components, styling, and state management, referred to as a "TACO" (Tag, Attributes, Children, Options). Each TACO can be structured using four keys:

  • t: tag (e.g., 'div')
  • a: attributes (e.g., class)
  • c: content (e.g., nested elements)
  • o: options for state and lifecycle management

• Zero Dependencies: At approximately 40KB gzipped, it can run on virtually any browser or device without needing a complex build setup. This includes compatibility with mobile devices and embedded hardware like Raspberry Pi and ESP32.

• CSS Integration: Bitwrench allows for dynamic CSS generation directly from JavaScript objects with methods such as bw.css() for stylesheets and bw.s() for inline styles. It also supports responsive design and theming through its CSS utilities.

• Reactive State Management: Components can manage state reactively with built-in options for state updates and lifecycles using simple properties like o.state and functions like bw.update().

• Dual Rendering: Render components in a live DOM for single-page applications or output an HTML string suitable for server-side rendering, emails, or static site deployments.

• Command Line Interface (CLI): Convert Markdown, HTML, or JSON files into styled web pages easily with the bwcli tool. It also supports live updates from any backend server using the bwserve protocol, facilitating real-time UI updates.

Example Usage

Below is a simple example demonstrating how to create a button that increments a counter:

var counter = {
  t: 'div',
  o: {
    state: { count: 0 },
    render: function(el) {
      var s = el._bw_state;
      bw.DOM(el, {
        t: 'div', c: [
          { t: 'h3', c: 'Count: ' + s.count },
          bw.makeButton({ text: '+1', onclick: function() {
            s.count++;
            bw.update(el);
          }})
        ]
      });
    }
  }
};

bw.DOM('#app', counter);

Rich Documentation

Bitwrench includes comprehensive documentation covering various aspects of usage, including state management, theming, components, and a guide on transitioning from frameworks like React and Vue. For more details, visit the official documentation.

Ideal for Projects

Bitwrench is particularly suitable for developers looking for an intuitive, lightweight, and flexible approach to building UIs without the constraints of traditional frameworks. Whether developing dashboards, embedded applications, or simple web tools, Bitwrench provides the necessary tools to streamline the development process.