Try every component in your own pages
This is the evaluation edition of all 90 elements: the same runtime the live showcase runs, to try in your own application, framework and network. Open any example below straight from this folder - nothing to install and no server needed.
The evaluation runtime shows a small notice and draws up to 100 components on a page. It is
for deciding whether the components suit your application, for 30 days (section 13 of LICENSE).
A licence gives you the commercial runtime without either, to ship: https://binarymission.co.uk/pricing.html
One script tag
<link rel="stylesheet" href="dist/bmx-tokens.css" />
<script defer src="dist/bmx-components.demo.js"></script>
<bmx-button variant="solid">Save</bmx-button>Themes are one attribute: <html data-theme="dark">. TypeScript declarations are in
types/, and wrappers/ holds the React, Vue and Angular wrappers as source, each
with its own README. The licensed runtime is a drop-in replacement for dist/bmx-components.demo.js.
Every element
| Element | What it is |
|---|---|
<bmx-accordion> | A set of bmx-accordion-items that know about each other. |
<bmx-accordion-item> | A heading with a panel under it that opens and closes. |
<bmx-avatar> | A person, drawn small. |
<bmx-avatar-group> | The overlapping stack of faces that says who is on something. |
<bmx-badge> | A count or a state, attached to something else. |
<bmx-barcode> | A barcode drawn from a value. |
<bmx-barcode-scanner> | A form field for a barcode value. |
<bmx-breadcrumb> | The trail back out of wherever you are, which shortens itself rather than wrapping or scrolling when there is not room for all of it. |
<bmx-breadcrumb-item> | One step of a trail. |
<bmx-button> | The library's workhorse, and the component every other one borrows its conventions from. |
<bmx-button-group> | Three widgets in one tag, because they differ only in bookkeeping. |
<bmx-calendar> | A diary. |
<bmx-carousel> | A strip of slides the reader moves through. |
<bmx-chart> | Twenty-two kinds of chart, drawn by the library with no charting package. |
<bmx-chat> | A conversation, for an AI assistant or a support desk. |
<bmx-checkbox> | A single checkbox with the same chrome as the rest of the form family. |
<bmx-chip> | A small labelled thing. |
<bmx-chip-set> | A row of chips that behaves as one thing. |
<bmx-code-diff> | The differences between two texts, side by side or in one column. |
<bmx-code-editor> | A code editor in the page. |
<bmx-combobox> | A text field that filters a list as you type. |
<bmx-command-palette> | Every action in an application, one keystroke away. |
<bmx-dashboard> | A dashboard layout. |
<bmx-data-grid> | A data grid for business applications. |
<bmx-data-importer> | CSV, TSV, Excel and JSON in; clean, checked rows out - all in the browser. |
<bmx-date-picker> | A date typed into a field or chosen from a calendar, one date or a range, with named presets and an optional time. |
<bmx-decision-table> | Business rules as a DMN decision table. |
<bmx-diagram> | A diagram designer. |
<bmx-dialog> | A modal window. |
<bmx-drawer> | A panel that slides in from an edge. |
<bmx-file-manager> | A file manager. |
<bmx-form> | A form drawn from JSON. |
<bmx-form-designer> | The designer for bmx-form. |
<bmx-formula-bar> | A formula editor as a spreadsheet's formula bar has it. |
<bmx-formula-engine> | A spreadsheet calculation engine as an element. |
<bmx-gantt> | A project plan. |
<bmx-gauge> | One value on a scale. |
<bmx-graph> | A network graph. |
<bmx-graph-overview> | A small picture of a whole bmx-graph, with a box showing the part in view. |
<bmx-image-editor> | A picture editor for the page. |
<bmx-infinite-canvas> | An infinite canvas for visual collaboration. |
<bmx-input> | A single-line text field with everything an enterprise form needs around it. |
<bmx-log-stream> | A log and audit viewer for the browser. |
<bmx-map> | A map drawn by the library, with no tile server and nothing fetched. |
<bmx-menu> | A menu of commands. |
<bmx-menu-item> | One entry of a bmx-menu, written in markup rather than passed as data. |
<bmx-option> | One option for a bmx-select, written in markup rather than passed as data. |
<bmx-org-chart> | A hierarchy drawn as a diagram, with the curved connectors people know. |
<bmx-pagination> | Which page of a long list you are looking at, and how to get to another one. |
<bmx-pdf-viewer> | A PDF, shown in the page. |
<bmx-permission-matrix> | Who may do what, on one screen. |
<bmx-pert-chart> | The plan as a network. |
<bmx-pivot-chart> | A chart of a bmx-pivot-grid's totals that follows the pivot. |
<bmx-pivot-grid> | A multi-dimensional pivot grid. |
<bmx-pivot-slicer> | A slicer for a bmx-pivot-grid. |
<bmx-popover> | A small panel of *content* hung off a control. |
<bmx-progress> | How far through something is. |
<bmx-property-grid> | Inspect and edit any object. |
<bmx-qr-code> | A QR code for a link, a Wi-Fi network, a contact card, a payment reference or any text, made in the page. |
<bmx-query-builder> | A visual query builder. |
<bmx-radio> | One option inside a bmx-radio-group. |
<bmx-radio-group> | One answer from several. |
<bmx-rating> | A row of stars that submits a number. |
<bmx-report-designer> | The report designer. |
<bmx-report-viewer> | A report, laid out in pages and shown the way it will print. |
<bmx-rich-text-editor> | A rich text editor that keeps everything in the page. |
<bmx-scheduler> | A resource scheduler. |
<bmx-select> | A list of options behind a closed control. |
<bmx-signature-pad> | A signature, drawn with a pen, a mouse or a finger, that goes into a form like any other field. |
<bmx-skeleton> | The grey shapes that hold a layout together while its content is on its way. |
<bmx-slider> | A value chosen along a track, or a range chosen between two of them. |
<bmx-sparkline> | A trend the size of a word, for a table cell, a card or a sentence. |
<bmx-split-button> | A default action joined to a menu of alternatives - "Save" with "Save as…" and "Save a copy" behind the chevron. |
<bmx-splitter> | Two panes and a divider the reader can move. |
<bmx-spreadsheet> | A spreadsheet in the page. |
<bmx-step> | One step of a bmx-stepper. |
<bmx-stepper> | A task in steps - a wizard, a checkout, an onboarding - with a step list that shows where the reader is, what is done and what needs attention, and Back and Next buttons. |
<bmx-switch> | An on/off control for a setting that takes effect immediately, with the same chrome as the rest of the form family around it. |
<bmx-tab-panel> | One panel inside a bmx-tabs, and the whole of what an author writes. |
<bmx-tabs> | One panel showing at a time, with a strip of tabs to choose it. |
<bmx-task-board> | The plan as cards in columns. |
<bmx-textarea> | Multi-line text, with the same chrome as bmx-input and the same rules about when a problem may be shown - both come from src/components/field, so a form built from the two r… |
<bmx-timeline> | A timeline. |
<bmx-timeline-navigator> | A strip under (or over) a bmx-timeline showing all of its time at once. |
<bmx-toast> | A short message about something that has already happened. |
<bmx-toolbar> | A bar of controls that does not break when the window does. |
<bmx-tooltip> | A short description of the thing beside it, shown on hover and on focus. |
<bmx-tour> | A guided walk through an application. |
<bmx-tour-step> | One step of a bmx-tour. |
<bmx-upload> | A file field that takes a drop as readily as a click, and then shows the user what became of every file they gave it. |
More
The live showcase, with each family in realistic scenarios: https://showcase.binarymission.co.uk/webcomponents/bmx/
The API reference for every element: https://docs.binarymission.co.uk/webcomponents/bmx/