Documentation | XMLUI

Search Field

Working with Text

Working with Markdown

Routing and Links

User-defined Components

Codefences and playgrounds

Local Persistence

Build a HelloWorld Component

Hosted Deployment

Invoice Details

Validate dependent fields together

Validate a field inline with onValidate

Transform form data before submission

Build a multi-step wizard form

Reset a form after submission

Persist form drafts across sessions

Prefill a form from an API response

Arrange form fields side by side

Add an async uniqueness check

Show validation progress in the Save button

Submit a form with file uploads

Use built-in form validation

Do custom form validation

Use a custom FormItem control

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

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

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

Switch between hash and history routing

Navigate programmatically

Highlight the active nav link

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

Wrap items across multiple rows

Align items to opposite ends of a row

Force a row break in a wrapping layout

Control item spacing with gap

Set a right-to-left layout direction

Open a confirmation before delete

Build a fullscreen modal dialog

Show a slide-in settings drawer

Keep a ModalDialog reopenable with onClose

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

Buffer a reactive edit

Assign a complex JSON literal to a variable

Toggle multiple items with shared state

Add a dropdown menu to a button

Disable menu items conditionally

Create a multi-level submenu

Open a context menu on right-click

Render Markdown content as a page

Embed an external site in an IFrame

Lazy-load images for performance

Generate a QR code from user input

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

Debug a component

Theme Button variant×color combos

Style per-level Heading sizes

Customize Select & AutoComplete menus

Theme form inputs for all states

Style Markdown admonition variants

Customize Tooltip appearance

Theme ExpandableItem transitions

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

Use regex validation in FormItem

Use negative maxPrimarySize in Splitter

Sync TileGrid selection across grids

Handle ContentSeparator orientation

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

This site is an XMLUI™ app.