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.
149 components, interactive
Markup shown beside each one
Nothing to install
BMX Web Components
Ninety-five 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)
- Docking (the dock layout: a dispatch desk, layouts saved and restored)
- Galleries (the gallery: a photo club’s year, prints for sale)
- Panoramas (the panorama viewer: a show home tour, one view in a listing)
- Labels (the label designer: three label jobs, straight to a thermal printer)
- Profiling (the data profiler: a month of orders, a contact list as exported)
- Drivers (the driver tree: a shop’s monthly profit, what moves subscription revenue)
- Audio (the audio editor: a card payment call redacted, a recorded talk tidied)
- Timesheets (the timesheet: a consultant’s week, a fortnight for approval)
- Bookings (the booking picker: a physiotherapy clinic, meeting rooms by the hour)
- Word processing (the document editor: a proposal under review, one letter for three clients)
- Scanning (the document scanner: receipts for an expense claim, a signed delivery note)
- Trading (the trading chart: two years of a share, a live market with its order book)
- Industrial (the HMI panel: a pumping station, a cold store on the office wall)
- CAD (the CAD viewer: a flat as the architect drew it, a review on the sheet)
- Seating (the seat map: a theatre’s Saturday night, an arena laid out in the editor)
- Mail (the mail viewer: a design studio’s mailbox, a complaint forwarded to a warehouse)
- Presentations (the presentation editor: a design review to present, a month’s figures as slides)
- Video (the video editor: a café’s opening teaser, a vertical cut for social)
- Electronics (the PCB viewer: a sensor board as it will be made, notes for the board house)
- Deep zoom (the deep zoom viewer: eight hundred gigapixels, a rock section measured)
- Life sciences (the sequence viewer: a cloning vector, isolates side by side)
- XML (the XML editor: a purchase order checked against its schema, a service’s settings by tree)
- Localisation (the translation editor: a Polish catalogue part way through, an app’s messages into Arabic)
- EDI (the EDI editor: a buyer’s orders against its guide, an X12 purchase order)
- Financial reporting (the XBRL viewer: annual accounts figure by figure, two quarters by region)
- Reality capture (the point cloud viewer: a quarry survey, a road corridor cut and boxed)
- Data centre (the rack designer: a comms room, a colocation suite for its customers)
- Logistics (the route planner: a market town’s deliveries, field engineers’ appointments)
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