API reference

How to read a page

• A property with an attribute can be set in HTML or from JavaScript. "Property only" means you set it from JavaScript, for example an array of options or a function.
• A reflected property writes its value back to the attribute, so you can select on it in CSS, as in dj-button[kind="outlined"].
• Arrays and objects are easiest to set as properties, even when an attribute exists. An attribute value has to be JSON.
• Events from the components bubble and cross shadow roots, so a listener on a parent element also receives them. The data is in event.detail.
• Parts are for styling with ::part(). CSS custom properties are the --dj-* tokens that the theming guide explains.
• A plugin page lists the options the plugin adds to its host, the events it emits, and what it exports. To build a plugin of your own, see Writing plugins.

The renderer, pub/sub, and WebSocket client are on the Framework runtime page.

Form controls

• <dj-action-button>A button that inherits the surrounding theme rather than imposing its own.
• <dj-button>The foundational button.
• <dj-checkbox>A form-associated checkbox composing <dj-label>.
• <dj-checkbox-group>Multi-select group from options; submits each checked value under name.
• <dj-chip-typeahead>A multi-select typeahead: type to filter options, pick from a popup list, and each choice becomes a removable chip.
• <dj-color-picker>An inline color picker.
• <dj-constrained-input>A text input with a custom validator function: (value) => string | undefined returning an error message (or undefined when valid).
• <dj-copy-button>An icon-only button that copies text to the clipboard and shows whether it worked.
• <dj-date-input>An ISO (yyyy-mm-dd) date field: type it, or pick from a popup <dj-calendar> opened by the trailing button.
• <dj-email-input>A text input defaulting to type="email" (native email validation).
• <dj-file-input>A form-associated file selector with a button that opens the system file picker and a focusable drop zone.
• <dj-floating-action-button>A circular (or extended/pill) action button, optionally fixed to a screen position.
• <dj-form>A layout wrapper that gathers values from its named child controls and emits dj-submit with a { name: value } object.
• <dj-helper-text>Supporting text shown under a form control.
• <dj-label>A form label.
• <dj-native-select>A form-associated wrapper over a native <select>, driven by an options array, composing <dj-label>, <dj-helper-text>, and a <dj-icon> chevron.
• <dj-number-input>A text input defaulting to type="number"; exposes valueAsNumber.
• <dj-password-input>A password field with a show/hide toggle in the trailing slot.
• <dj-radio>A form-associated radio composing <dj-label>.
• <dj-radio-group>Coordinates a set of <dj-radio> into a single-choice control.
• <dj-range-slider>A form-associated dual-thumb range.
• <dj-rate>Star rating (0..max).
• <dj-search-box>A search field for free text plus typed key:value filters.
• <dj-select>A form-associated single-select combobox.
• <dj-slider>A form-associated single-value range input with a themed track/fill/thumb and optional output, composing <dj-label>.
• <dj-switch>A form-associated on/off toggle (role="switch") composing <dj-label>.
• <dj-text-area>A form-associated multi-line text field, composing <dj-label> and <dj-helper-text>.
• <dj-text-input>A form-associated text field that composes <dj-label> and <dj-helper-text>.
• <dj-time-picker>A HH:MM time field with a popup list of options generated from min/max/step (seconds).
• <dj-typeahead>An editable combobox: type to filter options, pick from a popup <dj-list>.

Overlays

• <dj-context-menu>Right-click the trigger (default slot) to open a menu of options; emits dj-select with the value.
• <dj-context-popup>Right-click (contextmenu) on the trigger (default slot) opens a <dj-popup> at the cursor, holding the content slot.
• <dj-dialog>A modal dialog.
• <dj-dropdown>A menu button: a trigger that opens a menu or panel anchored to it, built on <dj-popup> and <dj-list>.
• <dj-popup>Positions slotted content as an overlay, flipping to the opposite side when there isn't room in the preferred position.
• <dj-popup-confirmation>Clicking the trigger (default slot) opens a small confirm popup with the content slot and Confirm/Cancel buttons.
• <dj-slide-pane>A panel that slides in from an edge.
• <dj-snackbar>A toast.
• <dj-tooltip>Shows tip content next to its trigger on hover/focus.
• <dj-trigger-popup>Clicking the trigger (default slot) opens a <dj-popup> anchored to it, holding the content slot.

Layout

