Search Field

Codefences and playgrounds

Working with Text

Working with Markdown

Routing and Links

User-defined Components

Local Persistence

Build a HelloWorld Component

Hosted Deployment

Invoice Details

Validate dependent fields together

Build a multi-step wizard form

Reset a form after submission

Persist form drafts across sessions

Prefill a form from an API response

Make a form read-only conditionally

Arrange form fields side by side

Show validation on blur, not on type

Add an async uniqueness check

Submit a form with file uploads

Use built-in form validation

Do custom form validation

Copy billing data to shipping

Set the initial value of a Select from fetched data

Poll an API at regular intervals

Transform nested API responses

Show a skeleton while data loads

Retry a failed API call

Track a long-running server task

Send custom headers per request

Invalidate related data after a write

Use mock data during development

Download a file from an API

Cancel a deferred API operation

Delay a DataSource until another is ready

Chain a DataSource refetch

Update UI optimistically

Debounce user input for API calls

Stop DataSource requests in a closed Dialog

Pin columns in a wide table

Add row actions with a context menu

Render a custom cell with components

Enable multi-row selection in a table

Sort a table by a computed value

Highlight rows conditionally

Build a master–detail layout

Auto-size column widths with star

Modify a value reported in a Column

Make a table responsive

Sync selections between table and list views

Build a grouped list with headers

Lazy-load tree children on expand

Pre-select a tree node on load

Render a flat list with custom cards

Add drag-and-drop reordering to a list

Iterate without a container element

Display an empty-state illustration

Paginate a list

Add breadcrumb navigation

Protect a page with an auth guard

Deep-link to a tab or section

Build nested page routes

Switch between hash and history routing

Navigate programmatically

Highlight the active nav link

Collapse the nav panel on mobile

Make NavPanel width responsive

Build a holy-grail layout

Center content on the page

Create a resizable split view

Make a sticky header in a scroll area

Build a responsive card grid

Show different content per breakpoint

Push a footer to the bottom

Dock elements to panel edges

Limit content width on large screens

Make a set of equal-width cards

Open a confirmation before delete

Build a fullscreen modal dialog

Show a slide-in settings drawer

Return data from a closed dialog

Open a context menu on right-click

Pass data to a Modal Dialog

Share a ModalDialog across components

Use the same ModalDialog to add or edit

Create a custom color theme

Override a component's theme vars

Implement a dark-mode toggle

Style text with custom variants

Scope a theme to a card or section

Adjust spacing globally

Create a reusable component

Pass a template slot to a component

Emit a custom event from a component

Set default property values

Compose components with nesting

Expose a method from a component

Delegate a method

React to value changes with debounce

Derive a value from multiple sources

Use accessors for complex expressions

Run a one-time action on page load

Communicate between sibling components

Throttle rapid value updates

React to button click not keystrokes

Buffer a reactive edit

Assign a complex JSON literal to a variable

Toggle multiple items with shared state

Build a toolbar with overflow menu

Add a dropdown menu to a button

Disable menu items conditionally

Create a multi-level submenu

Render a Markdown file as a page

Embed an external site in an IFrame

Lazy-load images for performance

Generate a QR code from user input

Display a PDF document inline

Add entrance animations to content

Show toast notifications from code

Set the page title dynamically

Receive postMessage from an iframe

Build a batch-processing queue

Add custom icons to the app

Generate a table of contents

Use local storage for user prefs

Redirect users after login

Debug a component

Theme Button variant×color combos

Style per-level Heading sizes

Theme TableOfContents by depth

Customize Select & AutoComplete menus

Theme form inputs for all states

Style Markdown admonition variants

Customize Tooltip appearance

Theme ExpandableItem transitions

Style NavPanel for horizontal mode

Theme multi-level NavGroup nesting

Style ModalDialog overlay and parts

Customize Link focus & decoration

Theme DatePicker calendar items

Style Slider track, thumb, and range

Define custom Text variants in a theme

Theme Badge colors and sizes

Style Card and NoResult placeholders

Configure Tree data format and mapping

Parse uploaded files as CSV or JSON

Disable specific dates in DatePicker

Handle Form willSubmit return values

Use regex validation in FormItem

Use negative maxPrimarySize in Splitter

Switch Tabs to accordion view

Sync TileGrid selection across grids

Configure Tooltip with string syntax

Control debounce vs throttle priority

Dock children in a Stack panel

Communicate with IFrame content

Handle ContentSeparator orientation

Load remote markup with IncludeMarkup

Stack StickySection elements

Auto-scroll NavPanel to active item

Handle Checkbox value coercion

Build a stacked bar chart

Format chart axis ticks

Add custom tooltips to a chart

Create an area chart with stacking

Position labels on a pie chart

Overlay a radar chart comparison

Use ECharts for advanced charting

Create a gauge dashboard widget

Embed and navigate a PDF

Add annotations to a PDF

Capture and apply PDF signatures

Export a modified PDF

Configure a TiptapEditor toolbar

Build a responsive masonry layout

Chain animations on scroll into view

Build an auto-playing carousel

Customize carousel controls & indicators

Components Overview

ContentSeparator

FileUploadDropZone

MessageListener

NavPanelCollapseButton

TableOfContents

ToneChangerButton

Xmlui Animations

Extension Overview

FadeInAnimation

FadeOutAnimation

SlideInAnimation

Extension Overview

Extension Overview

Extension Overview

Extension Overview

Extension Overview

Xmlui Tiptap Editor

Extension Overview

Xmlui Website Blocks

Extension Overview

Layout Properties

Theme Variables

Theme Variable Defaults

Context Variables

Core Properties

Template Properties

Model Context Protocol

VSCode extension

Pre-select a tree node on load

Set selectedValue on Tree to a data-driven value so the correct node is highlighted immediately.

This article is coming soon.

This site is an XMLUI™ app.