HXL (Headless Experience Layer) Explained: Build Once, Render Everywhere
Module 3 · Headless 360 for Claude Users
HXL — Headless Experience Layer
Build Once, Render Everywhere (2026)
Build Once, Render Everywhere (2026)
In one line: HXL (Headless Experience Layer) is a runtime that separates what an agent does from how it appears — you define a UI component once, and HXL renders it natively as a Slack card, a Teams Adaptive Card, a WhatsApp message, a Claude response, or a voice prompt, all from the same definition.
Naming note: Salesforce's own material uses two names interchangeably — Headless Experience Layer (HXL) and Agentforce Experience Layer (AXL). Same technology, evolving terminology as the product matures post-TDX. Expect the industry to converge on one name over the next few release cycles.
The Problem: Context Dilution & Logic Fragmentation
Before HXL, supporting an agent output across multiple surfaces meant rebuilding it per channel — a Slack version, a mobile version, a Teams version, each with its own security checks, validation, and data-fetching logic re-implemented separately. Salesforce calls this Logic Fragmentation. And every time you rebuild the same logic slightly differently for a new surface, you risk Context Dilution — the interaction subtly behaving or looking inconsistent depending on where the user encounters it. HXL exists specifically to kill both problems at once.
How It Actually Works
You define an interactive component — an approval card, a decision tile, a data layout, a rebooking workflow — once, using custom Lightning types and declarative JSON metadata. HXL's translation layer then converts that single definition into whatever format the destination surface actually speaks:
Slack
Renders as native Slack Block Kit — buttons, sections, and interactive elements that behave like any other Slack app.
Microsoft Teams
Renders as a Teams Adaptive Card, matching the platform's native card schema.
ChatGPT & Claude
Renders as a structured response the client can display richly, following each platform's MCP app rendering conventions.
WhatsApp & Voice
Renders as an interactive message or a structured voice prompt, adapting to what each channel can actually display or speak.
One Definition, Six Renderings
Real Example: A Rebooking Workflow
✈️ Flight rebooking, rendered three ways
An airline defines a "rebooking card" component once: flight options, price delta, a confirm button. In Slack, it renders as an interactive Block Kit card a support agent clicks through during a live chat. In Claude, the same component renders as a structured response the customer can act on directly in conversation. In Teams, it becomes an Adaptive Card a corporate travel admin approves. Same underlying Flow, same validation rules, same permissions — three completely different look-and-feel outputs, zero duplicated logic.
The Governance Shift Nobody Talks About
Before Headless 360, a lot of "governance" quietly lived in the UI itself — a field was read-only because the page layout said so, an action was hidden because a button was removed from the Lightning page. Once the UI is no longer the primary surface, that kind of governance disappears with it. Salesforce is explicit about this: full schema-level enforcement — validation rules, your sharing model, and Apex — has to carry the weight that UI constraints used to. If your org's security has been leaning on hidden buttons and read-only page layouts, HXL will expose those gaps fast.
Before vs After HXL
| Before HXL (Per-Channel) | With HXL | |
|---|---|---|
| New surface support | Rebuild the UI from scratch | Automatic rendering, no rebuild |
| Consistency risk | High — logic drifts per channel | Low — single source of truth |
| Governance enforcement | Partly UI-based (layouts, hidden buttons) | Fully schema-level (validation rules, sharing, Apex) |
Common Issues
"Component looks broken on one surface but fine on others"
The destination surface likely doesn't support a specific element you used (e.g. multi-column layouts aren't universal). Check each surface's capability limits and design a fallback for unsupported elements rather than assuming full parity everywhere.
"A field is editable in Claude that used to be locked in Lightning"
Classic sign that the field was only protected by a page layout setting, not a real validation rule or field-level security setting. HXL bypasses UI-only protections by design — fix it at the schema level.
"Same component behaves inconsistently across surfaces"
Usually means logic leaked into the surface-specific rendering instead of staying in the shared component definition. Audit for any conditional logic that lives outside the core definition.
Glossary (New Terms This Module)
Component Definition
The single, declarative JSON-based definition of a UI interaction (a card, tile, or workflow) that HXL uses as its source of truth for every surface.
Translation Layer
The part of HXL that converts a component definition into the destination surface's native format — Slack Block Kit, an Adaptive Card, etc.
Block Kit
Slack's native framework for building interactive messages — buttons, sections, and structured layouts inside a Slack message.
Adaptive Card
Microsoft's cross-platform card format used in Teams to render structured, interactive content.
Context Dilution
The inconsistency that creeps in when the same interaction is rebuilt slightly differently for each channel instead of sharing one definition.
Logic Fragmentation
The maintenance burden of re-implementing the same business logic separately for every UI surface.
Trust Moat
Salesforce's term for the consistent security, permissions, and governance layer that must hold regardless of which surface an interaction is rendered on.
Key Points for Interviews & Real Projects
- HXL and AXL (Agentforce Experience Layer) refer to the same technology — expect naming to settle over time
- It decouples logic/data/permissions from presentation — the "what" is defined once, the "how it looks" is generated per surface
- Governance can no longer hide in the UI — validation rules, sharing model, and Apex must fully enforce security, since page layouts and hidden buttons don't travel to every surface
- Not every surface supports every UI element — design components with graceful fallback in mind, don't assume full visual parity everywhere
One-Line Answer for Interviews
"HXL, the Headless Experience Layer, separates what an agent does from how it appears — you define an interactive component once, and it renders natively across Slack, Teams, WhatsApp, ChatGPT, Claude, or voice, all backed by the same underlying data, logic, and permissions."
Frequently Asked Questions
What is the Headless Experience Layer (HXL)?
A runtime that separates what an agent does from how it appears, letting you define a UI component once and render it natively across Slack, Teams, WhatsApp, ChatGPT, Claude, and voice.
Is HXL the same as AXL?
Yes. Salesforce material uses Headless Experience Layer (HXL) and Agentforce Experience Layer (AXL) interchangeably for the same technology.
Does HXL replace page layout security?
No, and it exposes gaps if you were relying on it. Security must be enforced at the schema level with validation rules, sharing settings, and Apex, since UI-based restrictions don't apply on every surface.
Which surfaces does HXL support?
Slack, Microsoft Teams, WhatsApp, mobile, voice, ChatGPT, Claude, Gemini, and any MCP-compatible client.
What happens if a surface doesn't support a UI element I used?
You need to design a fallback for that element. Not every surface has full visual parity, so components should degrade gracefully rather than assume identical rendering everywhere.
SF
By SF Interview Pro
Salesforce Interview Prep Team
Practical Q&A by working Salesforce professionals · LWC, Apex, Data Cloud & AI
☕
☕ Enjoyed this article?
SF Interview Pro is 100% free and maintained by a Salesforce professional. No ads, no paywalls, and no signup required. If this guide helped you prepare for an interview, earn a certification, or grow your Salesforce career, consider buying me a coffee! ☕💜
🇮🇳 UPI (India)
Pay by QR
GPay · PhonePe · Paytm · BHIM
Keep Preparing
New interview questions every week
Follow for fresh Salesforce Q&A, free courses, and real interview experiences — straight from the trenches.
Follow Us ↗