⚠️ Note: bixi is experimental and should not yet be considered ready for production use. Expect potential changes and use with caution in critical applications.
bixi is a lightweight JavaScript library designed to progressively enhance links and forms by enabling content swapping without a full page reload. By incorporating a few HTML attributes, developers can enhance user interactions while maintaining full functionality in environments where JavaScript is unavailable.
Pull in the unmodified source from src/bixi.js or use the minified/compressed versions from dist/bixi.js and/or dist/bixi.js.br respectively.
Include the library and initialize it:
<script type="module">
import { init } from '/bixi.js';
init();
</script>
⚠️ Note: bixi is published as a javascript module, so thetype="module"attribute on the script tag is required.
- A pane is a container element on the page that can be targeted by bixi links/forms
- There are two types:
bx-paneandbx-nav-pane - When a
bx-nav-paneis updated, bixi updates the URL, browser history and updates the document head. - Updates to a
bx-paneare just content updates
TODO: Add basic examples of enhancing links & forms here
- Intercepts internal links containing
bx-targetand loads content without a full page refresh. - Respects modifier keys and middle clicks for normal opening behavior.
- Enforces that the link is internal
- Intercepts forms with
bx-targetfor both GET and POST methods and supportsformactionandformmethodattributes.
bx-nav-paneelements integrate with browser back and forward navigation.- Updates
<head>elements such as<title>and<meta>when content is swapped.
- Prevents overlapping requests within nested panes, aborting or skipping as appropriate.
- Feature implemented via
getRequestCoordination()and validated intests/request-coordination.
- Adds and removes a busy class (
bx-busyby default) and sets thearia-busyattribute during requests.
- Automatically focuses elements with the
autofocusattribute after navigation and then removes the attribute.
- Emits
bixi:beforeFetch,bixi:afterFetch,bixi:beforeLoadContent, andbixi:afterLoadContentfor extensibility.
- Provides clear errors when expected panes are missing or duplicated.
init()accepts options for custom error handling, busy class configuration, and head selector lists.
- Ensure Node.js and npm are installed.
- Install dependencies:
npm install
- Build the library:
This uses
npm run build
esbuildand a Brotli plugin as defined inbuild.js. - Start the test application:
This launches the server located in
npm run test-app
test-app/server.js. - Run the automated tests:
Playwright configuration is located in
npm testplaywright.config.js.
This project is released under the MIT License. See the LICENSE file for details.