• <dj-accordion>Coordinates slotted <dj-title-pane> children.
• <dj-card>Content container.
• <dj-carousel>A slotted, swipeable carousel.
• <dj-header-card>A <dj-card> with a header row (avatar + title/subtitle).
• <dj-split-panel>Two resizable panes with a draggable divider between them.
• <dj-stack>Flex layout.
• <dj-three-column-layout>Leading/center/trailing slots; collapses on narrow containers.
• <dj-title-pane>A collapsible panel with a title bar.
• <dj-two-column-layout>Leading + trailing slots; collapses to one column on narrow containers (container query).

Navigation

• <dj-breadcrumb-group>A breadcrumb trail from items.
• <dj-header>App header bar.
• <dj-nav>A navigation landmark that collapses into a button and a panel when there is not enough room.
• <dj-pagination>Page navigation over total pages.
• <dj-speed-dial>A FAB that reveals slotted action buttons (actions slot) when open.
• <dj-tab-container>Tabbed interface.
• <dj-toolbar>A horizontal action bar with role="toolbar".
• <dj-tree>A hierarchical tree built from nodes.
• <dj-wizard>Step progress indicator.

Data display

• <dj-avatar>Circular/rounded/square avatar from an image src or slotted initials/icon.
• <dj-badge>A small count or status label that decorates other content.
• <dj-board>A Kanban board over plain records.
• <dj-calendar>A form-associated month-grid date picker.
• <dj-chip>Compact label/tag.
• <dj-data-grid>A virtualized, sortable, selectable data grid built on TanStack Table and TanStack Virtual.
• <dj-grid>A data grid from columns + rows.
• <dj-icon>A presentational icon.
• <dj-list>A single-select list, or a menu, built from options.
• <dj-result>A status/result block with an icon, title, subtitle, content, and actions.
• <dj-text>Typographic wrapper.

Charts

• <dj-chart>A themeable, accessible SVG chart.
• <dj-sparkline>A tiny inline chart of one numeric series, with no axes, grid, legend, tooltip, or margins.

Editing

• <dj-rich-text>A form-associated WYSIWYG editor built on Lexical.

Feedback

• <dj-alert>An inline status banner.
• <dj-global-event>Non-visual; attaches listeners to window/document for its lifetime.
• <dj-loading-indicator>A linear bar or circular spinner.
• <dj-progress>Determinate progress bar.
• <dj-skeleton>A loading placeholder that stands in for content while it loads.

Animation

• <dj-transition>Runs an enter or leave effect when show changes.
• <dj-transition-group>Staggers the show of its dj-transition children.

Media

• <dj-audio>A themed audio player.
• <dj-video>A themed video player built on video.js.

Data grid plugins

• data-grid-cell-componentsIn-row Lit components (per-column render + actionButton/checkmark helpers)
• data-grid-detailMaster-detail (expandable row detail / subgrid)
• data-grid-editControlled inline cell editing
• data-grid-exportCSV export
• data-grid-filterQuick + per-column filtering
• data-grid-formatsValue-formatting plugin (Intl number/currency/percent/date via @dojo-ng/i18n)
• data-grid-groupsRow grouping + aggregates
• data-grid-paginationPagination (reuses dj-pagination)
• data-grid-rowstateRow/cell state styling plugin (conditional row parts + cell emphasis)
• data-grid-selectCheckbox selection column plugin (select-all, range selection)
• data-grid-treeTree (hierarchical) rows

Rich text plugins

• rich-text-autolinkAuto-link (URL/email) plugin
• rich-text-colorText/background color plugin
• rich-text-criticmarkupCriticMarkup tracked-changes plugin
• rich-text-embedMedia embed plugin
• rich-text-emojiEmoji picker + shortcode plugin
• rich-text-headingsHeadings/quote plugin
• rich-text-imageImage insert plugin
• rich-text-linksLink insert/edit/remove plugin
• rich-text-listsBulleted/numbered/checklist plugin
• rich-text-markdownMarkdown input/output plugin
• rich-text-mentionsMentions (@name) plugin
• rich-text-slashSlash-command menu plugin
• rich-text-tableTable plugin

Chart plugins

• chart-financialCandlestick, volume, and indicator plugins (OHLC support package, no custom element)

Utilities

• <dj-theme>Scopes a theme to part of the page.
• contextDojo NG context-key registry (Context Protocol)
• dndDojo NG drag-and-drop primitive (pointer-events core: shadow DOM + touch, no dependency)
• dojo-elementDojo NG web component base class
• i18nDojo NG internationalization: locale signal, Intl formatting, message resolver, pluggable loader
• rich-text-menuCaret-anchored menu machinery for @dojo-ng/rich-text plugins
• storeDojo NG external-store controller for Lit components