Braid enables developers to view components and markup in isolation, allowing for a consistent, clutter-free view of the atomic structure of their layouts.

What is Braid?

Braid is a pattern library tool for Laravel (+ Livewire) projects.

It enables developers to view components and markup in isolation, allowing for a consistent, clutter-free view of the atomic structure of their layouts.

Why not just use another similar tool?

There is a great selection of brilliant packages around online and if you feel one of those work better with your workflow then you should absolutely use it.

If you would however prefer a tool that:

  • Is native to Laravel/PHP/Blade
  • Is built around your own webserver (and hosted as part of the site)
  • Has support for Livewire and Blade Components

Then read on!

What can Braid do for me?

Braid’s purpose revolves around making it easy for developers to create, mock and inspect Laravel and Livewire components in an isolated, clutter free environment.

It does this by providing a terse, simple to understand PHP class-based framework in which Laravel developers will feel right at home.

Enough nonsense, show me an example! 😤

Alright already — suppose you had the following component nestled deeply in your Laravel app:

1
2
3
4
5
6
7
8

{{-- /resources/views/components/button.blade.php --}}
<button
    {{ $attributes->class([
        "border rounded-md border-sky-400 shadow-md ..."
    ]) }}
>
    {{ $slot }}
</button>

Here’s how you’d define it with a Braid pattern:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// tests/Patterns/Components/Button.php
namespace Tests\Patterns\Components;

use Illuminate\View\View;
use njpanderson\Braid\Base\ComponentPattern;
use njpanderson\Braid\Contracts\PatternContext;

class Button extends ComponentPattern {
    public function contextData(string $context): PatternContext|View
    {
        return $this->makeContext(
            slot: 'Button'
        );
    }
}

And here’s what it’d look like in Braid:

A basic demo of Braid

And that’s it! 😎

If you’re interested in working with Braid, check out the Quick start 🚀 page.