📖 The Fixi Project Guide

The fixi project is a family of web libraries designed to work together to make web development more enjoyable.

Each individual library is constrained to an unminified, uncompressed source size smaller than (the excellent) Preact library’s .min.gz’d size (~4.7kb).

The full project is ~4.5kb minified & brotli-compressed.

The Libraries

There are five libraries in the fixi project:

• 🚲 fixi.js - the flagship library, which allows an element to issue an HTTP request based on any event and place the response HTML anywhere in the DOM.

• 🥊 moxi.js - allows you to place scripts for arbitrary events on an element, and provides helpers for making common scripting needs simpler. Also supports simple DOM-based reactivity.

• ♻️ paxi.js - provides morphing functionality, allowing you to merge new content into the DOM without doing a full swap, which preserves focus, input values, etc.

• 📡 ssexi.js - extends fixi.js to handle streaming Server Sent Events.

• 🐕 rexi - Provides ergonomic fetch() wrappers that make issuing HTTP requests from scripting less painful.

A fixi Application

A “standard” fixi-powered web application would typically use:

• plain links for navigation between pages

• fixi for any in-page interactivity that requires server communication

• moxi for any small bits of client-side behavior: open/close, switching tabs, debounced events, enabling elements

• ssexi for live notifications or other content from the server

• paxi for morph swaps in fixi when focus & input needs to remain stable

• rexi when scripting-based HTTP requests are needed

The ethos of fixi is: less is more.

Next up: the flagship library, fixi.js.