TreeListView <bm-treelistview>
Our flagship tree grid, for the web.
Shipped — BMX Web Components v1.0.0
One <script> tag. Every framework.
BMX is a suite of production-grade UI components built as standards-based custom elements. The browser renders them, not a framework — so the same markup works unchanged in plain HTML, Angular, React, Vue, Svelte, Blazor, ASP.NET Razor Pages and MVC, Django, Rails, htmx, or a twelve-year-old server-rendered application with no toolchain at all.
45 elements, all shipped
One file, no build step
WCAG 2.2 AA by construction
10 themes, retintable
Every Hypernova web suite includes the TreeListView Web Component and every BMX element outside the project-management family. The Gantt chart, PERT chart and task board are in Hypernova Pro.
Why it is built this way
Three commitments, in every component
A suite an enterprise team can adopt without adopting a philosophy.
One file, no ceremony
Drop one script tag on a page and every <bmx-*> element works. No bundler, no module graph, no CDN account, and no build step in an application nobody wants to touch.
The hard parts, done once
Form submission from inside a shadow root. The accessible name of an icon-only button. Enter versus Space on a link. Keeping a destructive action from firing twice. A composite widget that takes one Tab stop rather than eight. Every application eventually hand-rolls these, and hand-rolls them badly.
Accessible by construction
WCAG 2.2 AA as a design constraint rather than a later remediation: real elements instead of ARIA impersonations, one focus indicator across the whole library, full WAI-ARIA keyboard patterns, and prefers-reduced-motion, prefers-contrast and forced-colors honoured.
A quick look
This is the whole integration
The same markup in a Razor page, a React component, an Angular template or a plain HTML file. Typed React, Angular and Vue wrappers ship alongside, generated from each component's own API.
<script src="/assets/bmx-components.min.js"></script>
<bmx-button tone="primary">Save changes</bmx-button>
<bmx-button variant="outline" tone="neutral">Cancel</bmx-button>
<bmx-select label="Region" placeholder="Choose one">
<bmx-option value="uk">United Kingdom</bmx-option>
<bmx-option value="us">United States</bmx-option>
</bmx-select>Framework-neutral
Generated React, Angular and Vue wrappers that carry no component code, and a documented path for Blazor, ASP.NET MVC and any server-rendered template.
Keyboard complete
Every composite widget takes one Tab stop and moves with the arrows, the way the WAI-ARIA pattern for it says — not eight tab stops and a guess.
Ten themes
Switchable per page or per panel, and the whole library retints from a dozen CSS custom properties with no build step.
RTL ready
Right-to-left handled in the arithmetic where a logical property cannot reach it — an SVG path does not flip on its own.
The library
Forty-five elements, in nine families
Built in order, so each one reuses what the ones before it established. Every entry below links to its own page, its API reference and its live demo.
Grids & tree grids 1
The flagship, and a product in its own right: hierarchical and tabular data at any scale, with grouping, inline editing, saved views and real .xlsx export.
TreeListView
Buttons & actions 3
The button, and the two widgets built out of it. Everything else in the library borrows its conventions from here.
Button <bmx-button>
The workhorse, and the conventions every other component borrows.
Button Group <bmx-button-group>
Three widgets in one tag: toolbar, segmented control, multi-toggle.
Split Button <bmx-split-button>
"Save", with "Save as…" behind the chevron.
Form fields 6
The controls you type into, search, or drop a file onto. All of them submit real FormData from inside a shadow root, with no adapter in between.
Input <bmx-input>
Everything an enterprise form needs around a text field.
Textarea <bmx-textarea>
Multi-line text that matches the rest of the form.
Select <bmx-select>
Ten thousand options cost the same as ten.
Combobox <bmx-combobox>
A text field that filters a list as you type.
Date Picker <bmx-date-picker>
Typed or picked, one date or a range.
Upload <bmx-upload>
Drop or click, then see what became of every file.
Selection controls 5
The controls you toggle, slide or score with — each one over a real platform control, so focus and form participation are the browser's rather than a re-implementation.
Checkbox <bmx-checkbox>
Including the third state, done properly.
Radio Group <bmx-radio-group>
One answer from several — two selected at once made impossible.
Switch <bmx-switch>
For a setting that takes effect immediately.
Slider <bmx-slider>
A value along a track, or a range between two.
Rating <bmx-rating>
A row of stars that submits a number.
Navigation components 7
Getting around, and surviving a narrow window: a toolbar that collapses what does not fit into a menu, a breadcrumb that folds its middle, and a pagination control that does not change width as you page.
Menu <bmx-menu>
Dropdown, cascade and context menu — one component.
Tabs <bmx-tabs>
Write the panels. The tabs draw themselves.
Accordion <bmx-accordion>
One section at a time, or several — and a closed panel really closed.
Toolbar <bmx-toolbar>
A bar of controls that does not break when the window does.
Breadcrumb <bmx-breadcrumb>
The trail shortens itself rather than wrapping.
Pagination <bmx-pagination>
A page window that never changes width as you page through it.
Splitter <bmx-splitter>
Two panes and a divider, moved by pointer or keyboard.
Overlays & status 7
Dialogs and drawers over the browser's own top layer, the tooltip and popover pair — one describes, the other contains — and the shapes that hold a layout while you wait.
Dialog <bmx-dialog>
A native modal in the browser's top layer.
Drawer <bmx-drawer>
The same machinery, arriving from any of four edges.
Tooltip <bmx-tooltip>
All three of WCAG 2.2 SC 1.4.13's rules, kept.
Popover <bmx-popover>
Where anything interactive belongs.
Toast <bmx-toast>
A queue behind each corner, and nothing you are reading moves.
Progress <bmx-progress>
A bar or a ring, and "we don't know" as a state.
Skeleton <bmx-skeleton>
Holds the layout while the content is on its way.
Labels & avatars 5
The components that label what is already on the page: a count that reaches the control it belongs to, a chip that is three genuinely different elements, and a stack of faces that says who is behind it.
Badge <bmx-badge>
"99+" is drawn, and never spoken.
Chip <bmx-chip>
Three forms, three genuinely different elements.
Chip Set <bmx-chip-set>
One Tab stop, and focus that lands somewhere sensible.
Avatar <bmx-avatar>
The same person is the same colour, everywhere.
Avatar Group <bmx-avatar-group>
Never hides exactly one, because "+1" takes the same room as a face.
Application components 3
Applications in their own right rather than controls: a carousel over the platform's own scroller, a calendar whose layout is arithmetic rather than pixels, and an org chart that is a tidy-tree algorithm behind a diagram.
Project management 3
A Gantt chart, a PERT chart and a task board: three views of one plan, scheduled by the same critical-path engine as our WinForms and WPF editions, so a plan gives the same dates in a browser and on the desktop. Included in Hypernova Pro.
Gantt Chart <bmx-gantt> Hypernova Pro
A task list and a timeline, scheduled by the critical path.
PERT Chart <bmx-pert-chart> Hypernova Pro
The plan as a network, with the dates in every box.
Task Board <bmx-task-board> Hypernova Pro
Kanban columns by status, with the application in charge.
And the six that go with them
Companion elements
Six of the components take their content as markup rather than as a data array — which is what a Razor page, a Blazor component, a Django template or an htmx swap can actually produce. These are the elements you write inside them. Two of them, Option and Menu Item, render nothing at all: the parent reads them once and draws the widget. The other four do render, and leave to the parent whatever is a question about the set rather than about one entry — the value, the keyboard, the tab order.
<bmx-option>
One option for a <bmx-select>, written in markup rather than passed as data.
Written inside Select · API reference
<bmx-radio>
One option inside a <bmx-radio-group>. It renders, and that is nearly all it does — the group owns the value, the keyboard and the validity.
Written inside Radio Group · API reference
<bmx-menu-item>
One entry of a <bmx-menu>. Nest one inside another and it becomes a submenu.
Written inside Menu · API reference
<bmx-tab-panel>
One panel inside a <bmx-tabs>, and the whole of what an author writes — the tab is drawn from this element's label.
Written inside Tabs · API reference
<bmx-accordion-item>
A heading with a panel under it. Inside an accordion the accordion coordinates it; on its own, it is a disclosure.
Written inside Accordion · API reference
<bmx-breadcrumb-item>
One step of a trail: a link, or — for the step you are standing on — a piece of text that is deliberately not one.
Written inside Breadcrumb · API reference
See it running before you decide
Nothing in the showcase is a screenshot. The upload rows filling in are the component's own queue against a stand-in server; the five thousand options in the select are really there, and really windowed.