Explore Widgets in HXL Playground

HXL Playground (https://www.headlessexperiencelayer.com) is an interactive, browser-based tool for learning and building with the Headless Experience Layer (HXL). Describe your UI as declarative JSON, and the playground renders the UI natively across multiple surfaces.

  • Components: Learn about HXL components and their properties.
  • Widgets: Compose components into complete, reusable UI.
  • Tutorials: Learn HXL concepts step by step, from a single text block to a full widget.

Use the playground’s top navigation bar to switch pages. To change the theme, select light, dark, or system mode at the top of any page.

Navigation bar in HXL playground

  • Browse the components reference for the properties and behavior of each component.
  • Work through the Tutorials to learn HXL concepts.
  • Compose your own widget on the Widgets page and preview it across surfaces.