Dojo NG — component playground

Button

Shows the three button kinds, the disabled state, and the busy state that action-button adds on top of button.

Form controls + native form participation

A full form built from every text-like and choice control, wired to native submit and reset.

Select / typeahead family

The same fruit list drives four pick-one-or-many patterns: select, typeahead, and two chip-typeahead modes.

Sliders

A single-value slider next to a two-handle range slider with a live output readout.

Color picker

A swatch-driven color picker with alpha, reporting the picked value as hex.

File input

Accepts a paste from the clipboard in addition to the normal file picker, and reports every accepted file.

Date & time

Four small, independent controls grouped by size rather than by any shared behavior: date input, time picker, checkbox group, and rating.

Validation-state styling hook

One field shows how validity state reaches page CSS through plain data attributes, with no shadow DOM piercing.

Form controls mirror their validity onto the host as data-dj-* attributes. This field starts unstyled; blur it while empty to turn it invalid-styled, then type to fix it — no shadow piercing, just page CSS on [data-dj-user-invalid]/[data-dj-user-valid].

Search box (tokenized filters)

A tokenized mail-filter search box, covering both suggested-value keys and free-typed keys.

Free text plus typed key:value filters. Two kinds of key: from and has carry options, so typing from: or has: opens a suggestion popup (arrows + Enter, or click, to pick); to and tag have no options, so they take a free-typed value committed by Enter or the terminating space. Try from: then pick a contact, has: then pick, to:someone then space, tag:"needs review" (quoted, to hold a space), and subject:anything (unconfigured — stays plain text, no popup, no chip). Backspace at the start removes the last chip. The narrow box below shows chips wrapping at phone width.

{ "text": "", "tokens": [] }

Copy button

Copies from an element and from a plain value, and shows the icon's copy, check, and error states.

Copies to the clipboard (needs a secure context — https or localhost). The icon flashes copy → check → error and the accessible name changes with it. On plain http it shows the error state.

Popup

A popup anchored to its trigger button, dismissed by Escape or a click outside it.

Trigger popup & context popup

Click opens a trigger-popup menu; right-click opens a context-popup at the cursor.

Context menu, confirm popup, speed dial, snackbar

Four short interactions grouped for space, not for any shared behavior: context menu, delete confirmation, snackbar, and speed dial.

Overlays: dialog, slide pane, tooltip

A modal dialog, a slide-in panel, and a hover tooltip: the three ways this library covers content over the page.

Dropdown (menu button)

A menu-style dropdown and a panel-style dropdown sharing the same trigger pattern.

Open with the mouse or ArrowDown/Enter/Space; arrows move the active item, Enter chooses and closes, Escape closes, focus returns to the trigger. Switch the Locale to ar-EG for an RTL sanity check.

Title pane

A single collapsible panel toggled by its own title bar.

Carousel

A five-item carousel with swipe, arrows, and dots, plus a control that changes how many items show per view.

Swipe/trackpad, prev/next, and dots. Toggle per-view; switch the Locale to ar-EG to check RTL (order flips, ArrowRight still means forward).

Card one Card two Card four Card five

Split panel

A nested split panel, horizontal outer and vertical inner, driven by drag or by the keyboard.

Drag the divider, or focus it and use the arrow keys (Shift for a larger step, Home/End for the extremes). Min pane sizes are the --dj-split-panel-min-* tokens. Switch the Locale to ar-EG to check RTL (drag and ArrowLeft/Right mirror). The right pane nests a vertical split.

Wizard

A three-step wizard opened on its middle step, to check step navigation from a non-zero start.

Tabs

Three tabs with plain panel content, driven by the array-typed tabs property.

Breadcrumb, accordion, tree, grid

Breadcrumbs, an exclusive accordion, and a grid, grouped under one heading with no shared point beyond fitting on one screen.

Tree (folders + MIME structure)

Two trees, one of folders and one of MIME types, both driven by the roving-tabindex keyboard pattern and checked against RTL mirroring.

Icons + unread counts, controlled expanded, and the APG roving-tabindex keyboard: click a row to focus it, then arrows move focus (Right/Left expand/collapse or step in/out), Home/End jump, Enter selects. Switch the Locale to ar-EG to check RTL (indentation and chevrons flip).

