X-Component Syntax Demo

LiveComponents Interactive & Stateful

LiveComponents are interactive and maintain state. They support actions, real-time updates, and server-sent events.

Counter Component

Simple counter with increment/decrement actions.

<x-counter id="demo-counter" initialValue="0" />

DataTable Component

Interactive data table with pagination and sorting.

<x-datatable id="users-table" page="1" pageSize="10" />

Search Component

Live search with debouncing and results.

<x-search id="main-search" placeholder="Search..." />

Type Coercion Examples

LiveComponents automatically convert attribute values to proper types:

page="1" → int: 1
enabled="true" → bool: true
filters='["active"]' → array: ["active"]
config='{"limit":10}' → object: {limit: 10}

HTML Components Static & Fast

HTML Components are stateless and render to static HTML. Perfect for simple UI elements like buttons, badges, and cards.

Button Component

Styled buttons with variants.

Primary Button

Secondary

Danger

<x-button variant="primary">Primary Button</x-button>

Badge Component

Small status indicators.

Active

Pending

Error

<x-badge variant="success">Active</x-badge>

Card Component

Content containers.

This is a card with a title and content.

<x-card title="User Profile">...</x-card>

🔗 Mixed Usage

You can combine both types in the same template! The XComponentProcessor automatically detects which type to use.

Real-World Example

A typical dashboard widget combining static and interactive components:

Current users online:

Refresh Stats

Export Data

<x-card title="User Statistics">
    <p>Current users online:</p>
    <x-counter id="online-users" initialValue="42" />

    <x-button variant="primary">Refresh Stats</x-button>
    <x-button variant="secondary">Export Data</x-button>
</x-card>

✨ Benefits

🚀 Modern Syntax

Clean, Laravel/Tempest-inspired syntax that's familiar to modern developers.

🔄 Auto-Detection

Automatically determines if component is LiveComponent or HTML Component.

⚡ Type Safety

Automatic type coercion and prop validation for LiveComponents.

🎯 Single Syntax

One syntax for both stateful and stateless components.

🛡️ Error Handling

Helpful error messages in development, graceful failures in production.

📝 IDE Support

Easy to autocomplete and syntax highlight in modern editors.

📚 Documentation

For complete documentation, see docs/claude/x-component-syntax.md

Quick Reference

Component Type	Syntax	Use Case
LiveComponent	`<x-name id="..." />`	Interactive UI (datatables, forms, counters)
HTML Component	`<x-name>content</x-name>`	Static HTML (buttons, badges, cards)

🎨 X-Component Syntax Demo