Live showcase
The components, running
Not screenshots and not a video: the real custom elements, in your browser, with the same markup you would write. Nothing to install and no account.
121 components, interactive
Markup shown beside each one
Nothing to install
BMX Web Components
Sixty-seven pages, by family
Start at the overview, or go straight to the family you need. Each page runs every element in it.
Start here
- Showcase overview — every family, with what is in it
- Applications — whole screens built from the elements
By family
- Actions, fields and choices
- Display, feedback and groups
- Navigation and projects (Gantt, PERT and task board)
- Reports (report viewer and designer, charts, crosstabs, barcodes)
- Logs (the log stream: timeline, fields, masking, live)
- Canvas (the infinite canvas: a shared board, drawing, templates)
- Grids (the data grid: any data source, a million rows, trees, detail rows; the pivot grid with slicers and a pivot chart)
- Formulas (the formula engine and formula bar: a quote with no script, dynamic arrays, a hundred thousand formulas)
- Scheduling (the resource scheduler: time zones, clash rules, repeating bookings, .ics files)
- Forms (forms from JSON: steps, conditions, checks; the form designer)
- Charts (a sales dashboard, twenty-two kinds, a million points, sparklines in a table)
- Editors (the rich text editor: review with tracked changes, Markdown and JSON out, clean paste)
- Chat (a streaming assistant, a support desk, your own service)
- Imaging (the image editor: a photo cleaned, a profile picture, redaction)
- Diagrams (the diagram designer: swimlanes, Mermaid, a network, two people on one diagram)
- Spreadsheets (the spreadsheet: a sales plan, Excel files in and out, functions of your own, twenty thousand rows)
- Code (the code editor and diff: settings reviewed as they change, your own linter, a million lines, a git patch)
- Queries (the query builder: customers found, SQL, MongoDB and OData, an alert rule in a form)
- Dashboards (gauges and the dashboard layout: a support desk, six kinds of gauge, gauges you set)
- Maps (the map: customers by country with offices and routes, Europe by growth, regions of your own)
- Networks (the network graph: who works with whom, following the money, what breaks if a service fails, ten thousand nodes)
- Timelines (the timeline: a product launch, an incident minute by minute, three thousand years, fifty thousand events)
- Files (the file manager: shared files, your own server, a file chosen for a form, fifty thousand files)
- Barcodes (a shipping label, products and parts, boarding passes and driving licences, QR codes, proof of delivery with a signature, a stock count)
- Steppers (the stepper: a checkout, a set-up in any order, an import that reports its progress, a phone)
- Documents (the PDF viewer: an annual report, your own PDF, a protected board pack, two thousand pages)
- Commands (the command palette: an application run from the keyboard, finding what people mean, ten thousand reports)
- Tours (the product tour: a first look at a sales dashboard, one tour with two paths, steps the reader finishes, a single hint)
- Properties (the property grid: a form laid out, rules, refusals and undo, editors of your own, an inspector for any object)
- Permissions (the permissions matrix: who can do what in a finance system, changes reviewed before saving, roles that disagree, a whole organisation)
- Importing (the data importer: customers, a stock take from Excel, your server's last word, a hundred thousand rows)
- Decisions (the decision table: loan pre-approval, shipping charges, support tickets, rules from another tool, ten thousand applications)
- Colours (the colour picker: a brand theme, design tokens as swatches, readable by design, in a form)
- Transfer lists (the transfer list: people in a role, report columns in order, your page's last word, a hundred thousand products, in a form)
- Reviews (the review layer: a landing page under review, pins that follow the content, sign-off with your rules, threads in and JSON out)
- Floor plans (the floor plan: book a desk, a meeting room for eight, live from the sensors, drawing the plan, an architect's drawing imported)
- Workflows (the workflow designer and engine: expense claims, the task card, a blank page, your server's last word, ten thousand claims)
- Recurrence (the recurrence editor: a fortnightly review, the last working day, cron for a job scheduler, in a form)
- JSON (the JSON editor: a service's settings, an array as a table, your page's last word, two hundred thousand values)
- Terminals (the terminal: a shell in the page, a deploy log, a hundred thousand lines, your connection)
- Data mapping (the data mapper: shop orders to invoices, a CRM export auto-mapped, run it anywhere)
- 3D models (the 3D model viewer: a camera mount, sections and measuring, notes as JSON, your own file)
- Email (the email template designer: a newsletter, a receipt and its plain text, checked before sending)
- Planning (the planning grid: an operating plan, spreading a sales target, three hundred cost centres)
- Configurators (the configurator: an edge server quoted by a seller, a bicycle as a buyer sees it, checked again on your server)
- Comparisons (document compare: two versions of an agreement, a policy change by change, your own files)
- Annotation (the annotation studio: street scenes, reviewing, datasets out as COCO, YOLO and Pascal VOC)
- Media (the media player: a safety induction with captions, chapters and a transcript, as audio with bookmarks, caption styles)
- Captions (the caption editor: a first draft cleaned up, a transcript turned into timed captions, every format out)
- Risks (the risk matrix: an enterprise risk register, counts and movement for the board, your own scales)
- Reconciliation (the reconciliation workbench: a month’s bank reconciliation, a thousand receipts against twelve hundred invoices)
- Time series (the time-series explorer: a year of a compressor, this week against last, live from a meter)
- Signing (the document signer: a tenancy agreement signed in turn, your own PDF prepared)
- Rostering (the shift roster: two weeks of a care home, four weeks of a warehouse filled in one go)
- Notifications (the notification centre: an operations inbox, as an activity feed)
- Filters (the filter panel: a product catalogue, support tickets above a table, applied on request)
- APIs (the API explorer: an orders API tried in mock mode, a Swagger 2.0 description)
- Mind maps (the mind map: a launch plan, radial from Markdown)
- Processes (the process explorer: purchase to pay, a help desk straight from a CSV export)
- Tracing (the trace viewer: a slow checkout, a search request from Zipkin in the flame graph)
- Lineage (the lineage graph: a shop’s data platform, a dbt project)
TreeListView
Its own playground
TreeListView is a product in its own right, with a playground that carries far more than a showcase page could.
Interactive playground
- Large data sets, grouping, editing and virtual scrolling, all live