Toolbar

A toolbar with overflowed actions, reporting which overflow action was chosen.

Nav

A collapsing nav landmark — drag the bordered box's resize handle across the 45rem threshold to flip arrangement.

The box below is resizable (drag its bottom-right corner) so you can cross the --dj-nav-collapsed threshold without resizing the whole window. The pin checkbox sets the token directly, overriding the container query — the permanent-hamburger, no-JS case. Switch the Locale to ar-EG to check RTL (the drawer opens from the right).

Icon

Compares a registered glyph against an inline slotted SVG at three sizes, plus one glyph registered without a viewBox to show the failure mode.

A registered glyph (type=) and an inline slotted <svg> must render identically at every size — in each group the left star is from the registry, the right one is slotted. The last group registers a glyph with NO viewBox: it gets a correctly-sized box but its artwork does not scale, and registering it logged one console warning (open the console to see it).

Display: avatar, card, header card, chip, result

Card and header card compose avatar, chip, and result rather than each one standing alone.

List

A selectable list with a divider and a disabled item, reporting the current selection below it.

selected: (none)

Calendar

A calendar with a preset date, reporting the selected date on change.

selected: 2026-06-15

Badge

Every badge variant next to a real use: a count badge riding inside a button's accessible name.

Presentational status/count labels. The count on the button carries its meaning via the button's aria-label, not the badge. Check light/dark and forced-colors (high-contrast) rendering.

Charts

Nine chart configurations share one dataset, from a plain line chart to a dual-axis combo with brushing.

Three chart-level toggles at once, on one small series with two deliberate holes (Wed, Sat) so missing's three modes are directly comparable on the same data.

Sparklines

The same five metrics as tiny inline charts with no axes or legend, the minimal end of the chart range.

A tiny inline chart with no axes/legend/tooltip — a KPI row, since that's the point. The last row's aria-label is locale-aware; switch the Locale above to check it (and RTL layout in ar-EG).

Streaming

Pushes a new point to a chart and a sparkline twice a second; both batch multiple pushes into one update per animation frame.

appendData() on the chart and push() on the sparkline batch multiple calls within one animation frame into a single update. max-points="20" slides the window as new points arrive, and the chart's bar/enter transitions are skipped for streamed updates.

Canvas escape hatch

The same 2,000-point line chart rendered as SVG and as canvas, to show when the canvas escape hatch is worth reaching for.

renderer="canvas" draws series marks on a <canvas> instead of SVG nodes — reach for it once a series runs into the thousands of points, not as a default. Each line here has 2,000 points. Toggle to feel the difference; axes, grid, tooltip, and the legend stay SVG/DOM either way — click a legend item below to hide/show a series and watch the canvas redraw. The real ceiling today is the x-axis, not the marks: dj-chart renders one tick label and one hit-band per UNIQUE category with no thinning, so canvas doesn't rescue a chart with tens of thousands of unique x categories even though the marks themselves would be fine at that size.

Loading indicator + a working action

Runs a real 1.5-second async action so the loading indicator's busy state is not just a static screenshot.

Progress & pagination

A determinate progress bar next to pagination, unrelated except that both report a number back to the page.

Skeleton (loading placeholder)

A loading skeleton that swaps for real content on demand and respects reduced motion.

Sheen sweeps while loading; OS reduce-motion stills it. Toggle to swap in real content. Sizes/shape come from host CSS.

Alert

Four alert severities plus a dynamically inserted one, to check that a late-added alert is still announced.

Inline status banners. Info/success use role="status", warning/danger role="alert". The last one is closable; the success one uses a custom icon. Click "Insert danger alert" to test that a dynamically-added alert is announced.

Animation: transition & transition-group

A single panel fades in and out, and a list reveals its items one at a time with a stagger.

Submitted form data

Reads the form above back from a plain FormData submit, not from a change listener on each control.

(submit the form to see its FormData)

Shared state (external store + context)

Two counter views share one Zustand store provided through context, so clicking either updates both.

Scoped theme island (always dark)

A <dj-theme> island forced to dark, to check that theming scopes to a subtree rather than only the document root.