Laravel Html Laravel Package

Getting Started

Start by installing the package via Composer: composer require spatie/laravel-html. After installation, the html() helper function becomes available globally—no manual facade registration needed (though the old Html facade is still supported via Spatie\Html\Facades\Html::class). Your first use case will almost certainly be building dynamic forms or reusable UI components:

// Basic element creation
echo html()->input('text', 'name')->value('John')->render();  
// "<input type="text" name="name" value="John">"

// Building a form field with error awareness (via old() and model binding)
$email = html()->email('email', 'user@example.com');
// If form fails validation, old('email') is used automatically; otherwise falls back to default

Read the html() helper documentation first—it’s the entry point for all element creation. Understand immutability: every method call (e.g., class(), value()) returns a new element instance, not mutating the original.

Implementation Patterns

• Form Builder Components: Encapsulate repeated form structures (like radio toggles, grouped selects) into service-bound helper methods or custom element classes. Leverage model binding with html()->select('status', $user->status)—the package intelligently pulls old() values, selected values, and defaults in order of priority.
• View Composition: Use Blade @include with inline builders for modular UI:

<div class="card">
  {{ html()->div()->class('card-body')
    ->children(['Title' => html()->h2('Info'), 'Body' => html()->p($description)]) }}
</div>

• Tailwind CSS Integration: Chain class() or classes() (via array/collection) for conditional utility classes:

html()->button('Submit')
    ->class(['btn', 'btn-primary' => $isValid, 'btn-disabled' => !$isValid])
    ->disabled(!$isValid)

• Custom Element Reuse: Extend Spatie\Html\Html (as shown in docs) to register domain-specific methods like radioYesNo($name). Bind the extended class via AppServiceProvider’s singleton to override the default html() helper globally.
• Conditional Rendering: Use if() to compose elements with minimal branching:

html()->div()->if($isUserLoggedIn, fn($div) => $div->text('Welcome back, ' . $user->name))

Gotchas and Tips

• Immutability pitfalls: Accidentally storing an element in a variable and reusing it after modification leads to stale output. Always reassign: $input = $input->class('new-class');, not $input->class('new-class') alone.
• Form helpers require explicit name: html()->email('email') sets both name and id; omitting the first argument produces invalid markup. Double-check when building dynamic fields.
• Blade escaping vs. html(): When embedding rendered HTML in Blade, use {!! !!} or explicitly call ->render() (returns HtmlString) to avoid double-escaping. text() always escapes, html() does not—mix carefully.
• Custom element factories: Prefer Div::create() over Element::withTag('div') for brevity, but note create() is only available on concrete element classes (not generic Element).
• Extending carefully: Overriding methods in extended classes is straightforward, but ensure type hints (or lack thereof in v2+) match—especially when overriding attributes() or children() methods to accept different iterables.
• Debugging tip: Call ->getAttribute('class') or ->getAttribute('data-id') to inspect attribute values mid-chain without rendering—useful in TDD.
• Void elements: Remember ->close() returns empty string for void elements like <img>, <br>, or <input>—don’t manually close them.