diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..928cb61
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) protonemedia <pascal@protone.media>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
index 2efacc5..e0ed2fe 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,16 @@
 # Laravel Splade Docs
 
 Documentation for [splade.dev](https://splade.dev)
+
+## Sponsor Splade
+
+❤️ We proudly support the community by developing Laravel packages and giving them away for free. If this package saves you time or if you're relying on it professionally, please consider [sponsoring the maintenance and development](https://github.com/sponsors/pascalbaljet). Keeping track of issues and pull requests takes time, but we're happy to help!
+
+## Credits
+
+- [Pascal Baljet](https://github.com/protonemedia)
+- [All Contributors](../../contributors)
+
+## License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
\ No newline at end of file
diff --git a/automatic-installation.md b/automatic-installation.md
index 0325d50..87b028f 100644
--- a/automatic-installation.md
+++ b/automatic-installation.md
@@ -1,6 +1,6 @@
 # Automatic Installation
 
-A fresh Laravel application is an ideal way to get started with Splade. The package provides a convenient Artisan command, which installs [Tailwind CSS 3.0](https://tailwindcss.com) and [Vue 3.0](https://vuejs.org) on the frontend. On the backend, it installs a Route Middleware, an Exception Handler, and it prepares a default view and with its route.
+A fresh Laravel application is an ideal way to get started with Splade. The package provides a convenient Artisan command, which installs [Tailwind CSS 3.0](https://tailwindcss.com) and [Vue 3.0](https://vuejs.org) on the frontend. On the backend, it installs a Route Middleware, an Exception Handler, and it prepares a default view and its route.
 
 ```bash
 laravel new example-app
@@ -10,8 +10,10 @@ cd example-app
 composer require protonemedia/laravel-splade
 
 php artisan splade:install
+```
 
-npm install
+The `splade:install` command will also build the frontend assets. Just like [regular Laravel applications](https://laravel.com/docs/10.x/vite#running-vite), you may run the Vite development server:
 
+```bash
 npm run dev
-```
\ No newline at end of file
+````
\ No newline at end of file
diff --git a/breeze.md b/breeze.md
index 58c1b1f..7e4930e 100644
--- a/breeze.md
+++ b/breeze.md
@@ -1,6 +1,6 @@
 # Breeze Starter Kit
 
-You can use the [Laravel Breeze](https://laravel.com/docs/9.x/starter-kits#laravel-breeze) starter kit to give you a head start. Laravel Breeze is a minimal, simple implementation of all of Laravel's authentication features, including login, registration, password reset, email verification, and password confirmation. We maintain a fork with a Splade stack and keep it similar to the upstream as much as possible.
+You can use the [Laravel Breeze](https://laravel.com/docs/10.x/starter-kits#laravel-breeze) starter kit to give you a head start. Laravel Breeze is a minimal, simple implementation of all of Laravel's authentication features, including login, registration, password reset, email verification, and password confirmation. We maintain a fork with a Splade stack and keep it similar to the upstream as much as possible.
 
 The installation process is similar to the [Automatic Installation](/automatic-installation.md).
 
@@ -12,4 +12,10 @@ cd example-app
 composer require protonemedia/laravel-splade-breeze
 
 php artisan breeze:install
-```
\ No newline at end of file
+```
+
+The `breeze:install` command will also build the frontend assets. Just like [regular Laravel applications](https://laravel.com/docs/10.x/vite#running-vite), you may run the Vite development server:
+
+```bash
+npm run dev
+````
\ No newline at end of file
diff --git a/bridge-components.md b/bridge-components.md
new file mode 100644
index 0000000..949ee17
--- /dev/null
+++ b/bridge-components.md
@@ -0,0 +1,220 @@
+# Bridge Components (in beta)
+
+As of version 1.3, Splade supports bridging Blade Components and Vue Templates. This means there's two-way binding of the public PHP properties and the templates' properties, and you may call public methods from within the template as if they were JavaScript methods.
+
+> **Warning**
+> This feature is still in beta and therefore experimental. Use with care!
+
+## Prerequirement
+
+First, you must register a supporting route using the `spladeWithVueBridge()` method on the `Route` facade. As of version 1.3.0, the automatic installer does this for you. If you need to register the route manually, make sure it uses the `web` Middleware, for example, in `web.php`:
+
+```php
+Route::spladeWithVueBridge();
+```
+
+## Example component
+
+Let's start with an example component, and later on, we'll dive into the technical details. We'll start with creating a component to quickly fake a user's email address:
+
+```bash
+php artisan make:component FakeEmail
+```
+
+The component has two properties: a User model and an optional prefix. There's a method that performs the update, and lastly, there is the `WithVue` trait:
+
+```php
+<?php
+
+namespace App\View\Components;
+
+use App\Models\User;
+use Illuminate\View\Component;
+use ProtoneMedia\Splade\Components\WithVue;
+
+class FakeEmail extends Component
+{
+    use WithVue;
+
+    public function __construct(
+        public User $user,
+        public ?string $prefix = ''
+    ) {
+    }
+
+    public function fake()
+    {
+        $this->user->update([
+            'email' => $this->prefix . fake()->email,
+        ]);
+    }
+
+    public function render()
+    {
+        return view('components.fake-email');
+    }
+}
+```
+
+In the template, all public properties of the Blade Component are available through the `props` object. So instead of echoing the email address using Blade's curly braces, we'll use Vue's syntax to ensure the two-way binding. Finally, we'll attach the method to the button's click handler and use the `v-model` directive to set the prefix:
+
+```blade
+<p>User Email: <span v-text="props.user.email" /></p>
+
+<input v-model="props.prefix" placeholder="Prefix..." />
+
+<button @click="fake">Fake Email</button>
+```
+
+That's it! You don't have to register a route or controller for each new component. Instead, everything is handled for you using the `WithVue` trait. Now you may use the Blade Component:
+
+```blade
+<x-fake-email :user="$user" />
+```
+
+## Security
+
+Please be very aware that all public properties are exposed to the browser and thus visible to the end user. Be sure sensitive Model attributes are [hidden](https://laravel.com/docs/10.x/eloquent-serialization#hiding-attributes-from-json), or use the built-in [Transformer feature](/transformers.md).
+
+## Collections
+
+Similar to not using Blade's curly braces, you should use Vue's [`v-for` directive](https://vuejs.org/guide/essentials/list.html) to loop over data instead of Blade's `@foreach` directive. This way, the list will reflect updates that may happen server-side.
+
+```blade
+<ul>
+    <li v-for="(user, index) in props.users" :key="index">
+        <span v-text="user.name" />
+    </li>
+</ul>
+```
+
+## Renderless example
+
+Instead of using the view template, you may also omit the `render` method and use the component directly in your template. The great thing about that is that you may reuse the same logic repeatedly but still be able to fully customize the UI. So first, let's remove the method:
+
+```php
+<?php
+
+namespace App\View\Components;
+
+use App\Models\User;
+use Illuminate\View\Component;
+use ProtoneMedia\Splade\Components\WithVue;
+
+class FakeEmail extends Component
+{
+    use WithVue;
+
+    public function __construct(
+        public User $user,
+        public ?string $prefix = ''
+    ) {
+    }
+
+    public function fake()
+    {
+        $this->user->update([
+            'email' => $this->prefix . fake()->email,
+        ]);
+    }
+}
+```
+
+Now you can use the component in other templates and provide the UI with a slot:
+
+```blade
+<h1>Page Title</h1>
+
+<x-fake-email :user="$user">
+    <p>User Email: <span v-text="props.user.email" /></p>
+
+    <input v-model="props.prefix" placeholder="Prefix..." />
+
+    <button @click="fake">Fake Email</button>
+</x-fake-email>
+```
+
+## Inline Component View
+
+Instead of using a dedicated file for the template, you may also use an [Inline Component View](https://laravel.com/docs/10.x/blade#inline-component-views):
+
+```php
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+use ProtoneMedia\Splade\Components\WithVue;
+
+class FindIp extends Component
+{
+    use WithVue;
+
+    public function __construct(
+        public $hostname = '',
+        public $ip = '',
+    ) {
+    }
+
+    public function find()
+    {
+        $this->ip = gethostbyname($this->hostname);
+    }
+
+    public function render()
+    {
+        return <<<'blade'
+            <input v-model="props.hostname" />
+            <button @click="find">Find IP</button>
+            <p v-text="props.ip" />
+        blade;
+    }
+}
+```
+
+## Toasts and Redirects
+
+You may send a [Toast](/toasts.md) from a component method to the frontend:
+
+```php
+use ProtoneMedia\Splade\Facades\Toast;
+
+public function fake()
+{
+    $this->user->update([
+        'email' => $this->prefix . fake()->email,
+    ]);
+
+    Toast::success('User updated');
+}
+```
+
+Similarly, you may return a Redirect:
+
+```php
+public function fake()
+{
+    $this->user->update([
+        'email' => $this->prefix . fake()->email,
+    ]);
+
+    return redirect()->route('users.index');
+}
+```
+
+## Middleware and Rate Limiting
+
+By default, component methods called from the frontend will use the same Middleware stack as the original route. In addition, you may call the `middleware` method to apply additional constraints:
+
+```php
+public function fake()
+{
+    $this->middleware('can:update-email');
+
+    $this->user->update([
+        'email' => $this->prefix . fake()->email,
+    ]);
+}
+```
+
+Also, just like controller methods, public component methods may be manually invoked by users. Therefore, always validate incoming data and, when necessary, use a [Rate Limiter](https://laravel.com/docs/10.x/rate-limiting#main-content).
\ No newline at end of file
diff --git a/credits.md b/credits.md
index f2f31d2..4ed02e5 100644
--- a/credits.md
+++ b/credits.md
@@ -6,4 +6,4 @@ I'm a *massive* fan of [Inertia.js](https://inertiajs.com), and tons of Splade f
 
 Then I'd like to thank [Caleb](https://twitter.com/calebporzio) for his work on [Alpine.js](https://alpinejs.dev), a modern, minimal JavaScript framework. You'll also find that some patterns were hugely inspired by it. Two other projects I should mention are [Wire Elements](https://wire-elements.dev) by [Philo](https://twitter.com/Philo01) and [Momentum Modal](https://github.com/lepikhinb/momentum-modal) by [Boris](https://twitter.com/lepikhinb/). Both were tremendously helpful while implementing the Modal feature in Splade.
 
-And lastly, I need to thank [Taylor](https://twitter.com/taylorotwell) and the rest of the [Laravel team](https://laravel.com/team) for bringing us the best web application framework we've ever seen. To make Splade look familiar to developers, I've based most of the frontend-boilerplate on [Jetsteam](https://jetstream.laravel.com/2.x/introduction.html).
+And lastly, I need to thank [Taylor](https://twitter.com/taylorotwell) and the rest of the [Laravel team](https://laravel.com/team) for bringing us the best web application framework we've ever seen. To make Splade look familiar to developers, I've based most of the frontend-boilerplate on [Jetstream](https://jetstream.laravel.com/2.x/introduction.html).
diff --git a/custom-form-components.md b/custom-form-components.md
new file mode 100644
index 0000000..4e9e987
--- /dev/null
+++ b/custom-form-components.md
@@ -0,0 +1,340 @@
+# Custom Form components
+
+Splade comes with a great set of [built-in Form Components](/form-overview.md), but your application might require a custom component as part of a form. There are several ways to implement this, so we’ll look at implementing the same custom component differently.
+
+## Card Select component
+
+The component we'll be implementing is a *card selector*. In this example, two cards represent a subscription plan (*basic* or *pro*). Clicking on one of the cards will update the form data, as the cards are built around a `radio` input element. Here's what it looks like:
+
+<img src="https://github.com/splade-plan-selector.png" style="width: 100%; max-width: 500px;" />
+
+## Blade implementation
+
+First, let's take a look at a Blade implementation. This implementation works without any custom Vue components. For the sake of simplicity, we'll hard-code both plans, and we don't extract each card into a separate component.
+
+```blade
+<x-splade-form default="{ plan: 'basic' }">
+    <div class="flex flex-row justify-center space-x-4">
+
+        {{-- Plan Basic --}}
+        <label class="w-64 cursor-pointer rounded-md shadow-sm bg-white border-2 py-8 px-4" :class="{ 'border-white': form.plan !== 'basic', 'border-green-500': form.plan === 'basic' }">
+            <input type="radio" value="basic" v-model="form.plan" class="sr-only" />
+            <div class="flex flex-row justify-between items-center">
+                <span class="font-bold">Plan Basic</span>
+
+                <svg v-show="form.plan === 'basic'" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            </div>
+
+            <span class="text-sm">$ 9.99 / month</span>
+        </label>
+
+        {{-- Plan Pro --}}
+        <label class="w-64 cursor-pointer rounded-md shadow-sm bg-white border-2 py-8 px-4" :class="{ 'border-white': form.plan !== 'pro', 'border-green-500': form.plan === 'pro' }">
+            <input type="radio" value="pro" v-model="form.plan" class="sr-only" />
+            <div class="flex flex-row justify-between items-center">
+                <span class="font-bold">Plan Pro</span>
+
+                <svg v-show="form.plan === 'pro'" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            </div>
+
+            <span class="text-sm">$ 19.99 / month</span>
+        </label>
+
+    </div>
+</x-splade-form>
+```
+
+Let's break down what's happening here. First, there's a [Form component](/x-form.md) with a default *basic* plan.
+
+```blade
+<x-splade-form default="{ plan: 'basic' }">
+```
+
+Then there are two Cards built around a `label` element. The border color is based on whether the plan is selected or not.
+
+```blade
+<label :class="{ 'border-white': form.plan !== 'basic', 'border-green-500': form.plan === 'basic' }">
+```
+
+Within the `label` element, there's an `input` element. It has the `value` set to the plan and two-way binding by setting the `v-model` to `form.plan`.
+
+```blade
+<input type="radio" value="basic" v-model="form.plan" class="sr-only" />
+```
+
+Lastly, an `SVG` element (checkmark icon) that's only visible when the plan is selected.
+
+```blade
+<svg v-show="form.plan === 'basic'">
+    <path d="..." />
+</svg>
+```
+
+### Extract Card into Blade Component
+
+We begin by creating a new Blade Component. As this is a fairly simple component, we'll create an anonymous component with only a view:
+
+```bash
+php artisan make:component CardLabel --view
+```
+
+Then, we can move the Card component out of the form and paste it into the new Blade component view. We'll replace all hardcoded values with variables. To pass PHP values to Vue, always use Laravel's `@js` directive. Note how the `radio` input element uses a `:value` attribute (with a colon).
+
+```blade
+<label class="w-64 cursor-pointer rounded-md shadow-sm bg-white border-2 py-8 px-4" :class="{ 'border-white': form.plan !== @js($plan), 'border-green-500': form.plan === @js($plan) }">
+    <input type="radio" class="sr-only" :value="@js($plan)" v-model="form.plan" />
+
+    <div class="flex flex-row justify-between items-center">
+        <span class="font-bold">{{ $title }}</span>
+
+        <svg v-show="form.plan === @js($plan)" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    </div>
+
+    <span class="text-sm">$ {{ $price }} / month</span>
+</label>
+```
+
+Lastly, we'll update the form to use the new component:
+
+```blade
+<x-splade-form default="{ plan: 'basic' }">
+    <div class="flex flex-row justify-center space-x-4">
+        <x-card-label plan="basic" title="Plan Basic" price="9.99" />
+        <x-card-label plan="pro" title="Plan Pro" price="19.99" />
+    </div>
+</x-splade-form>
+```
+
+## Vue implementation
+
+Instead of building the Card component with a Blade template, you could also create a custom Vue component. Again, there are many ways of doing this, but let's show two examples corresponding to the Blade examples.
+
+Matching the first Blade example, you could create a Vue component that contains both plans. We'll create a `PlanSelector.vue` component and pass the `form` object as a property. By passing the entire `form` object to the component, you can interact with it *within* the Vue component by using the [Form API](/x-form.md). Remember to [register the custom Vue component](/custom-vue-components.md) in the main `app.js` file.
+
+```vue
+<template>
+    <div class="flex flex-row justify-center space-x-4">
+        <label
+            class="w-64 cursor-pointer rounded-md shadow-sm bg-white border-2 py-8 px-4"
+            :class="{
+                'border-white': form.plan !== 'basic',
+                'border-green-500': form.plan === 'basic',
+            }">
+            <input type="radio" value="basic" v-model="form.plan" class="sr-only" />
+            <div class="flex flex-row justify-between items-center">
+                <span class="font-bold">Plan Basic</span>
+
+                <svg v-show="form.plan === 'basic'" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            </div>
+
+            <span class="text-sm">$ 9.99 / month</span>
+        </label>
+
+        <label
+            class="w-64 cursor-pointer rounded-md shadow-sm bg-white border-2 py-8 px-4"
+            :class="{
+                'border-white': form.plan !== 'pro',
+                'border-green-500': form.plan === 'pro',
+            }">
+            <input type="radio" value="pro" v-model="form.plan" class="sr-only" />
+            <div class="flex flex-row justify-between items-center">
+                <span class="font-bold">Plan Pro</span>
+
+                <svg v-show="form.plan === 'pro'" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            </div>
+
+            <span class="text-sm">$ 19.99 / month</span>
+        </label>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    form: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+```
+
+Then in the Blade template, you'd use this component and pass the `form` object:
+
+```blade
+<x-splade-form default="{ plan: 'basic' }">
+    <PlanSelector :form="form" />
+</x-splade-form>
+```
+
+### Replace Form object with v-model
+
+Instead of passing the entire `form` object to the Vue component, you could also use a `v-model` directive:
+
+```blade
+<x-splade-form default="{ plan: 'basic' }">
+    <PlanSelector v-model="form.plan" />
+</x-splade-form>
+```
+
+Then we'd need to update the Vue component to work as a [custom input](https://vuejs.org/guide/components/events.html#usage-with-v-model). We'll replace `form.plan` with `modelValue`, and replace the `v-model` directive on the input element with `:checked` and `@change` attributes.
+
+```vue
+<template>
+    <div class="flex flex-row justify-center space-x-4">
+        <label
+            class="w-64 cursor-pointer rounded-md shadow-sm bg-white border-2 py-8 px-4"
+            :class="{
+                'border-white': modelValue !== 'basic',
+                'border-green-500': modelValue === 'basic',
+            }">
+
+            <input
+                type="radio"
+                value="basic"
+                class="sr-only"
+                :checked="modelValue === 'basic'"
+                @change="$emit('update:modelValue', 'basic')"
+            />
+
+            <div class="flex flex-row justify-between items-center">
+                <span class="font-bold">Plan Basic</span>
+
+                <svg v-show="modelValue === 'basic'" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            </div>
+
+            <span class="text-sm">$ 9.99 / month</span>
+        </label>
+
+        <!-- Other plans... -->
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        modelValue: String,
+    },
+
+    emits: ["update:modelValue"],
+};
+</script>
+```
+
+Again, this works fine, but you don't want to hardcode the plans into the Vue component.
+
+### Extract Card into Vue Component
+
+Let's take the Vue implementation one step further, and extract the Cards into a dedicated Vue component. We'll name this component `CardLabel.vue`. As the plans are now dynamic, we'll add a `plan`, `price`, and `title` property:
+
+```vue
+<template>
+    <label
+        class="w-64 cursor-pointer rounded-md shadow-sm bg-white border-2 py-8 px-4"
+        :class="{
+            'border-white': modelValue !== plan,
+            'border-green-500': modelValue === plan,
+        }">
+
+        <input
+            type="radio"
+            :value="plan"
+            class="sr-only"
+            :checked="modelValue === plan"
+            @change="$emit('update:modelValue', plan)"
+        />
+
+        <div class="flex flex-row justify-between items-center">
+            <span class="font-bold" v-text="title" />
+
+            <svg v-show="modelValue === plan" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        </div>
+
+        <span class="text-sm">$ {{ price }} / month</span>
+    </label>
+</template>
+
+<script>
+export default {
+    props: {
+        modelValue: String,
+        plan: String,
+        price: String,
+        title: String,
+    },
+
+    emits: ["update:modelValue"],
+};
+</script>
+```
+
+You can use the new `CardLabel` component in the Blade template:
+
+```blade
+<x-splade-form default="{ plan: 'basic' }">
+    <div class="flex flex-row justify-center space-x-4">
+        <CardLabel v-model="form.plan" plan="basic" title="Plan Basic" price="9.99" />
+        <CardLabel v-model="form.plan" plan="pro" title="Plan Pro" price="19.99" />
+    </div>
+</x-splade-form>
+```
+
+## Renderless Vue component
+
+Vue also supports renderless components, which don't include a *template* section. So in the example below, the `total` value will be updated whenever the `price` or `amount` value change.
+
+```blade
+<x-splade-form>
+    <Calculator :form="form">
+        <x-splade-input label="Price" name="price" />
+        <x-splade-input label="Amount" name="amount" />
+        <x-splade-input label="Total" name="total" disabled />
+    </Calculator>
+</x-splade-form>
+```
+
+We'll pass the `form` object to the Vue component again and then set up watchers for the `price` and `amount` values, which will call the `updateTotal` method:
+
+```vue
+<script>
+export default {
+    props: {
+        form: Object,
+    },
+
+    watch: {
+        "form.amount"() {
+            this.updateTotal();
+        },
+        "form.price"() {
+            this.updateTotal();
+        },
+    },
+
+    methods: {
+        updateTotal() {
+            this.form.total = this.form.price && this.form.amount
+                ? this.form.price * this.form.amount
+                : 0;
+        },
+    },
+
+    render() {
+        return this.$slots.default({});
+    },
+};
+</script>
+```
\ No newline at end of file
diff --git a/custom-vue-components.md b/custom-vue-components.md
index d81aa53..0e63975 100644
--- a/custom-vue-components.md
+++ b/custom-vue-components.md
@@ -60,6 +60,29 @@ Now you may use the component in a Blade template:
 </x-layout>
 ```
 
+## Async Components
+
+When you register components in the main `app.js`, like in the example above, the components will end up in the `app.js` bundle when you build the assets for production use. You may also use *dynamic imports*, which will only load a component from the server when needed. Vue has a [built-in](https://vuejs.org/guide/components/async.html) `defineAsyncComponent` function to accomplish this.
+
+```js
+import { createApp } from "vue/dist/vue.esm-bundler.js";  // [tl! remove]
+import { createApp, defineAsyncComponent } from "vue/dist/vue.esm-bundler.js";  // [tl! add]
+
+import Counter from "./Components/Counter.vue";  // [tl! remove]
+
+createApp({
+    render: renderSpladeApp({ el })
+})
+    .use(SpladePlugin, {
+        "max_keep_alive": 10,
+        "transform_anchors": false,
+        "progress_bar": true
+    })
+    .component('Counter', Counter)   // [tl! remove]
+    .component('Counter', defineAsyncComponent(() => import("./Components/Counter.vue")))   // [tl! add]
+    .mount(el);
+```
+
 ## Passing data
 
 If you need to pass data to a Vue component (as a property), you may use the `@js` directive:
@@ -139,7 +162,7 @@ Now you can use the renderless Vue component in a Blade template, and use the `i
 <x-layout>
 ```
 
-Note that you can't use the `{{ counter.count }}` Vue syntax to echo out the count value, as the template is rendered first by the Blade engine, and Blade [uses the same syntax](https://laravel.com/docs/9.x/blade#blade-and-javascript-frameworks). You may use the `@` symbol to inform Blade the expression should remain untouched. This would result in `@{{ counter.count }}`. Though this works fine, using the `v-text` attribute seems neater.
+Note that you can't use the `{{ counter.count }}` Vue syntax to echo out the count value, as the template is rendered first by the Blade engine, and Blade [uses the same syntax](https://laravel.com/docs/10.x/blade#blade-and-javascript-frameworks). You may use the `@` symbol to inform Blade the expression should remain untouched. This would result in `@{{ counter.count }}`. Though this works fine, using the `v-text` attribute seems neater.
 
 You may also use the *destructuring assignment syntax* in the slot:
 
diff --git a/customization.md b/customization.md
index aa78577..075ee7e 100644
--- a/customization.md
+++ b/customization.md
@@ -3,7 +3,15 @@
 You can find every bit of styling in Blade templates, so you never have to customize Vue components. You may publish the Blade templates using the `vendor:publish` Artisan command:
 
 ```bash
-php artisan vendor:publish --provider="ProtoneMedia\Splade\ServiceProvider"
+php artisan vendor:publish --provider="ProtoneMedia\Splade\ServiceProvider" --tag="views"
 ```
 
-Now the templates are available in the `/resources/views/vendor/splade` folder.
\ No newline at end of file
+Now the templates are available in the `/resources/views/vendor/splade` folder. Only the styled templates are published. The strictly functional components (those without any markup or styling) will not be published, as there's nothing to customize.
+
+## Laravel Configuration File (config/splade.php)
+
+You may also publish the configuration file. This allows you to configure settings like the Blade Component prefix, SEO defaults, SSR settings, and more.
+
+```bash
+php artisan vendor:publish --provider="ProtoneMedia\Splade\ServiceProvider" --tag="config"
+```
\ No newline at end of file
diff --git a/event-bus.md b/event-bus.md
new file mode 100644
index 0000000..78c1d35
--- /dev/null
+++ b/event-bus.md
@@ -0,0 +1,67 @@
+# Event Bus
+
+Splade has a built-in **Event Bus** that allows for communication between components. Events can be emitted by one component, and listened for by another.
+
+## Emit from Vue component
+
+To emit an event, you may call the `emit` method, for example, in a [custom Vue component](/custom-vue-components.md), on the global `$splade` instance:
+
+```vue
+<script>
+export default {
+    methods: {
+        emitCheckoutEvent() {
+            this.$splade.emit('checkout');
+        }
+    },
+};
+</script>
+```
+
+If you're using the `setup` attribute on a `<script>` block, you may use [Vue's `inject` function](https://vuejs.org/guide/components/provide-inject.html#inject).
+
+```vue
+<script setup>
+import { inject } from "vue";
+
+const Splade = inject("$splade");
+
+function emitCheckoutEvent() {
+    Splade.emit('checkout');
+}
+</script>
+```
+
+Additionally, you may pass data along with the event:
+
+```js
+Splade.emit('checkout', { id: 1 });
+```
+
+## Emit on event
+
+It's also possible to call the `emit` method from another event. For example, [Bridge Components](/bridge-components.md) and the [Form Component](/x-form.md) emit `error` and `success` events that you can hook into:
+
+```blade
+<x-splade-form @error="$splade.emit('checkout-failed')">
+```
+
+## Listen for events
+
+You may register a listener by using the `on` method:
+
+```js
+this.$splade.on('checkout-failed', function() {
+    // do something
+});
+```
+
+When the callback is rather simple, you may use a [Script Component](/x-script.md) to avoid writing a custom Vue component:
+
+```blade
+<x-splade-script>
+    $splade.on('checkout-failed', function() {
+        // do something
+    });
+</x-splade-script>
+```
\ No newline at end of file
diff --git a/exception-handling.md b/exception-handling.md
new file mode 100644
index 0000000..22c1ea8
--- /dev/null
+++ b/exception-handling.md
@@ -0,0 +1,41 @@
+# Exception handling
+
+## Exceptions in PHP
+
+Splade uses a custom Exception Handler, registered in the `Exceptions/Handler.php` file by the [automatic installer](/automatic-installation.md).
+
+```php
+use ProtoneMedia\Splade\SpladeCore;
+
+class Handler extends ExceptionHandler
+{
+    public function register()
+    {
+        $this->renderable(SpladeCore::exceptionHandler($this));
+    }
+}
+```
+
+If you want to add a custom handler, you may pass a second argument with a closure to the `exceptionHandler()` method. This implementation is similar to Laravel's [default implementation](https://laravel.com/docs/10.x/errors#rendering-exceptions).
+
+```php
+SpladeCore::exceptionHandler($this, function (Throwable $e, Request $request) {
+    if ($e instanceof HttpException && $e->getStatusCode() === 419) {
+        return new RedirectResponse('/login?reason=timeout');
+    }
+});
+```
+
+## Exceptions in the browser (JavaScript/Vue)
+
+As Vue renders the templates in the browser, invalid markup might cause an error. The most common error is a missing HTML element, like a closing `</div>` tag. Unfortunately, Vue handles such errors differently in development and production mode. In development mode, Vue will throw an error in the console, but in production mode, Vue will silently fail and most likely render a blank page.
+
+Splade can mimic the development behavior in production mode to prevent rendering a blank page. Note that this will not fix the underlying issue, but it will at least show an error message in the browser console instead of showing a blank page. To enable this behavior, you need to update the plugin options in the main `app.js` file by setting the `suppress_compile_errors` option to `true`:
+
+```js
+createApp({ render: renderSpladeApp({ el }) })
+    .use(SpladePlugin, {
+        'suppress_compile_errors': true,
+    })
+    .mount(el);
+```
\ No newline at end of file
diff --git a/form-builder-fields.md b/form-builder-fields.md
new file mode 100644
index 0000000..4f2577c
--- /dev/null
+++ b/form-builder-fields.md
@@ -0,0 +1,283 @@
+# Form Builder Fields
+
+Here's an overview of all fields that are available in the [Form Builder](/form-builder-overview.md).
+
+## Text Input Field
+
+Renders an [Input Component](/form-input.md).
+
+```php
+Input::make('name')
+    ->label('Enter your name')
+    ->rules('required', 'max:255')
+    ->help('I need somebody!')
+    ->placeholder('John Doe')
+    ->minLength(2)
+    ->maxLength(255);
+
+// or:
+
+Text::make('name');
+```
+
+You may also define the validation rules as an array or a piped string:
+
+```php
+Input::make('text')
+    ->rules(['required', 'max:255'])
+    ->rules('required|max:255');
+```
+
+There are some additional methods that you may call on the field:
+
+```php
+Input::make('text')
+    ->append('@splade.dev')    // Appends a text to the field
+    ->prepend('www.')          // Prepends a text to the field
+    ->placeholder('Text')      // Placeholder value for the field
+    ->disabled()               // Disables an input field
+    ->readonly()               // Makes an input read-only
+    ->class('w-1/2')           // Add additional classes to the field
+
+    ->attributes(['data-custom' => 'foo']);     // Add additional attributes
+```
+
+### Hidden Field
+
+```php
+Hidden::make('hidden_field');
+
+// or:
+
+Input::make('hidden_field')->hidden();
+```
+
+### Number
+
+```php
+Number::make('number')
+    ->label('Number input')
+    ->minValue(1)
+    ->maxValue(100)
+    ->unsigned(), // alias for ->minValue(0)
+    ->step(0.01);
+```
+
+### Email
+
+```php
+Email::make('email');
+
+// or:
+
+Input::make('email')->email();
+```
+
+### Passwords
+
+```php
+Password::make('password');
+
+// or:
+
+Input::make('password')->password();
+```
+
+## Colorpicker
+
+```php
+Color::make('color');
+
+// or:
+
+Input::make('color')->color();
+```
+
+## Textarea
+
+Renders a [Textarea Component](/form-textarea.md).
+
+```php
+Textarea::make('textarea')->autosize();
+```
+
+## Date and Time
+
+Renders an [Input Component](/form-input.md) with Flatpickr.js integation.
+
+### Date
+
+```php
+Date::make('date');
+
+Date::make('date')->date(['showMonths' => 2]);  // Flatpickr options
+```
+
+### Time
+
+```php
+Time::make('time');
+
+Time::make('time')->time(['time_24hr' => false]);   // Flatpickr options
+```
+
+### Datetime
+
+```php
+Datetime::make('datetime');
+```
+
+## Files
+
+Renders an [File Component](/form-file.md) with optional Filepond integation.
+
+```php
+File::make('photo')
+    ->multiple() // Enables selecting multiple files
+    ->filepond() // Enables filepond
+    ->accept('image/jpeg')
+    ->accept(['image/png', 'image/jpeg']);
+```
+
+Additional Filepond configuration:
+
+```php
+File::make('photo')
+    ->filepond()
+    ->server()   // Enables asynchronous uploads of files
+    ->preview()  // Show image preview
+
+    ->minSize('1Mb')
+    ->maxSize('10Mb')
+
+    ->width(120)
+    ->height(120)
+
+    ->minWidth(150)
+    ->maxWidth(500)
+
+    ->minHeight(150)
+    ->maxHeight(500)
+
+    ->minResolution(150)
+    ->maxResolution(99999)
+```
+
+## Checkboxes
+
+Renders a [Checkbox Component](/form-checkbox.md).
+
+Checkboxes can be defined as separate fields:
+
+```php
+Checkbox::make('options[]')->label('Checkbox 1')->value('checkbox-1');
+Checkbox::make('options[]')->label('Checkbox 2')->value('checkbox-2');
+```
+
+Or as an options array:
+
+```php
+Checkboxes::make('options')
+    ->label('Choose your options')
+    ->options([
+        'option-1' => 'Option 1',
+        'option-2' => 'Option 2',
+        'option-3' => 'Option 3',
+    ])
+    ->inline(); // inline is optional
+```
+
+## Radios
+
+Renders a [Radio Component](/form-radio.md).
+
+Radios can be defined as separate inputs:
+
+```php
+Radio::make('option')->label('Radio 1')->value('radio-1'),
+Radio::make('option')->label('Radio 2')->value('radio-2'),
+Radio::make('option')->label('Radio 3')->value('radio-3')->help('I need somebody!'),
+```
+
+Or as an array:
+
+```php
+Radios::make('theme')
+    ->label('Choose a theme')
+    ->options([
+        'dark' => 'Dark theme',
+        'light' => 'Light theme',
+        'system' => 'System theme',
+    ])
+    ->inline(); // inline is optional
+```
+
+## Selects
+
+Renders a [Select Component](/form-select.md).
+
+```php
+$options = [
+    'be' => 'Belgium',
+    'de' => 'Germany',
+    'fr' => 'France',
+    'lu' => 'Luxembourg',
+    'nl' => 'The Netherlands',
+];
+
+Select::make('country')
+    ->label('Choose a country')
+    ->options($options);
+
+Select::make('countries[]')
+    ->label('Choose multiple countries')
+    ->options($options)
+    ->multiple()    // Enables choosing multiple options
+    ->choices();    // Enables the Choices.js integration
+
+Select::make('countries[]')
+    ->options($options)
+    ->multiple()
+    ->choices(['searchEnabled' => false]);  // Pass Choices.js options
+
+Select::make('user')
+    ->label('Select with data from a remote URL')
+    ->remoteUrl('/api/users');
+
+Select::make('user')
+    ->label('Select with data from a remote URL with a remote root')
+    ->remoteUrl('/api/users')
+    ->remoteRoot('data.users')
+    ->optionLabel('name')
+    ->optionValue('id');
+
+Select::make('user')
+    ->label('Select with Option Label and Value')
+    ->options([
+        ['user_id' => 10, 'user_name' => 'John'],
+        ['user_id' => 20, 'user_name' => 'Jane'],
+        ['user_id' => 30, 'user_name' => 'Mary'],
+        ['user_id' => 40, 'user_name' => 'Peter'],
+    ])
+    ->optionLabel('user_name')
+    ->optionValue('user_id');
+```
+
+## Submit
+
+Renders a [Submit Component](/form-submit.md).
+
+```php
+Submit::make()->label('Send')
+```
+
+### Button
+
+```php
+Button::make('close_button')
+    ->label('Close Modal')
+    ->attributes(['@click.prevent' => 'form.restore'])
+    ->danger()  // optional
+    ->secondary();  // optional
+```
+
diff --git a/form-builder-overview.md b/form-builder-overview.md
new file mode 100644
index 0000000..c884099
--- /dev/null
+++ b/form-builder-overview.md
@@ -0,0 +1,303 @@
+---
+description: Splade has an advanced Form Builder that enables you to build forms from your controllers instead of in your templates.
+keywords: laravel form, laravel forms, laravel formbuilder
+---
+
+# Form Builder
+
+Splade has an advanced Form Builder that enables you to build forms from your controllers instead of in your templates. Check out the [Form Components](/form-overview.md) section to learn more about Splade's form capabilities.
+
+## Basic example
+
+You may use the `SpladeForm` class to configure the form.
+
+```php
+<?php
+
+namespace App\Http\Controllers;
+
+use ProtoneMedia\Splade\FormBuilder\Input;
+use ProtoneMedia\Splade\FormBuilder\Password;
+use ProtoneMedia\Splade\FormBuilder\Submit;
+use ProtoneMedia\Splade\SpladeForm;
+
+class UsersController
+{
+    public function create()
+    {
+        $form = SpladeForm::make()
+            ->action(route('users.store'))
+            ->fields([
+                Input::make('name')->label('User Name'),
+                Password::make('password')->label('Password'),
+                Submit::make()->label('Create'),
+            ]);
+
+        return view('users.create', [
+            'form' => $form,
+        ]);
+    }
+}
+```
+
+Then in the Blade template, you must pass the form to the `for` attribute. That's it!
+
+```blade
+<x-splade-form :for="$form" />
+```
+
+Besides the `action()` and `fields()` methods, there are additional methods to configure the form:
+
+```php
+SpladeForm::make()
+    ->id('create-user-form')
+    ->class('space-y-4')
+    ->method('POST');
+```
+
+To show a confirmation dialog before Splade submits the form, simply use the `confirm()` method. You may customize the confirmation dialog as well.
+
+```php
+SpladeForm::make()->confirm();
+
+SpladeForm::make()->confirm(
+    confirm: 'Delete user',
+    text: 'Are you sure you want to delete this user?',
+    confirmButton: 'Delete',
+    cancelButton: 'Cancel',
+    danger: true,
+    requirePassword: true,
+);
+```
+
+Instead of requiring a password using the `confirm()` method, you may also use the dedicated `requirePassword()` method:
+
+```php
+SpladeForm::make()->requirePassword();
+
+SpladeForm::make()->requirePassword(
+    requirePasswordOnce: false,
+    heading: 'Please enter your password',
+    text: 'Please confirm your password before continuing',
+    confirmButton: 'Confirm',
+    cancelButton: 'Cancel',
+    danger: false
+);
+```
+
+### Passing default data
+
+You may use the `fill` method to provide a set of default data to the form:
+
+```php
+$project = Project::firstOrFail();
+
+SpladeForm::make()
+    ->fields([...])
+    ->fill($project);
+```
+
+Note that the Eloquent attributes are passed to the frontend, so be careful with sensitive attributes. By default, it only passes the attributes to the frontend that you use in the fields. You may use a [Transformer](/transformers.md) to help you safely pass data to the frontend. Also, check out the [Model Binding Attributes](/form-model-binding-attributes.md) section.
+
+## Form Class
+
+Instead of using an *inline* `SpladeForm` in the controller, you may also use a dedicated class. There's an Artisan command to generate a Form class:
+
+```bash
+php artisan make:form CreateUserForm
+```
+
+You'll find the new Form class in the `app/Forms` folder. You may use this class in the controller instead of the *inline* instance:
+
+```php
+use App\Forms\CreateUserForm;
+
+return view('users.create', [
+    'form' => $form,      // [tl! remove]
+    'form' => CreateUserForm::class,      // [tl! add]
+]);
+```
+
+The generated `CreateUserForm` will have a `configure()` and `fields()` method:
+
+```php
+<?php
+
+namespace App\Forms;
+
+use ProtoneMedia\Splade\AbstractForm;
+use ProtoneMedia\Splade\FormBuilder\Input;
+use ProtoneMedia\Splade\FormBuilder\Password;
+use ProtoneMedia\Splade\FormBuilder\Submit;
+use ProtoneMedia\Splade\SpladeForm;
+
+class CreateUserForm extends AbstractForm
+{
+    public function configure(SpladeForm $form)
+    {
+        $form->action(route('users.store'));
+    }
+
+    public function fields(): array
+    {
+        return [
+            Input::make('name')->label('User Name'),
+            Password::make('password')->label('Password'),
+            Submit::make()->label('Create'),
+        ];
+    }
+}
+```
+
+### Validation
+
+You may pass validation rules to the fields using the `rules()` method:
+
+```php
+Input::make('name')->rules('required', 'max:255');
+
+// or:
+
+Input::make('name')->rules(['required', 'max:255']);
+
+// or:
+
+Input::make('name')->rules('required|max:255');
+```
+
+There's a `required()` helper method that adds the *required* rule to the field:
+
+```php
+Input::make('name')->required();
+```
+
+You may gather all rules using the static `rules()` method on the form class, which you can use in the controller to validate an incoming request:
+
+```php
+public function store(Request $request)
+{
+    $data = $request->validate(CreateUserForm::rules());
+}
+```
+
+Alternatively, you may call the `validate()` method on the form instance. This works great with a type-hinted form variable:
+
+```php
+public function store(Request $request, CreateUserForm $form)
+{
+    $data = $form->validate($request);
+}
+```
+
+### Asterisk on required fields
+
+Splade can automatically add an asterisk to required fields. You may enable this feature by setting the `blade.asterisk_on_required_form_elements` key in the `splade.php` [configuration file](/customization.md) to `true`.
+
+### Using Form Requests
+
+Instead of validating the request in the controller, you may also use Laravel's [Form Requests](https://laravel.com/docs/10.x/validation#form-request-validation) feature. To may use the form's validation rules in the Form Request, and to make it even more seamless, there's an Artisan command to generate a Form Request class:
+
+```bash
+php artisan make:form-request CreateUserFormRequest --form=CreateUserForm
+```
+
+Alternatively, you can generate both at once using `-r` or `--request` option on the `make:form` command:
+
+```bash
+php artisan make:form CreateUserForm --request
+```
+
+This will generate a Form Request with the `rules()` method already implemented:
+
+```php
+<?php
+
+namespace App\Http\Requests;
+
+use App\Forms\CreateUserForm;
+use Illuminate\Foundation\Http\FormRequest;
+
+class CreateUserFormRequest extends FormRequest
+{
+    public function rules()
+    {
+        return CreateUserForm::rules();
+    }
+}
+```
+
+### Extending Form classes
+
+Instead of providing the class name, you may also use an instance of the form using the `make()` method. This allows you to add additional fields to the form:
+
+```php
+return view('users.create', [
+    'form' => CreateUserForm::make()->fields([
+        Text::make('additional_field')->label('This is an additional field'),
+    ]),
+]);
+```
+
+## Extending Form Fields
+
+All Form Fields are *macroable*, allowing you to easily add new methods:
+
+```php
+use ProtoneMedia\Splade\FormBuilder\Input;
+
+Input::macro('autocomplete', function ($value) {
+    return $this->attributes(['autocomplete' => $value]);
+});
+
+Input::make('password')->autocomplete('current-password');
+```
+
+## Frontend behavior
+
+In addition to configuring the form, fields, rules, and filled data, you may also configure its frontend behavior:
+
+### Prevent navigation on submit
+
+You may instruct Splade to stay on the same page after a successful request:
+
+```php
+SpladeForm::make()->stay();
+```
+
+In additional, you may specify to reset or restore the form on success:
+
+```php
+SpladeForm::make()->stay(actionOnSuccess: 'reset');
+SpladeForm::make()->stay(actionOnSuccess: 'restore');
+```
+
+### Preserve Scroll
+
+When you stay on the same page after a succesful request, you may prevent the page from scrolling to the top:
+
+```php
+SpladeForm::make()->stay()->preserveScroll();
+```
+
+### Submit on change
+
+You may watch form values, and automatically submit the form on changes.
+
+```php
+SpladeForm::make()->submitOnChange(watchFields: 'theme');
+
+// or:
+
+SpladeForm::make()->submitOnChange(watchFields: ['theme', 'scale']);
+```
+
+You may omit the fields to watch all fields, as well as customize the debounce value and performing the request in the background:
+
+```php
+SpladeForm::make()->submitOnChange();
+SpladeForm::make()->submitOnChange(background: true);
+SpladeForm::make()->submitOnChange(debounce: 1000);
+```
+
+> **Warning**
+> The `submitOnChange()` method will not show a confirmation or password dialog.
\ No newline at end of file
diff --git a/form-checkbox.md b/form-checkbox.md
index 0a7ac85..980f491 100644
--- a/form-checkbox.md
+++ b/form-checkbox.md
@@ -1,9 +1,15 @@
 # X-Splade-Checkbox Component
 
-The **Checkbox Component** has a default value of `1`, but you may customize it with the `value` attribute:
+The **Checkbox Component** has a default value of `true`, but you may customize it with the `value` attribute:
 
 ```blade
-<x-splade-checkbox name="newsletter" value="mailchimp" label="Subscribe to newsletter" />
+<x-splade-checkbox name="newsletter" value="1" label="Subscribe to newsletter" />
+```
+
+The default `true` value works great if you use the `boolean` type [Attribute Casting](https://laravel.com/docs/10.x/eloquent-mutators#attribute-casting) in Eloquent Models. Accordingly, the *unchecked* value is `false`, but you may customize it with the `false-value` attribute:
+
+```blade
+<x-splade-checkbox name="newsletter" value="yes" false-value="no" label="Subscribe to newsletter" />
 ```
 
 If you have a fieldset of multiple checkboxes, you can group them with the `x-splade-group` component. A group is a great way to handle the validation of arrays. If you disable the errors on the individual checkboxes, it will show the validation errors once. The [group component](/form-group.md) has a `show-errors` attribute that defaults to `true`.
diff --git a/form-custom.md b/form-custom.md
new file mode 100644
index 0000000..9c3f329
--- /dev/null
+++ b/form-custom.md
@@ -0,0 +1,3 @@
+# Custom Form components
+
+You can build custom form components with either Blade or Vue. Check out the [extensive guide](/custom-form-components.md)!
\ No newline at end of file
diff --git a/form-file.md b/form-file.md
index 2cdd4c9..5d3b15c 100644
--- a/form-file.md
+++ b/form-file.md
@@ -1,3 +1,9 @@
+---
+description: The Splade File component can display the selected file and integrates with FilePond and Spatie's Media Library. It supports handling existing files, reordering files, async uploads, and image validation.
+
+keywords: laravel file upload, laravel filepond, filepond spatie media library, filepond file manager, laravel file manager, laravel image library, laravel async upload, laravel image preview, laravel multiple file upload
+---
+
 # X-Splade-File Component
 
 The **File Component** is a dedicated component you can use to select files. This component is based mainly on the [Input component](/form-input.md) but provides additional logic to display the filename of the selected file. You don't have to manually use the input event to bind the selected files to the form. Splade does this for you.
@@ -12,6 +18,353 @@ The component supports selecting multiple files as well by adding the `multiple`
 
 ```blade
 <x-splade-form :default="['documents' => []]">
-    <x-splade-file name="documents" multiple />
+    <x-splade-file name="documents[]" multiple />
+</x-splade-form>
+```
+
+## Image preview
+
+You might want to show a preview of the selected image. You may use the `form.$fileAsUrl` method to generate a *base64-encoded* representation of the image, and use it as the source of an `img` element. In addition, with the `show-filename` attribute, you can disable displaying the filename.
+
+```blade
+<x-splade-form>
+    <x-splade-file name="avatar" :show-filename="false" />
+
+    <img v-if="form.avatar" :src="https://github.com/form.$fileAsUrl('avatar')" />
+ </x-splade-form>
+ ```
+
+## FilePond
+
+The [FilePond](https://pqina.nl/filepond/) integration comes with a default stylesheet which you should import into the main JavaScript file. If you've used the automatic installer, it has already done this for you.
+
+```js
+import "@protonemedia/laravel-splade/dist/style.css";
+import { renderSpladeApp, SpladePlugin } from "@protonemedia/laravel-splade";
+```
+
+Now you may add the `filepond` attribute to the component:
+
+```blade
+<x-splade-file name="avatar" filepond />
+```
+
+This works for uploading multiple files as well:
+
+```blade
+<x-splade-file name="avatars[]" multiple filepond />
+```
+
+You can instantiate FilePond with a [custom set of options](https://pqina.nl/filepond/docs/api/instance/properties/) by passing a *JavaScript* object to the `filepond` attribute. To pass a PHP array, you may use the `:filepond` attribute (note the colon).
+
+```blade
+<x-splade-file name="avatar" filepond="{ allowDrop: false }" />
+
+<x-splade-file name="avatar" :filepond="['allowDrop' => false]" />
+```
+
+### Image Preview
+
+FilePond can render a downscaled preview of the selected image by adding the `preview` attribute to the component:
+
+```blade
+<x-splade-file name="avatar" filepond preview />
+```
+
+### Validate type and size
+
+FilePond supports validating the selected file based on the type and size. To validate the type, you may use the `accept` attribute:
+
+```blade
+<x-splade-file name="avatar" filepond accept="image/png" />
+```
+
+You may use the `min-size` or `max-size` attribute to validate the file size. You may use both attributes at once as well:
+
+```blade
+<x-splade-file name="avatar" filepond min-size="100KB" max-size="5MB" />
+```
+
+Please be aware that both features are *client-side* validation. For security reasons, make sure you use [server-side validation](https://laravel.com/docs/10.x/validation#validating-files) as well.
+
+### Validate images
+
+FilePond supports validating the dimensions of a selected image. For example, you may use the `min-width` and `min-height` attributes to validate the minimum width and height. Similarly, to validate the maximum width and height, you may use the `max-width` and `max-height` attributes:
+
+```blade
+<x-splade-file name="avatar" filepond min-width="200" min-height="200" />
+
+<x-splade-file name="header" filepond max-width="1500" max-height="1500" />
+```
+
+If you want to validate against an exact size, you may use the `width` and `height` attributes:
+
+```blade
+<x-splade-file name="poster" filepond width="720" height="576" />
+```
+
+Alternatively, you may specify a minimum or maximum resolution:
+
+```blade
+<x-splade-file name="avatar" filepond :min-resolution="300 * 300" />
+
+<x-splade-file name="header" filepond :max-resolution="1500 * 1200" />
+```
+
+### Adding remote files
+
+FilePond can upload a file using a Remote URL. The `form` object has an `$addFile` method that allows you to pass a URL to a FilePond instance. You must pass the *field* as the first argument and the *URL* as the second argument. In the example below, we'll use a regular input element to set the Remote URL:
+
+```blade
+<x-splade-form>
+    <x-splade-file filepond server name="avatar" />
+
+    <x-splade-input name="remote_url" label="Remote URL" />
+
+    <button @click.prevent="form.$addFile('avatar', form.remote_url)">
+        Add from Remote URL
+    </button>
+</x-splade-form>
+```
+
+If you need to add multiple files at once, you may use the `$addFiles` method, which accepts an array as a second argument.
+
+### Asynchronous uploads
+
+FilePond supports uploading the file to the server before the form is submitted. First, you must register a supporting route using the `spladeUploads()` method on the `Route` facade. As of version 0.7.6, the automatic installer does this for you. If you need to register the route manually, make sure it uses the `web` Middleware, for example, in `web.php`:
+
+```php
+Route::spladeUploads();
+```
+
+Next, in the template, add the `server` attribute to the component. From now on, when a user drops a file into the FilePond instance, it will immediately start uploading to the server.
+
+```blade
+<x-splade-file name="avatar" filepond server />
+```
+
+Splade will store the file in a temporary directory and report the path to the file back to the File component. So when the user submits the form, it will send this path instead of uploading the file.
+
+There are three ways of handling the temporary upload. You may choose the option that best fits your needs. First, you may use the `HandleSpladeFileUploads` class, for example, in your controller:
+
+```php
+use Illuminate\Http\Request;
+use ProtoneMedia\Splade\FileUploads\HandleSpladeFileUploads;    // [tl! add]
+
+public function store(Request $request)
+{
+    HandleSpladeFileUploads::forRequest($request);  // [tl! add]
+
+    $request->validate([
+        'photo' => ['required', 'file', 'image'],
+    ]);
+
+    $path = $request->file('photo')->store('images');
+}
+```
+
+The `HandleSpladeFileUploads` class will loop through the request data and transform paths to temporary uploads back into `UploadedFile` instances. Make sure you call the `forRequest()` method *before* validating the request. Instead of looping through all request data, you may also pass the key (or an array of keys):
+
+```php
+HandleSpladeFileUploads::forRequest($request, 'photo');
+```
+
+The second option is to use a Route Middleware. You may use the same `HandleSpladeFileUploads` class as the example above. Using the *fully qualified class name* will loop through all request data, but you may also specify one or more keys using the static `for` method.
+
+```php
+Route::post('podcast', StorePodcastController::class)
+    ->middleware(HandleSpladeFileUploads::class);   // [tl! add]
+
+Route::post('podcast', StorePodcastController::class)
+    ->middleware(HandleSpladeFileUploads::for('photo'));    // [tl! add]
+```
+
+The last option is to use a [Form Request](https://laravel.com/docs/10.x/validation#form-request-validation). Then, you only have to implement the `HasSpladeFileUploads` interface and use the `file` validation rule. Splade will automatically extract the keys from the rules.
+
+```php
+use Illuminate\Foundation\Http\FormRequest;
+use ProtoneMedia\Splade\FileUploads\HasSpladeFileUploads;   // [tl! add]
+
+class StorePodcastRequest extends FormRequest implements HasSpladeFileUploads   // [tl! add]
+{
+    public function rules()
+    {
+        return [
+            'photo' => 'required|file|image',
+        ];
+    }
+}
+```
+
+### Cleanup temporary uploads
+
+It may happen that temporarily uploaded files are not being used and will fill the temporary directory. Splade comes with a built-in Artisan command to delete all unused files that are older than one hour:
+
+```bash
+php artisan splade:cleanup-uploads
+```
+
+You may change the lifetime of temporary files with the `file_uploads.temporary_file_lifetime` key in the `splade.php` [configuration file](/customization.md).
+
+### Custom temporary directory
+
+By default, Splade uses the `/storage/splade-temporary-file-uploads` directory for temporary uploads. If you want to use a custom [Filesystem disk](https://laravel.com/docs/10.x/filesystem#configuration), you may update the `file_uploads.disk` key in the `splade.php` [configuration file](/customization.md). For now, it only supports local disks.
+
+### Customize FilePond styling
+
+FilePond uses an *SCSS* stylesheet to style the library. Our stylesheet extends the vendor stylesheet (of FilePond) and adds some Tailwind-specific tweaks. Make sure your bundler handles SCSS stylesheets correctly, for example, by installing `sass`. The `splade:publish-form-stylesheets` Artisan command copies the stylesheet to the `resources` directory of your app.
+
+```bash
+npm install sass -D
+
+php artisan splade:publish-form-stylesheets
+```
+
+Then import the stylesheet in your main JavaScript file (instead of the default `@protonemedia/laravel-splade/dist/style.css` stylesheet):
+
+```js
+import "../css/filepond.scss"
+```
+
+## Working with existing files
+
+FilePond allows you to show existing files in the UI. Splade comes with a set of tools to help you present and preserve existing files. Imagine you use the file input to replace a user's avatar while still showing the current one. You may use the `ExistingFile` class to load the current avatar:
+
+```php
+use ProtoneMedia\Splade\FileUploads\ExistingFile;
+
+$avatar = ExistingFile::fromDisk('public')->get('avatars/user.jpeg');
+```
+
+Then in the Blade template, you may use the `ExistingFile` instance as default form data:
+
+```blade
+<x-splade-form :default="['avatar' => $avatar]">
+    <x-splade-file filepond preview name="avatar" />
+    <x-splade-submit />
+</x-splade-form>
+```
+
+If you submit the form *without* changing the avatar, the `avatar` field will be empty, but Splade will submit an `avatar_existing` field to inform you the current avatar hasn't changed. When you access that key from the `Request` instance, it will give you an instance of `ExistingFile` again:
+
+```php
+public function update(Request $request)
+{
+    HandleSpladeFileUploads::forRequest($request);
+
+    // This is an instance of ExistingFile:
+    $existingAvatar = $request->avatar_existing;
+}
+```
+
+### Multiple existing files
+
+You may also use multiple existing files with a file input that allows uploading multiple files. For example, instead of passing one instance of `ExistingFile`, you may now use an array:
+
+```php
+$photos = [
+    ExistingFile::fromDisk('public')->get('photos/1.jpeg'),
+    ExistingFile::fromDisk('public')->get('photos/2.jpeg'),
+];
+```
+
+Luckily, the `get` method also accepts an array:
+
+```php
+$photos = ExistingFile::fromDisk('public')->get([
+    'photos/1.jpeg',
+    'photos/2.jpeg',
+]);
+```
+
+Just like using a single existing file as default form data, you may do the same for multiple files:
+
+```blade
+<x-splade-form :default="['photos' => $photos]">
+    <x-splade-file filepond multiple preview name="photos[]" />
+    <x-splade-submit />
 </x-splade-form>
-```
\ No newline at end of file
+```
+
+The user may submit the form with existing and new files when dealing with multiple files. In addition, FilePond allows the user to reorder the files as well. So how would you handle such forms in the controller? Like the avatar example, Splade will submit a `photos` array with new files and a `photos_existing` array with the existing files. Additionally, the request data will have a `photos_order` key representing the order, as a user can mix existing and new files.
+
+You can combine existing and new files with their order manually. However, Splade comes with a `orderedSpladeFileUploads()` method that you may call on a `Request` instance. This method returns a `Collection` with `SpladeFile` instances. The files are already in the correct order, and have helper methods like `exists()` and `doesntExist()` to determine the file's nature.
+
+```php
+use ProtoneMedia\Splade\FileUploads\SpladeFile;
+
+public function update(Request $request)
+{
+    $request->orderedSpladeFileUploads('photos')->each(function (SpladeFile $file) {
+        if ($file->exists()) {
+            // This is an instance of ExistingFile:
+            $file->existing;
+        }
+
+        if ($file->doesntExist()) {
+            // This is an instance of UploadedFile:
+            $file->upload;
+        }
+    })
+}
+```
+
+### Spatie Media Library
+
+The FilePond integration has built-in support for [Spatie's Media Library package](https://spatie.be/docs/laravel-medialibrary/v10/introduction). The `ExampleFile` class has a helper method to load media collections. Instead of loading a collection, it also works with the `getFirstMedia()` method.
+
+```php
+ExistingFile::fromMediaLibrary($model->getMedia());
+```
+
+Additionally, you may specify the [conversion name](https://spatie.be/docs/laravel-medialibrary/v10/converting-images/defining-conversions) that FilePond should use for a preview image. There's also support for customizing the expiration and options of the Temporary URL (S3 disk only).
+
+```php
+ExistingFile::fromMediaLibrary(
+    media: $model->getMedia(),
+    previewConversionName: 'thumb',
+    previewUrlExpiration: now()->addMinutes(15),
+    previewUrlOptions: ['ResponseContentType' => 'application/octet-stream']
+);
+```
+
+Instead of using the `orderedSpladeFileUploads()` method and syncing the media collection, you may use the `syncMediaLibrary` method. This method will add and delete files and set the order. You must pass the `Request` instance, the Eloquent model that interacts with media (the subject), and the request key containing the files.
+
+```php
+public function update(Request $request)
+{
+    $user = $request->user();
+
+    HandleSpladeFileUploads::syncMediaLibrary($request, $user, 'photos');
+}
+```
+
+Optionally, there's a fourth and fifth argument to customize the name of the media collection and the name of the disk:
+
+```php
+HandleSpladeFileUploads::syncMediaLibrary(
+    request: $request,
+    subject: $user,
+    key: 'photos',
+    collectionName: 'photos',
+    diskName: 's3'
+);
+```
+
+### Additional helper methods
+
+To help you identify existing files, you may set an array with metadata:
+
+```php
+$existingFile->metadata(['id' => $template->id]);
+```
+
+To retrieve the metadata, you may call the `getMetadata()` method to get the array, or pass a key to retrieve a value:
+
+```php
+$allMetadata = $existingFile->getMetadata();
+
+$id = $existingFile->getMetadata('id');
+```
+
+Splade will automatically serialize Eloquent models and collections, and the metadata will be encrypted before it's passed to the Vue frontend.
\ No newline at end of file
diff --git a/form-input.md b/form-input.md
index 3d59f9a..f4e2445 100644
--- a/form-input.md
+++ b/form-input.md
@@ -95,4 +95,6 @@ Then import the stylesheet in your main JavaScript file (instead of the default
 
 ```js
 import "../css/flatpickr.styl"
-```
\ No newline at end of file
+```
+
+In a future Splade release, we'll work on migrating the *Stylus* stylesheet to a more Tailwind-friendly preprocessor (or plain CSS).
\ No newline at end of file
diff --git a/form-model-binding-attributes.md b/form-model-binding-attributes.md
index 61ee5db..be22bed 100644
--- a/form-model-binding-attributes.md
+++ b/form-model-binding-attributes.md
@@ -35,4 +35,6 @@ use ProtoneMedia\Splade\Components\Form;
 Form::guardWhen(function ($resource) {
     return $resource instanceof Model;
 });
-```
\ No newline at end of file
+```
+
+Also, check out the [Transformers](/transformers.md) section.
\ No newline at end of file
diff --git a/form-overview.md b/form-overview.md
index 11bdd82..10805a9 100644
--- a/form-overview.md
+++ b/form-overview.md
@@ -1,6 +1,6 @@
 # Form Components
 
-Splade comes with a set of **Form Components** to rapidly build forms. It supports model binding and validation, includes default styling, and is still fully customizable! It integrates with [Autosize](https://www.jacklmoore.com/autosize/) to automatically adjust textarea height, [Choices.js](https://github.com/Choices-js/Choices) to make selects searchable and taggable, and [Flatpickr](https://flatpickr.js.org) to provide a powerful datetime picker.
+Splade comes with a set of **Form Components** to rapidly build forms. It supports model binding and validation, includes default styling, and is still fully customizable! It integrates with [Autosize](https://www.jacklmoore.com/autosize/) to automatically adjust textarea height, [Choices.js](https://github.com/Choices-js/Choices) to make selects searchable and taggable, [Flatpickr](https://flatpickr.js.org) to provide a powerful datetime picker, [FilePond](https://pqina.nl/filepond/) for smooth file uploads, and [Jodit](https://xdsoft.net/jodit/) to provide a WYSIWYG editor.
 
 Available components:
 
@@ -12,6 +12,7 @@ Available components:
 * [Select](/form-select.md)
 * [Submit](/form-submit.md)
 * [Textarea](/form-textarea.md)
+* [Wysiwyg](/form-wysiwyg.md)
 
 <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/-utQsyibvZM?controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
@@ -25,11 +26,11 @@ All elements allow passing in a label, which will be rendered above the input el
 
     <x-splade-input name="username" :label="__('Username')" />
 
-    <x-splade-submit>
+    <x-splade-submit />
 </x-splade-form>
 ```
 
-If you want to eliminate the `splade` prefix, you may update the `blade.component_prefix` key in the `splade.php` configuration file:
+If you want to eliminate the `splade` prefix, you may update the `blade.component_prefix` key in the `splade.php` [configuration file](/customization.md):
 
 ```php
 return [
@@ -49,7 +50,7 @@ This will result in more readable `<x-form>`, `<x-input>`, and `<x-submit>` comp
 
 ## Model Binding
 
-To bind a resource to a form, for example, an [Eloquent Model](https://laravel.com/docs/9.x/eloquent), you may use the `default` attribute. Instead of using the `v-model` attribute on the input element, you may now use the `name` attribute. Splade will take care of the two-way binding with the User model.
+To bind a resource to a form, for example, an [Eloquent Model](https://laravel.com/docs/10.x/eloquent), you may use the `default` attribute. Instead of using the `v-model` attribute on the input element, you may now use the `name` attribute. Splade will take care of the two-way binding with the User model.
 
 ```blade
 <x-splade-form :default="$user">
@@ -81,4 +82,10 @@ By default, Splade scrolls to the first element with a validation error. You may
 <x-splade-form :scroll-on-error="false">
     ...
 </x-splade-form>
-```
\ No newline at end of file
+```
+
+Splade escapes Validation errors by default, so if you use raw HTML in one of your messages, Vue won't insert those as plain HTML. If you want to disable this behavior, set the `blade.escape_validation_messages` key in the `splade.php` [configuration file](/customization.md) to `false`. Only disable this on trusted content and never on user-provided content, as it may lead to XSS attacks.
+
+## Form Builder
+
+In addition to building forms in Blade templates, you may also build forms in PHP with the [Form Builder](/form-builder-overview.md).
diff --git a/form-select.md b/form-select.md
index e9646a3..a1bcf13 100644
--- a/form-select.md
+++ b/form-select.md
@@ -1,6 +1,6 @@
 # X-Splade-Select Component
 
-The **Select Component** can render the options based on an array, with support for groups.
+The **Select Component** can render the options based on a *key-value* array or `Collection`, with support for groups.
 
 ```php
 $countries = [
@@ -13,6 +13,12 @@ $countries = [
 <x-splade-select name="country_code" :options="$countries" />
 ```
 
+You may also pass a set of objects, like an Eloquent Collection, and specify the *value* and *label* keys for the option elements:
+
+```blade
+<x-splade-select name="company" :options="$companies" option-label="name" option-value="id" />
+```
+
 You can provide a slot to the select element as well:
 
 ```blade
@@ -75,7 +81,7 @@ Now you may add the `choices` attribute to the component:
 It works for selecting multiple values as well:
 
 ```blade
-<x-splade-select name="frameworks[]" :options="$frameworks" mulitple choices />
+<x-splade-select name="frameworks[]" :options="$frameworks" multiple choices />
 ```
 
 You can instantiate Choices.js with a [custom set of options](https://github.com/Choices-js/Choices#setup) by passing a *JavaScript* object to the `choices` attribute. To pass a PHP array, you may use the `:choices` attribute (note the colon).
@@ -104,9 +110,80 @@ Select::defaultChoices([
 ]);
 ```
 
+### Remote Options
+
+The component has support for loading the options using an asynchronous *ajax* request. For this, you may use the `remote-url` attribute:
+
+```blade
+<x-splade-select remote-url="/api/locations" />
+```
+
+Just like the regular pre-defined options, it supports objects as well:
+
+```blade
+<x-splade-select remote-url="/api/servers" option-label="ip" option-value="uuid" />
+```
+
+You might want to load the remote options from a nested dataset. In the example below, you want to extract the options from the `data.users` path.
+
+```json
+{
+    "data": {
+        "users": [
+            {
+                "id": 1,
+                "name": "John"
+            },
+            {
+                "id": 2,
+                "name": "Jane"
+            }
+        ]
+    }
+}
+```
+
+You may use the `remote-root` attribute to set a base path for the options:
+
+```blade
+<x-splade-select remote-url="/api/users" remote-root="data.users" option-label="name" option-value="id" />
+```
+
+### Dynamic Remote URL
+
+The `remote-url` attribute supports *Template literals*, making it perfect for building dependent selects:
+
+```blade
+<x-splade-select name="country" :options="$countries" />
+<x-splade-select name="region" remote-url="`/api/regions/${form.country}`" />
+```
+
+When the user selects a country, it will reload the regions based on the chosen country.
+
+When you're dealing with dynamic options, you probably don't know the option values beforehand. Therefore, you may instruct the component to automatically choose the first option of the freshly loaded options using the `select-first-remote-option` attribute:
+
+```blade
+<x-splade-select name="region" remote-url="`/api/regions/${form.country}`" select-first-remote-option />
+```
+
+Additionally, you may clear the selected option whenever the Remote URL changes using the `reset-on-new-remote-url` attribute:
+
+```blade
+<x-splade-select name="region" remote-url="`/api/regions/${form.country}`" reset-on-new-remote-url />
+```
+
+Both options can be configured to be applied by default. You may use the static methods on the `Select` class, for example, in the `AppServiceProvider` class:
+
+```php
+Select::defaultResetOnNewRemoteUrl();
+Select::defaultSelectFirstRemoteOption();
+```
+
+All remote options features work with the Choices.js integration as well. It doesn't support groups yet, but that's coming in a future version of Splade.
+
 ### Customize Choices.js styling
 
-Choices.js uses a *SCSS* stylesheet to style the library. Our stylesheet extends the vendor stylesheet (of Choices.js) and adds some Tailwind-specific tweaks. Make sure your bundler handles SCSS stylesheets correctly, for example, by installing `sass`. The `splade:publish-form-stylesheets` Artisan command copies the stylesheet to the `resources` directory of your app.
+Choices.js uses an *SCSS* stylesheet to style the library. Our stylesheet extends the vendor stylesheet (of Choices.js) and adds some Tailwind-specific tweaks. Make sure your bundler handles SCSS stylesheets correctly, for example, by installing `sass`. The `splade:publish-form-stylesheets` Artisan command copies the stylesheet to the `resources` directory of your app.
 
 ```bash
 npm install sass -D
@@ -118,4 +195,22 @@ Then import the stylesheet in your main JavaScript file (instead of the default
 
 ```js
 import "../css/choices.scss"
-```
\ No newline at end of file
+```
+
+### Laravel Dusk macro
+
+Splade has two macros that help you test Choices.js instances with [Laravel Dusk](https://laravel.com/docs/10.x/dusk). Instead of calling `select` with the *field* and *value* arguments, you may use the `choicesSelect` method:
+
+```php
+$browser->select('size', 'Large');  // [tl! remove]
+
+$browser->choicesSelect('size', 'Large');  // [tl! add]
+```
+
+If you want to remove an item from a Choices.js instance with multiple options, you may use the `choicesRemoveItem` method:
+
+```php
+$browser->choicesRemoveItem('countries[]', 'NL');
+```
+
+You may change the name of the macros with the `dusk.choices_select_macro` and `dusk.choices_remove_item_macro` keys in the `splade.php` [configuration file](/customization.md).
\ No newline at end of file
diff --git a/form-submit.md b/form-submit.md
index 08d257c..418be3c 100644
--- a/form-submit.md
+++ b/form-submit.md
@@ -3,7 +3,7 @@
 The **Submit Component** has a default label and spinner visible when processing the form. You may change the default text using the `label` attribute, and you may disable the spinner as well.
 
 ```blade
-<x-splade-submit label="Apply settings" :spinner="false" >
+<x-splade-submit label="Apply settings" :spinner="false" />
 ```
 
 You may also use a slot:
@@ -13,4 +13,12 @@ You may also use a slot:
     <svg>...</svg>
     <span>Send now</span>
 </x-splade-submit>
+```
+
+In addition to providing a custom template with a slot, you may change the styling of the default submit button with the `danger` or `secondary` attributes:
+
+```blade
+<x-splade-submit danger label="Remove account" />
+
+<x-splade-submit secondary label="Save for later" />
 ```
\ No newline at end of file
diff --git a/form-wysiwyg.md b/form-wysiwyg.md
new file mode 100644
index 0000000..4559782
--- /dev/null
+++ b/form-wysiwyg.md
@@ -0,0 +1,41 @@
+# X-Splade-Wysiwyg Component
+
+The **Wysiwyg Component** provides an integration for [Jodit Editor 3](https://xdsoft.net/jodit/). Since Jodit's stylesheet is quite large, it is not included in the Splade bundle by default. You may include it in your application by adding `jodit.css` to your main `app.js` file:
+
+```js
+import "./bootstrap";
+import "../css/app.css";
+import "@protonemedia/laravel-splade/dist/style.css";
+import "@protonemedia/laravel-splade/dist/jodit.css";  // [tl! add]
+
+import { createApp } from "vue/dist/vue.esm-bundler.js";
+import { renderSpladeApp, SpladePlugin } from "@protonemedia/laravel-splade";
+```
+
+Then you may use the component:
+
+```blade
+<x-splade-wysiwyg name="biography" />
+```
+
+## Configuration
+
+You can instantiate Jodit with a [custom set of options](https://xdsoft.net/jodit/docs/classes/config.Config.html) by passing a *JavaScript* object to the `jodit` attribute. To pass a PHP array, you may use the `:jodit` attribute (note the colon).
+
+```blade
+<x-splade-wysiwyg name="biography" jodit="{ showXPathInStatusbar: true }" />
+
+<x-splade-wysiwyg name="biography" :jodit="['showXPathInStatusbar' => true]" />
+```
+
+### Default settings
+
+Suppose you want to specify a default set of options for all Jodit instances. In that case, you may use the static `defaultJoditOptions` method on the `Wysiwyg` class, for example, in the `AppServiceProvider` class:
+
+```php
+use ProtoneMedia\Splade\Components\Form\Wysiwyg;
+
+Wysiwyg::defaultJoditOptions([
+    'showXPathInStatusbar' => true,
+]);
+```
diff --git a/how-splade-works.md b/how-splade-works.md
index 1cff9eb..0d2dbd3 100644
--- a/how-splade-works.md
+++ b/how-splade-works.md
@@ -12,7 +12,7 @@ Splade is super easy to use but rather complicated under the hood. Let's break d
 
 First, the Blade compiler will render the `x-data` component. This Blade component is essentially a wrapper around a corresponding Vue component. It understands that the given data (the default array) is *jsonable*, so it passes the data as a JSON-encoded string to the `SpladeData` Vue component as a property.
 
-```vue
+```blade
 <SpladeData :default="@js($data)">
     <template #default="data">
         <input v-model="data.name" />
diff --git a/index.json b/index.json
new file mode 100644
index 0000000..f16339d
--- /dev/null
+++ b/index.json
@@ -0,0 +1,79 @@
+{
+    "Introduction": {
+        "Introducing Splade": "introducing-splade",
+        "Credits": "credits",
+        "Automatic installation": "automatic-installation",
+        "Manual installation": "manual-installation",
+        "Breeze starter kit": "breeze",
+        "Jetstream starter kit": "jetstream",
+        "Upgrading": "upgrading",
+        "Roadmap": "roadmap"
+    },
+    "Basics": {
+        "Navigation and routing": "navigation-routing",
+        "Progress bar": "progress-bar",
+        "Toasts": "toasts",
+        "Shared data": "shared-data",
+        "Title and meta tags": "title-meta",
+        "Transformers": "transformers",
+        "Lazy loading": "lazy-loading",
+        "Server-side rendering (SSR)": "ssr"
+    },
+    "Components": {
+        "Content": "x-content",
+        "Data": "x-data",
+        "Defer": "x-defer",
+        "Errors": "x-errors",
+        "Event": "x-event",
+        "Flash": "x-flash",
+        "Form": "x-form",
+        "Link": "x-link",
+        "Modal": "x-modal",
+        "Rehydrate": "x-rehydrate",
+        "Script": "x-script",
+        "State": "x-state",
+        "Teleport": "x-teleport",
+        "Toggle": "x-toggle",
+        "Transition": "x-transition",
+        "Custom components": "form-custom"
+    },
+    "Form components": {
+        "Overview": "form-overview",
+        "Input": "form-input",
+        "Textarea": "form-textarea",
+        "Select": "form-select",
+        "Checkbox": "form-checkbox",
+        "Radio": "form-radio",
+        "File": "form-file",
+        "Group": "form-group",
+        "Submit": "form-submit",
+        "Wysiwyg (Jodit)": "form-wysiwyg",
+        "Model Binding": "form-model-binding-attributes"
+    },
+    "Form Builder": {
+        "Overview": "form-builder-overview",
+        "Available fields": "form-builder-fields"
+    },
+    "Table component": {
+        "Overview": "table-overview",
+        "Built-in Query Builder": "table-query-builder",
+        "Bulk Actions": "table-bulk-actions",
+        "Exports": "table-exports",
+        "Spatie Query Builder": "table-spatie-query-builder"
+    },
+    "Vue components and libraries": {
+        "Custom components": "custom-vue-components",
+        "Vue libraries": "using-vue-libraries",
+        "Form components": "custom-form-components"
+    },
+    "Advanced": {
+        "State management": "state-management",
+        "Persistent layout": "persistent-layout",
+        "Event bus": "event-bus",
+        "Bridge Components (Beta)": "bridge-components",
+        "Customization": "customization",
+        "Translations": "translations",
+        "Exception handling": "exception-handling",
+        "How Splade works": "how-splade-works"
+    }
+}
\ No newline at end of file
diff --git a/introducing-splade.md b/introducing-splade.md
index 404f5a2..f87f2b9 100644
--- a/introducing-splade.md
+++ b/introducing-splade.md
@@ -1,6 +1,6 @@
 # Introducing Splade
 
-Splade provides a **super easy** way to build *Single Page Applications* (SPA) using standard [Laravel Blade](https://laravel.com/docs/9.x/blade) templates, enhanced with [renderless Vue 3 components](https://adamwathan.me/renderless-components-in-vuejs/). In essence, you can write your app using the simplicity of Blade, and besides that magic *SPA-feeling*, you can sparkle it to make it interactive. All without ever leaving Blade.
+Splade provides a **super easy** way to build *Single Page Applications* (SPA) using standard [Laravel Blade](https://laravel.com/docs/10.x/blade) templates, enhanced with [renderless Vue 3 components](https://adamwathan.me/renderless-components-in-vuejs/). In essence, you can write your app using the simplicity of Blade, and besides that magic *SPA-feeling*, you can sparkle it to make it interactive. The best part? You can do all of this without ever leaving Blade! Splade makes it easy to create modern, dynamic web applications that are a joy to use.
 
 **Wow! Sounds interesting? Let's take a closer look.**
 
@@ -13,11 +13,11 @@ To leverage the SPA capabilities of Splade, you may use the `<Link>` component i
 <Link href="https://github.com/%7B%7B%20route('contact') }}">Contact</Link>
 ```
 
-If you're using an existing app, or maybe you don't like the `Link` component, you may configure Splade to transform all `<a>` elements automatically.
+If you're using an existing app, or maybe you don't like the `Link` component, you may configure Splade to transform all `<a>` elements automatically as described in the [Link Component section](/x-link.md).
 
 ## The simplest component: a toggle
 
-In the example below, we show an excerpt of the blog post. When the user clicks on the *Expand* button, it hides the excerpt and shows the full content. All Splade components are default prefixed with `splade`, but you may configure it without a prefix, resulting in a more readable `<x-toggle>` component.
+In the example below, we show an excerpt of the blog post. When the user clicks on the *Expand* button, it hides the excerpt and shows the full content. All Splade components are default prefixed with `splade`, but you may [configure it](/customization.md) without a prefix, resulting in a more readable `<x-toggle>` component.
 
 ```blade
 @extends('layout')
@@ -68,7 +68,7 @@ The dedicated form component allows you to send forms asynchronously. It catches
 
 First, let's explain the `x-form` component: it's a wrapper around a Vue component. Yes, each Splade component consists of a renderless Vue component (where all interactive magic happens) wrapped in a Blade component.
 
-In the following example, the form component is given some default data, that of the authenticated user. Note that the user data is passed to the frontend, so please be sure sensitive attributes [hidden](https://laravel.com/docs/9.x/eloquent-serialization#hiding-attributes-from-json).
+In the following example, the form component is given some default data, that of the authenticated user. Note that the user data is passed to the frontend, so please be sure sensitive attributes are [hidden](https://laravel.com/docs/10.x/eloquent-serialization#hiding-attributes-from-json), or use the built-in [Transformer feature](/transformers.md).
 
 ```blade
 <x-form :action="https://github.com/route('user.current.update')" :default="auth()->user()">
@@ -102,4 +102,4 @@ Here's a summary of all the cool things Splade can do:
 * `<x-transition>` component to add animations to your templates.
 * `Toast` component to display toasts on your page. It supports nine positions, four styles, backdrop background, and auto-dismiss.
 * `Table` component to automatically generate tables with support for auto-fill, searching, filtering, sorting, toggling columns, and pagination.
-* `Form` components to rapidly build forms. Support for model binding, validation, Eloquent Relationships, textarea autosize, Choices.js searchable/taggable selects, and Flatpickr for date/time/range picking.
\ No newline at end of file
+* `Form` components to rapidly build forms. Support for model binding, validation, Eloquent Relationships, textarea autosize, Choices.js searchable/taggable selects, Flatpickr for date/time/range picking, and FilePond file uploads.
\ No newline at end of file
diff --git a/jetstream.md b/jetstream.md
new file mode 100644
index 0000000..85be927
--- /dev/null
+++ b/jetstream.md
@@ -0,0 +1,21 @@
+# Jetstream Starter Kit
+
+You can use the [Laravel Jetstream](https://laravel.com/docs/10.x/starter-kits#laravel-jetstream) starter kit to give you a head start. Jetstream provides a beautifully designed application scaffolding for Laravel and includes login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management. We maintain a fork with a Splade stack and keep it similar to the upstream as much as possible.
+
+The installation process is similar to the [Automatic Installation](/automatic-installation.md). Note that Jetstream for Splade requires Laravel 10.
+
+```bash
+laravel new example-app
+
+cd example-app
+
+composer require protonemedia/laravel-splade-jetstream
+
+php artisan jetstream:install --teams --api --verification
+```
+
+The `jetstream:install` command will also build the frontend assets. Just like [regular Laravel applications](https://laravel.com/docs/10.x/vite#running-vite), you may run the Vite development server:
+
+```bash
+npm run dev
+````
\ No newline at end of file
diff --git a/lazy-loading.md b/lazy-loading.md
index 0e0acc8..f2a9473 100644
--- a/lazy-loading.md
+++ b/lazy-loading.md
@@ -12,6 +12,8 @@ The **Lazy Component** allows you to load sections of your template lazily. Wrap
 </x-splade-lazy>
 ```
 
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Vf12p5ma3Is" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 ## Lazy View Data
 
 While excluding a section from your template is nice, you probably also want to exclude data from the initial page load. Most commonly, this is the data you need in your lazily loaded content. You may use the `onInit` and `onLazy` methods on the `Splade` facade to wrap the data in a closure.
@@ -73,4 +75,24 @@ If you don't want to include the content directly into the slot, you may define
 <x-splade-lazy url="/notifications">
     ...
 </x-splade-lazy>
+```
+
+## Conditionals
+
+Don't wrap the Lazy Component into an *if-statement*, but always put the statement *within* the component:
+
+```blade
+<!-- Instead of this -->
+@if($user->canViewNewsItems())
+    <x-splade-lazy>
+        ...
+    </x-splade-lazy>
+@endif
+
+<!-- Do this -->
+<x-splade-lazy>
+    @if($user->canViewNewsItems())
+        ...
+    @endif
+</x-splade-lazy>
 ```
\ No newline at end of file
diff --git a/manual-installation.md b/manual-installation.md
index 2386ed5..77a7348 100644
--- a/manual-installation.md
+++ b/manual-installation.md
@@ -48,7 +48,7 @@ class Handler extends ExceptionHandler
 
 ## Client-side
 
-On the frontend, you must ensure [Tailwind CSS 3.0](https://tailwindcss.com) and [Vue 3.0](https://vuejs.org) are correctly configured. Then, install the Splade frontend package:
+On the frontend, you must ensure [Tailwind CSS 3.0](https://tailwindcss.com/docs/guides/laravel) and [Vue 3.0](https://vuejs.org/guide/quick-start.html) are correctly configured. Then, install the Splade frontend package:
 
 ```bash
 npm install @protonemedia/laravel-splade
@@ -69,12 +69,12 @@ module.exports = {
 };
 ```
 
-In the `createApp` section of your main JavaScript file, you need to use the Splade plugin, as well as the custom render method:
+In the `createApp` section of your main JavaScript file, you need to use the Splade plugin, as well as the custom render method. Note how it imports the `createApp` method from the *bundler* Vue build, as that build includes the [Vue template compiler](https://vuejs.org/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation).
 
 ```js
 import "@protonemedia/laravel-splade/dist/style.css";
 
-import { createApp } from 'vue'
+import { createApp } from "vue/dist/vue.esm-bundler.js";
 import { renderSpladeApp, SpladePlugin } from '@protonemedia/laravel-splade'
 
 const el = document.getElementById('app')
@@ -86,7 +86,7 @@ createApp({
     .mount(el);
 ```
 
-As you can see at the top, there's also a default stylesheet to support the Choices.js and Flatpickr integrations of the [Form Components](/form-overview.md). Though you probably want to import this default stylesheet into your main JavaScript file, it's completely optional.
+As you can see at the top, there's also a default stylesheet to support the Choices.js, FilePond, and Flatpickr integrations of the [Form Components](/form-overview.md). Though you probably want to import this default stylesheet into your main JavaScript file, it's completely optional.
 
 In your Blade root layout, you may use the `@splade` directive inside the `body`, and the `@spladeHead` directive inside the `head`. This will render the title and meta tags, and the default `<div id="app"></div>` element where the Vue app will be mounted.
 
@@ -100,24 +100,26 @@ In your Blade root layout, you may use the `@splade` directive inside the `body`
 </body>
 ```
 
-Splade assumes the path of this file is `resources/views/root.blade.php`. If you want to change it, you may call the `setRootView` method on the Splade facade, for example, in the `AppServiceProvider` class:
+Here's an example of a sensible root layout:
 
-```php
-Splade::setRootView('base-layout');
+```blade
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="csrf-token" content="{{ csrf_token() }}">
+        @vite(['resources/js/app.js'])
+        @spladeHead
+    </head>
+    <body class="font-sans antialiased">
+        @splade
+    </body>
+</html>
 ```
 
-Lastly, in the `vite.config.js` file, you need to add an alias for the [Vue template compiler](https://vuejs.org/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation):
-
-```js
-export default defineConfig({
-    ...
-
-    resolve: {
-        alias: {
-            vue: 'vue/dist/vue.esm-bundler'
-        }
-    },
+Splade assumes the path of this file is `resources/views/root.blade.php`. If you want to change it, you may call the `setRootView` method on the Splade facade, for example, in the `AppServiceProvider` class:
 
-    ...
-});
+```php
+Splade::setRootView('base-layout');
 ```
diff --git a/navigation-routing.md b/navigation-routing.md
index 9702bfb..60093bd 100644
--- a/navigation-routing.md
+++ b/navigation-routing.md
@@ -1,6 +1,6 @@
 # Navigation and Routing
 
-To fully leverage Splade's page loading capabilities, you must use the *Splade Middleware* on according routes. There are many ways of [Registering Middlewares](https://laravel.com/docs/9.x/middleware#registering-middleware), but we recommend wrapping all routes into a group:
+To fully leverage Splade's page loading capabilities, you must use the *Splade Middleware* on according routes. There are many ways of [Registering Middlewares](https://laravel.com/docs/10.x/middleware#registering-middleware), but we recommend wrapping all routes into a group:
 
 ```php
 Route::middleware('splade')->group(function () {
@@ -17,4 +17,66 @@ Now when you use the `<Link>` component, Splade will prevent a full page reload
 <Link href="https://github.com/contact">Visit contact page</Link>
 ```
 
-You may also configure Splade to transform all `<a>` elements as described in the [Link Component section](/x-link.md).
\ No newline at end of file
+You may also configure Splade to transform all `<a>` elements as described in the [Link Component section](/x-link.md).
+
+## Preserve scroll position
+
+When the user navigates through the app, the browser will reset the scroll position of scrollable elements. In some cases, this might not be a great user experience.
+
+One example is a sidebar menu that's taller than the window height and thus has a vertical scrollbar. When a user clicks on a menu item in the bottom section and Splade navigates to the next page, you probably want to preserve the scroll position of the sidebar menu.
+
+You may use the `@preserveScroll` directive on an element to tell Splade to keep track of the scroll position. Be sure to pass a unique name to the directive:
+
+```blade
+<div>
+    <div @preserveScroll('sidebar') class="w-[16rem] absolute top-0 left-0 max-h-screen h-full overflow-y-scroll">
+        {{-- scrolling menu --}}
+    </div>
+
+    <div class="pl-[16rem]">
+        {{-- content --}}
+    </div>
+</div>
+```
+
+Alternatively, you may use the Vue equivalent of the directive:
+
+```blade
+<div v-SpladePreserveScroll:sidebar>
+    ...
+</div>
+```
+
+## Redirects
+
+Splade automatically handles redirects, both internally and externally. The default Laravel redirect methods just work:
+
+```php
+return redirect('home/dashboard');
+
+return redirect()->route('profile', ['id' => 1]);
+
+return redirect()->away('https://www.google.com/');
+```
+
+Splade detects when you redirect to an external domain outside of your app. You may use Laravel's [built-in](https://laravel.com/docs/10.x/responses#redirecting-external-domains) `away()` method on the `redirect()` helper method. Still, you may also use the `redirectAway()` method on the Splade facade to explicitly tell Splade to redirect away from the app:
+
+```php
+return Splade::redirectAway('https://www.google.com/');
+```
+
+## View Transitions API
+
+View Transitions is a new API in modern browsers designed to animate page transitions in SPAs like Splade. You can read more about it in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API). Note that this API is still experimental and not supported in all browsers.
+
+To enable View Transitions in your Splade app, you must update the plugin options in the main `app.js` file by setting the `view_transitions` option to `true`:
+
+```js
+createApp({ render: renderSpladeApp({ el }) })
+    .use(SpladePlugin, {
+        'view_transitions': true,
+    })
+    .mount(el);
+```
+
+Splade automatically detects if the browser supports the API.
\ No newline at end of file
diff --git a/persistent-layout.md b/persistent-layout.md
index fe52aad..e5d7f94 100644
--- a/persistent-layout.md
+++ b/persistent-layout.md
@@ -1,12 +1,19 @@
+---
+description: Laravel Splade lets you use a Persistent Layout with Blade. One example is a media player that must continue playing while your users navigate from one page to the next.
+keywords: laravel persistent layout, blade persistent layout, splade persistent layout, persistent layout, persistent layouts
+---
+
 # Persistent Layout
 
 When Splade performs a page load, Vue will, under the hood, rerender the page and its components. While it's clever enough to minimize the performance impact and thus give you a seamless *SPA*-experience, it will also rerender elements you might want to keep alive. The most common example is a media player that must continue playing while your users navigate your app.
 
 Luckily, Splade lets you use a Persistent Layout. So, instead of documenting all options, let's build the example with the media player step-by-step.
 
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/3B3fr8st4pk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 ## Make a Layout
 
-Create a new Blade Component using the Laravel Artisan CLI. You can read more about building Layouts with Blade Components in the [Laravel documentation](https://laravel.com/docs/9.x/blade#layouts-using-components).
+Create a new Blade Component using the Laravel Artisan CLI. You can read more about building Layouts with Blade Components in the [Laravel documentation](https://laravel.com/docs/10.x/blade#layouts-using-components).
 
 ```bash
 php artisan make:component VideoLayout
diff --git a/roadmap.md b/roadmap.md
index cc685ce..787e5be 100644
--- a/roadmap.md
+++ b/roadmap.md
@@ -1,11 +1,15 @@
 # Roadmap
 
-Splade is in its early stages and has just been released. Here's a little roadmap of things to work on.
+Splade has been in public development since July 2022. Finally, in November 2022, after more than 300 commits and 70 releases, version v1.0 was tagged. Splade has already made its way into production environments, but we'll keep improving! Here's a little roadmap of things to work on.
 
 * <del>Breeze starter kit</del> ✅
-* Jetstream starter kit
+* <del>Jetstream starter kit</del> ✅
 * <del>Make Inertia.js Tables and Form Components Pro compatible with Splade</del> ✅
 * <del>More examples of combining Blade and Vue</del> ✅
-* Show all features on splade.dev
-* Demo application (like Ping CRM)
-* <del>Support for actions and exports in the Table Component</del> ✅
\ No newline at end of file
+* <del>Show key features on splade.dev</del> ✅
+* <del>Support for actions and exports in the Table Component</del> ✅
+* <del>Form Builder</del> ✅
+* <del>Demo application</del> ✅
+* Dark Mode and RTL support
+* Table filter improvements
+* Support for Bootstrap 5 (under consideration)
diff --git a/ssr.md b/ssr.md
index 3a46ad8..f476237 100644
--- a/ssr.md
+++ b/ssr.md
@@ -1,6 +1,6 @@
 # Server-Side Rendering (SSR)
 
-As Vue handles the template rendering client-side, you might want to enable SSR to improve the SEO score of your application. Splade uses the SSR functionality in the [Laravel Vite plugin](https://laravel.com/docs/9.x/vite#ssr).
+As Vue handles the template rendering client-side, you might want to enable SSR to improve the SEO score of your application. Splade uses the SSR functionality in the [Laravel Vite plugin](https://laravel.com/docs/10.x/vite#ssr).
 
 If you've used the automatic installer, everything is ready for you, and you can start the server almost immediately. However, if you need to set up SSR manually, check out the section below on preparing your app for SSR.
 
@@ -12,13 +12,13 @@ First, enable SSR in the Laravel configuration via the `SPLADE_SSR_ENABLED` envi
 SPLADE_SSR_ENABLED=true
 ```
 
-By running `npm run build`, Vite will build the SSR entry point and save it at `bootstrap/ssr/ssr.mjs`. Now you can use `node` to start the server:
+By running `npm run build`, Vite will build the SSR entry point and save it at `bootstrap/ssr/ssr.js`. Now you can use `node` to start the server. Note that in earlier versions of Splade, the file was generated as `ssr.mjs`.
 
 ```bash
-node bootstrap/ssr/ssr.mjs
+node bootstrap/ssr/ssr.js
 ```
 
-By default, it starts on port 9000, but you may choose another port. Don't forget to update the port in the `splade.php` configuration file.
+By default, it starts on port 9000, but you may choose another port. Don't forget to update the port in the `splade.php` [configuration file](/customization.md).
 
 ```bash
 node bootstrap/ssr/ssr.js --port=4242
diff --git a/table-bulk-actions.md b/table-bulk-actions.md
index 44520d6..d46af75 100644
--- a/table-bulk-actions.md
+++ b/table-bulk-actions.md
@@ -1,3 +1,8 @@
+---
+description: The Splade Table component supports Bulk Actions. It can perform the action on the selected rows, on all rows on the current page, or on all rows on all pages.
+keywords: laravel datatables bulk actions, laravel datatables actions, laravel table bulk action, laravel tables bulk action
+---
+
 # Table Bulk Actions
 
 The Table component supports performing Bulk Actions. First, you must register a supporting route using the `spladeTable()` method on the `Route` facade. As of version 0.6, the automatic installer does this for you. If you need to register the route manually, make sure it uses the `web` and `splade` Middleware, for example, in `web.php`:
@@ -32,6 +37,31 @@ $table->bulkAction(
 );
 ```
 
+The `before` and `after` callbacks receive the selected rows as an argument. You may use this to perform additional actions, for example, to send an email to the selected users:
+
+```php
+$table->bulkAction(
+    label: 'Notify users',
+    before: function (array $selectedIds) {
+        $users = User::whereIn('id', $selectedIds)->get();
+
+        Mail::to($users)->send(new ImportantNotification);
+    }
+);
+```
+
+Note that when all rows are selected, the callbacks receive an array with a single `*` item:
+
+```php
+function (array $selectedIds) {
+    $users = User::query()
+        ->unless($selectedIds === ['*'], fn ($query) => $query->whereIn('id', $selectedIds))
+        ->get();
+
+    Mail::to($users)->send(new ImportantNotification);
+}
+```
+
 ## Confirmation
 
 You may use the `confirm` argument to show a confirmation dialog before Splade performs the action:
@@ -57,9 +87,28 @@ $table->bulkAction(
 );
 ```
 
+### Password Confirmation
+
+It's even possible to require the user to confirm their password within the confirmation dialog. First, you must register a supporting route using the `spladePasswordConfirmation()` method on the `Route` facade. As of version 1.2.2, the automatic installer does this for you. If you need to register the route manually, make sure it uses the `web` Middleware, for example, in `web.php`:
+
+```php
+Route::spladePasswordConfirmation();
+```
+
+Now you may set the `requirePassword` argument to `true`:
+
+```php
+$table->bulkAction(
+    label: 'Delete projects',
+    each: fn (Project $project) => $project->delete(),
+    confirm: true,
+    requirePassword: true
+);
+```
+
 ## Authorization
 
-Just like [Form Requests](https://laravel.com/docs/9.x/validation#authorizing-form-requests), you may use the `authorize` method to determine if the user has the authority to perform a Bulk Action:
+Just like [Form Requests](https://laravel.com/docs/10.x/validation#authorizing-form-requests), you may use the `authorize` method to determine if the user has the authority to perform a Bulk Action:
 
 ```php
 class Projects extends AbstractTable
@@ -69,4 +118,4 @@ class Projects extends AbstractTable
         return $request->user()->is_admin;
     }
 }
-```
\ No newline at end of file
+```
diff --git a/table-exports.md b/table-exports.md
index 5c0a978..06979f9 100644
--- a/table-exports.md
+++ b/table-exports.md
@@ -1,3 +1,8 @@
+---
+description: The Splade Table component supports exporting to Excel, CSV, PDF, and other formats. You may enable exporting with the export() method, which will configure an Excel Export by default.
+keywords: laravel datatables excel export, laravel datatables pdf export, laravel table export, laravel tables export
+---
+
 # Table Exports
 
 The Table component supports Exports. But first, you must register a supporting route using the `spladeTable()` method on the `Route` facade. As of version 0.6, the automatic installer does this for you. If you need to register the route manually, make sure it uses the `web` and `splade` Middleware, for example, in `web.php`:
@@ -52,7 +57,7 @@ The `exportFormat` allows you to [format](https://docs.laravel-excel.com/3.1/exp
 ```php
 use PhpOffice\PhpSpreadsheet\Style\NumberFormat;
 
-$table->column('amount', NumberFormat::FORMAT_CURRENCY_EUR_SIMPLE);
+$table->column('amount', exportFormat: NumberFormat::FORMAT_CURRENCY_EUR_SIMPLE);
 ```
 
 Lastly, with the `exportStyling` method, you may style the column with an array or a callable:
@@ -69,7 +74,7 @@ $table
 
 ## Authorization
 
-Just like [Form Requests](https://laravel.com/docs/9.x/validation#authorizing-form-requests), you may use the `authorize` method to determine if the user has the authority to perform a Bulk Action:
+Just like [Form Requests](https://laravel.com/docs/10.x/validation#authorizing-form-requests), you may use the `authorize` method to determine if the user has the authority to perform a Bulk Action:
 
 ```php
 class Projects extends AbstractTable
diff --git a/table-overview.md b/table-overview.md
index 917ef79..faf05f2 100644
--- a/table-overview.md
+++ b/table-overview.md
@@ -1,7 +1,13 @@
+---
+description: Splade has an advanced Table component that supports auto-fill, searching, filtering, sorting, toggling columns, and pagination. You may also perform bulk actions and exports.
+keywords: laravel datatable, laravel datatables, laravel table, laravel table component, laravel tables
+---
+
 # Table (DataTables) Component
 
 Splade has an advanced Table component that supports auto-fill, searching, filtering, sorting, toggling columns, and pagination. You may also perform bulk actions and exports. Though optional, it integrates beautifully with Spatie's [Laravel Query Builder](https://github.com/spatie/laravel-query-builder).
 
+*This video is from a previous Splade version that did not have the built-in Query Builder yet. An updated instruction video will soon replace it!*
 <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/FPYNvO7GyoM?controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Basic example
@@ -90,7 +96,7 @@ public function configure(SpladeTable $table)
 
 ### Implementing the `authorize` method
 
-The `authorize` method is only used for Bulk Actions and Exports. Just like [Form Requests](https://laravel.com/docs/9.x/validation#authorizing-form-requests), you may determine if the user has the authority to perform such actions:
+The `authorize` method is only used for Bulk Actions and Exports. Just like [Form Requests](https://laravel.com/docs/10.x/validation#authorizing-form-requests), you may determine if the user has the authority to perform such actions:
 
 ```php
 public function authorize(Request $request)
@@ -123,23 +129,60 @@ You may want the hide the pagination when the resource contains only one page, r
 SpladeTable::hidePaginationWhenResourceContainsOnePage();
 ```
 
+### Scroll behavior
+
+By default, the pagination links will scroll to the top of the page when clicked. This is not always desired, especially when the table is not at the top of the page. You may use the `pagination-scroll` attribute to change this behavior. The value can be `top` (default), `head`, or `preserve`.
+
+```blade
+<x-splade-table :for="$users" pagination-scroll="head" />
+```
+
+If you want to change this behavior globally, you may use the `paginationScroll` method on the `SpladeTable` class:
+
+```php
+SpladeTable::defaultPaginationScroll('preserve');
+```
+
+## Empty state
+
+When no results have been found, the component will render an empty table with a message saying *There are no items to show*. You may also pass a slot to provide a custom layout for the empty state:
+
+```blade
+<x-splade-table :for="$users">
+    <x-slot:empty-state>
+        <p>Whoops!</p>
+    </x-slot>
+</x-splade-table>
+```
+
 ## Custom head and body
 
-You may use slots if you want to write the head or body yourself.
+You may use slots to write the head or body yourself. Then, passing the instance to the `for` attribute will automatically render the pagination, but you must manually loop over the items in the head and body sections.
+
+You may use the `columns()` method and `resource` property of the table instance:
 
 ```blade
 <x-splade-table :for="$users">
     <x-slot name="head">
         <thead>
-            ...
+            <tr>
+                @foreach($users->columns() as $column)
+                    <th>{{ $column->label }}</th>
+                @endforeach
+            </tr>
         </thead>
     </x-slot>
 
     <x-slot name="body">
         <tbody>
-            ...
+            @foreach($users->resource as $user)
+                <tr>
+                    ...
+                </tr>
+            @endforeach
         </tbody>
     </x-slot>
 </x-splade-table>
 ```
 
+Also, check out the [default Blade templates](https://github.com/protonemedia/laravel-splade/tree/main/resources/views/table) for other related features.
\ No newline at end of file
diff --git a/table-query-builder.md b/table-query-builder.md
index 8f54c62..8118441 100644
--- a/table-query-builder.md
+++ b/table-query-builder.md
@@ -1,6 +1,6 @@
-# Table built-in Query Builder
+# Table with the built-in Query Builder
 
-Besides rendering the head, body, and pagination, the component supports many other features like filtering, searching, sorting, and more.
+Besides rendering the head, body, and pagination, the component supports many other features like filtering, searching, sorting, and more. The built-in Query Builder has been tested with MySQL, PostgreSQL and SQLite.
 
 ## Search Fields
 
@@ -37,12 +37,11 @@ $table->selectFilter(
     key: 'language_code',
     options: $languages,
     label: 'Language',
-    noFilterOption: true
+    noFilterOption: true,
     noFilterOptionLabel: 'All languages'
 );
 ```
 
-
 ## Columns
 
 With the `column` method, you can specify which columns you want to be toggleable, sortable, and searchable. You must pass in at least a key or label for each column.
@@ -66,7 +65,29 @@ By default, the `canBeHidden` value is set to `true`, making every column toggle
 SpladeTable::defaultColumnCanBeHidden(false);
 ```
 
-The `searchable` boolean is a shortcut to the `searchInput` method. The example below will essentially call `$table->searchInput('name', 'User Name')`.
+The `searchable` boolean is a shortcut to the `searchInput` method. The example above will essentially call `$table->searchInput('name', 'User Name')`.
+
+### Transform values
+
+Sometimes, you want to transform the value in the table without using a custom column cell. You may do this by providing a callback to the `as` argument. The callback takes two arguments: the original value and the item itself (typically the Eloquent Model).
+
+```php
+$table->column(
+    key: 'email',
+    as: fn ($email, $user) => Str::mask($email)
+);
+```
+
+### Column alignment
+
+You may change the alignment of the column by setting it the `left` (default), `center`, or `right`.
+
+```php
+$table->column(
+    key: 'actions',
+    alignment: 'right'
+);
+```
 
 ### Default sort
 
@@ -76,9 +97,19 @@ You may configure the default sorting with the `defaultSort()` method:
 $table->defaultSort('name');
 ```
 
+If you want to sort in descending order, you may prefix the key with a `-` character or use the `defaultSortDesc` method. Alternatively, you may use the `defaultSort` method with an additional second argument:
+
+```php
+$table->defaultSort('-name');
+
+$table->defaultSortDesc('name');
+
+$table->defaultSort('name', 'desc');
+```
+
 ### Sort by Relationship column
 
-The Table supports sorting the results by a [Relationship](https://laravel.com/docs/9.x/eloquent-relationships) column. This requires the installation of the [`kirschbaum-development/eloquent-power-joins`](https://github.com/kirschbaum-development/eloquent-power-joins) package.
+The Table component supports sorting the results by a [Relationship](https://laravel.com/docs/10.x/eloquent-relationships) column. This requires the installation of the [`kirschbaum-development/eloquent-power-joins`](https://github.com/kirschbaum-development/eloquent-power-joins) package.
 
 ```php
 $table->column(
@@ -143,7 +174,7 @@ When using auto-fill, you may want to transform the presented data for a specifi
 ```blade
 <x-splade-table :for="$users">
     <x-splade-cell actions>
-        <a href="https://github.com/users/%7B%7B%20$item-%3Eid%20%7D%7D/edit"> Edit </a>
+        <Link href="https://github.com/users/%7B%7B%20$item-%3Eid%20%7D%7D/edit"> Edit </Link>
     </x-splade-cell>
 </x-splade-table>
 ```
@@ -152,7 +183,7 @@ If you want to change the `$item` variable, you may use use the `as` attribute o
 
 ```blade
 <x-splade-cell actions as="$user">
-    <a href="https://github.com/users/%7B%7B%20$user-%3Eid%20%7D%7D/edit"> Edit </a>
+    <Link href="https://github.com/users/%7B%7B%20$user-%3Eid%20%7D%7D/edit"> Edit </Link>
 </x-splade-cell>
 ```
 
@@ -163,7 +194,7 @@ This is a *scoped* component, so variables outside the slot won't be available b
 
 <x-splade-cell actions as="$user" use="$message">
     <p> {{ $message }} </p>
-    <a href="https://github.com/users/%7B%7B%20$user-%3Eid%20%7D%7D/edit"> Edit </a>
+    <Link href="https://github.com/users/%7B%7B%20$user-%3Eid%20%7D%7D/edit"> Edit </Link>
 </x-splade-cell>
 ```
 
@@ -176,11 +207,13 @@ When your template uses multiple custom cells, you may set these variables as de
     </x-splade-cell>
 
     <x-splade-cell actions>
-        <a href="https://github.com/users/%7B%7B%20$user-%3Eid%20%7D%7D/edit"> Edit </a>
+        <Link modal href="https://github.com/users/%7B%7B%20$user-%3Eid%20%7D%7D/edit"> Edit </Link>
     </x-splade-cell>
 </x-splade-table>
 ```
 
+*Note the `modal` attribute on the Link element in the example above. Instead of navigating to another page, you may open a [Modal or Slideover](/x-modal.md) from a Table.*
+
 ## Row Link
 
 You may use the `rowLink` method to make one entire row clickable.
@@ -211,4 +244,18 @@ You may use the `striped` attribute to add a striped layout to the table.
 
 ```blade
 <x-splade-table :for="$users" striped />
-```
\ No newline at end of file
+```
+
+## Reset button
+
+By default, a *Reset-button* is rendered when the table is filtered, sorted, or searched. You may disable this button by setting the `reset-button` attribute to `false`:
+
+```blade
+<x-splade-table :for="$users" :reset-button="false" />
+```
+
+You may also disable it globally using the static `defaultResetButton` method, for example, in the `AppServiceProvider` class:
+
+```php
+SpladeTable::defaultResetButton(false);
+```
diff --git a/title-meta.md b/title-meta.md
index 2dcd008..5ff4700 100644
--- a/title-meta.md
+++ b/title-meta.md
@@ -1,3 +1,8 @@
+---
+description: The SEO facade lets you set the page's title, description, and keywords. You may also set a default prefix/suffix for the title. There are five helper methods to set Open Graph and Twitter tags.
+keywords: laravel seo, blade seo, splade seo, splade title, splade description, splade meta, splade meta tags, splade keywords, laravel twitter tags, laravel og tags, laravel open graph tags, laravel twitter meta, laravel og meta, laravel open graph meta
+---
+
 # Title and meta tags
 
 You may use the `SEO` facade to set your page's title, description, and keywords.
@@ -24,50 +29,110 @@ The `keywords` method accepts an array as well:
 SEO::keywords(['laravel', 'splade', 'course']);
 ```
 
-In the `splade.php` configuration file, you may set the default content:
+As of v1.2.11, you may also use Blade Directives to set the values within a template:
+
+```blade
+<x-layout>
+    @seoTitle('Laravel Splade Course')
+    @seoDescription('Become the Splade expert!')
+    @seoKeywords('laravel, splade, course')
+</x-layout>
+```
+
+You may publish and customize the `splade-seo.php` configuration file to set default values. In previous versions of Splade, the SEO configuration was part of the `splade.php` configuration file. As of v0.6.9, there is a separate file for the SEO configuration.
+
+```bash
+php artisan vendor:publish --provider="ProtoneMedia\Splade\ServiceProvider" --tag="seo"
+```
 
 ```php
 return [
-    ...
-
-    'seo' => [
-        'defaults' => [
-            'title' => 'My application',
+    'defaults' => [
+        'title' => 'My application',
 
-            'description' => 'This is the description of my application.',
+        'description' => 'This is the description of my application.',
 
-            'keywords' => ['application', 'keywords'],
-        ],
+        'keywords' => ['application', 'keywords'],
     ],
-
-    ...
 ];
 ```
 
-You may also set a default prefix/suffix for the title. With the example below, if you call `SEO::setTitle('Home')`, the final title will become `Page: Home | My app`.
+You may also set a default prefix, suffix and separator for the title. With the example below, if you call `SEO::setTitle('Home')`, the final title will become `Home | My app`.
 
 ```php
 return [
-    ...
+    'title_separator' => '|',
+
+    'title_suffix' => 'My app',
+];
+```
 
-    'seo' => [
-        'title_prefix' => 'Page:',
+## Canonical URL
 
-        'title_suffix' => '| My app',
-    ]
+By default, the canonical URL is set to the current URL, but you may override it with the `canonical` method:
 
-    ```
-];
+```php
+SEO::canonical('https://splade.dev/');
+```
+
+Suppose you don't want to automatically set the canonical URL to the current URL. You may disable this in the `splade-seo.php` config file by setting the `auto_canonical_link` key to `false`.
+
+## Open Graph tags
+
+There are five helper methods to set Open Graph tags:
+
+```php
+SEO::openGraphType('WebPage');
+SEO::openGraphSiteName('My Application');
+SEO::openGraphTitle('Home Page');
+SEO::openGraphUrl('https://my.app/home');
+SEO::openGraphImage(public_path('home.png'));
 ```
 
-There are three additional methods to set other meta tags. You can set meta tags by name, property, or by giving a custom set of attributes. Future releases of Splade will include additional helper methods to set OpenGraph and other SEO tags.
+In the `splade-seo.php` configuration file, you may set default values and an `auto_fill` option. When you set this option to `true`, the value passed to the `SEO::title()` method will also be applied to the Open Graph Title tag.
+
+## Twitter tags
+
+There are five helper methods to set Twitter tags:
+
+```php
+SEO::twitterCard('summary_large_image');
+SEO::twitterSite('@pascalbaljet');
+SEO::twitterTitle('Home Page | My App');
+SEO::twitterDescription('This is the home page of my application');
+SEO::twitterImage(public_path('home.png'));
+```
+
+In the `splade-seo.php` configuration file, you may set default values and an `auto_fill` option. When you set this option to `true`, values passed to `SEO::title()` and `SEO::description()` methods will also be applied to the corresponding Twitter tags.
+
+## Custom meta tags
+
+There are three additional methods to set other meta tags. You can set meta tags by name, property, or by giving a custom set of attributes.
 
 ```php
-SEO::metaByName('twitter:site', '@pascalbaljet');
+SEO::metaByName('theme-color', '#ffffff');
 
 SEO::metaByProperty('article:section', 'news');
 
 SEO::meta([
     'custom-attribute' => 'example'
 ]);
+```
+
+## SEO Macro
+
+The underlying class of the `SEO` facade uses Laravel's `Macroable` trait, so it's easy to add a method:
+
+```php
+SEO::macro('openGraphLocale', function (string $value) {
+    return $this->metaByProperty('og:locale', $value);
+});
+```
+
+Make sure to return from the callback, so you may use the facade fluently:
+
+```php
+SEO::title('Laravel Splade Cursus')
+    ->openGraphLocale('nl')
+    ->description('Wil je een Splade expert worden?');
 ```
\ No newline at end of file
diff --git a/toasts.md b/toasts.md
index 6c7a95c..ebe4d49 100644
--- a/toasts.md
+++ b/toasts.md
@@ -31,4 +31,23 @@ Toast::title('Whoops!')
     ->leftTop()
     ->backdrop()
     ->autoDismiss(15);
-```
\ No newline at end of file
+```
+
+You may also pass a text value directly to the *position* and *style* methods:
+
+```php
+Toast::warning('No space left!');
+
+Toast::center('Welcome back!');
+```
+
+## Default Toast settings
+
+You may customize the default settings using the `Splade` facade, for example, in the `AppServiceProvider` class:
+
+```php
+Splade::defaultToast(function ($toast) {
+    $toast->info()->leftBottom()->autoDismiss(10);
+});
+```
+
diff --git a/transformers.md b/transformers.md
new file mode 100644
index 0000000..148260d
--- /dev/null
+++ b/transformers.md
@@ -0,0 +1,53 @@
+# Transformers
+
+In components such as [Data](/x-data.md) and [Form](/x-form.md), you may want to pass PHP objects to the frontend. The most common example is an Eloquent Model. Though you may [hide sensitive attributes](https://laravel.com/docs/10.x/eloquent-serialization#hiding-attributes-from-json) from being passed to the frontend, and though the Form Components have [built-in support](/form-model-binding-attributes.md) to guard Model attributes, you may also choose to use a Transformer.
+
+Splade makes it very easy to define a Transformer once, and use it throughout the application in the Data, Defer, Form, and Bridge Components. It supports [Eloquent API Resources](https://laravel.com/docs/10.x/eloquent-resources), [Fractal Transformers](https://fractal.thephpleague.com), and a simple closure.
+
+## Transform using an Eloquent Resource Class
+
+Configuring a Transformer is as easy as calling the `transformUsing` method on the `Splade` facade, for example, in the `AppServiceProvider` class:
+
+```php
+Splade::transformUsing(User::class, UserResource::class);
+```
+
+### Pass multiple transformers
+
+Instead of calling the `transformUsing` methods multiple times, you may also pass an array:
+
+```php
+Splade::transformUsing([
+    Team::class => TeamResource::class,
+    User::class => UserResource::class,
+]);
+```
+
+### Fallback and Enforcement
+
+When no Transformer has been configured, Splade won't transform the given data and passes it untouched. If you want to enforce using Transformers, and protect against missing Transformers, you may call the `requireTransformer` method on the `Splade` facade:
+
+```php
+Splade::requireTransformer();
+```
+
+## Transform using a Fractal Transformer
+
+To use Fractal Transformers, you need to install the [`spatie/fractalistic`](https://github.com/spatie/fractalistic) package.
+
+```php
+Splade::transformUsing(User::class, UserTransformer::class);
+```
+
+## Transform using a Closure
+
+For simple transformations, you may pass a closure:
+
+```php
+Splade::transformUsing(User::class, function ($user) {
+    return [
+        'name'  => $user->name,
+        'email' => $user->email,
+    ];
+});
+```
\ No newline at end of file
diff --git a/translations.md b/translations.md
new file mode 100644
index 0000000..508b13a
--- /dev/null
+++ b/translations.md
@@ -0,0 +1,7 @@
+# Translations
+
+You may publish the translation files using the `vendor:publish` Artisan command:
+
+```bash
+php artisan vendor:publish --provider="ProtoneMedia\Splade\ServiceProvider" --tag="translations"
+```
diff --git a/upgrading.md b/upgrading.md
index fab4ace..98c56ba 100644
--- a/upgrading.md
+++ b/upgrading.md
@@ -8,10 +8,18 @@ composer update protonemedia/laravel-splade
 npm upgrade @protonemedia/laravel-splade
 ```
 
-Make sure to clear Laravel's [view cache](https://laravel.com/docs/9.x/views#optimizing-views) after upgrading:
+Make sure to clear Laravel's [view cache](https://laravel.com/docs/10.x/views#optimizing-views) after upgrading:
 
 ```bash
 php artisan view:clear
 ```
 
-Lastly, if you've published the config file or the Blade templates, make sure your customizations are up-to-date with the defaults.
\ No newline at end of file
+Lastly, if you've published the config file or the Blade templates, make sure your customizations are up-to-date with the defaults.
+
+## Verify installed packages
+
+You may use the built-in Artisan Command to show the installed versions of the packages:
+
+```bash
+php artisan splade:show-versions
+```
\ No newline at end of file
diff --git a/using-vue-libraries.md b/using-vue-libraries.md
index ed6969d..4a97ca9 100644
--- a/using-vue-libraries.md
+++ b/using-vue-libraries.md
@@ -1,3 +1,8 @@
+---
+description: You may Vue libraries in a Laravel Splade app by install the library using npm, and then import and register it in the main app.js file. You must import and register the component by passing both a name string and a component definition.
+keywords: laravel blade vue, laravel vue blade, laravel vue library, laravel vue libraries
+---
+
 # Using Vue libraries
 
 Using Vue libraries in a Splade app works the same as any other Vue application. You may install the library using `npm`, and then import and register it in the main `app.js` file. If you're using [SSR](/ssr.md), make sure to import the component in `ssr.js` as well.
@@ -69,4 +74,44 @@ Now you may use the library in a Blade template. Note how we loop over the `$pro
         </template>
     </Carousel>
 </x-layout>
-```
\ No newline at end of file
+```
+
+## Passing Data
+
+You may use Laravel's built-in `@js` directive to pass data to Vue components. For example, you may pass multiple props to this `apexchart` Vue component:
+
+```blade
+<apexchart
+    :width="@js($chart['width'])"
+    :height="@js($chart['height'])"
+    :type="@js($chart['type'])"
+    :options="@js($chart['options'])"
+    :series="@js($chart['series'])"
+/>
+```
+
+However, in this case, it would be way shorter to pass the entire `$chart` array using Vue's `v-bind` directive:
+
+```blade
+<apexchart v-bind="@js($chart)" />
+```
+
+Alternatively, if you don't want to use the `@js` directive, you could use Splade's [Data Component](/x-data.md) as a wrapper around the component:
+
+```blade
+<x-splade-data :default="$chart">
+    <apexchart
+        :width="data.width"
+        :height="data.height"
+        :type="data.type"
+        :options="data.options"
+        :series="data.series"
+    />
+</x-splade-data>
+
+<!-- Or, using the shorthand syntax: -->
+
+<x-splade-data :default="$chart">
+    <apexchart v-bind="data" />
+</x-splade-data>
+```
diff --git a/x-content.md b/x-content.md
new file mode 100644
index 0000000..6f101da
--- /dev/null
+++ b/x-content.md
@@ -0,0 +1,15 @@
+# X-Splade-Content Component
+
+All templates are passed to the Vue render engine. Still, sometimes you want to output raw, pre-rendered HTML, and you might want to bypass Vue's interpolation using the **Content Component**. A typical example is pre-rendered Markdown content. Note that the content is static, and you can't pass Splade or Vue components.
+
+```blade
+<x-splade-content :html="$renderedMarkdown" />
+```
+
+By default, the element is rendered as a `div`, but you may customize it, as well as pass other attributes:
+
+```blade
+<x-splade-content as="article" class="prose" :html="$renderedMarkdown" />
+```
+
+As [stated in the Vue documentation](https://vuejs.org/api/built-in-directives.html#v-text), only use this component with trusted content and never on user-provided content, as it may lead to XSS attacks.
\ No newline at end of file
diff --git a/x-data.md b/x-data.md
index 66c7e35..3431fb3 100644
--- a/x-data.md
+++ b/x-data.md
@@ -1,6 +1,6 @@
 # X-Splade-Data Component
 
-You may use the **Data Component** to interact with a set of reactive data *inside* the component. To get started, you don't even need to define a structure of a default set of data.
+You may use the **Data Component** to interact with a set of reactive data *inside* the component. To get started, you don't even need to define a structure or a default set of data.
 
 ```blade
 <x-splade-data>
@@ -37,7 +37,7 @@ As you can see, this allows you to pass in arrays, but you can also use `Arrayab
 </x-splade-data>
 ```
 
-Note that the user data is passed to the frontend, so please be sure sensitive attributes [hidden](https://laravel.com/docs/9.x/eloquent-serialization#hiding-attributes-from-json).
+Note that the user data is passed to the frontend, so please be sure sensitive attributes are [hidden](https://laravel.com/docs/10.x/eloquent-serialization#hiding-attributes-from-json), or use the built-in [Transformer feature](/transformers.md).
 
 ## Remember
 
@@ -72,3 +72,23 @@ The remembered state will be lost whenever the user fully refreshes the app. You
     <button @click.prevent="data.accepted = true">Accept</button>
 </x-splade-data>
 ```
+
+## Global Store
+
+Sometimes you want to use a set of reactive data through the template or layout. Instead of wrapping everything inside the data component, you may also define a store and use it at other places in your template.
+
+```blade
+<x-splade-data store="navigation" default="{ opened: false }" />
+
+<!-- other elements... -->
+
+<button @click.prevent="navigation.opened = true">
+    Open Navigation
+</button>
+
+<nav v-show="navigation.opened">
+    ...
+</nav>
+```
+
+You must pass a key to the `store` attribute and avoid generic naming. For example, don't use keys like *data*, *form*, and *toggle* as they might interfere with other scoped Vue components.
\ No newline at end of file
diff --git a/x-defer.md b/x-defer.md
index a4e11b0..d01d3fa 100644
--- a/x-defer.md
+++ b/x-defer.md
@@ -5,14 +5,14 @@ The **Defer Component** allows you to load data asynchronously. The component ex
 ```blade
 <x-splade-defer url="https://api.com/quote/random">
     <p v-show="processing">Loading random quote...</p>
-    <p v-if="response" v-text="response.data.quote" />
+    <p v-if="response.data" v-text="response.data.quote" />
     <button @click.prevent="reload">New quote</button>
 </x-splade-defer>
 ```
 
-## Request body
+## Request body and headers
 
-By default, the component performs a `GET` request with an `application/json` accept header. You may change this with the `method` and `accept-header` attributes. In case you need to post data, you may use the `request` attribute:
+By default, the component performs a `GET` request with an `application/json` accept header. You may change this with the `method` and `accept-header` attributes. In case you need to post data, you may use the `request` attribute. Just like the [Data component](/x-data.md), it allows you to pass a PHP value *or* a JavaScript object. The value passed to the `request` attribute will be parsed by Vue, not by PHP.
 
 ```blade
 <x-splade-defer method="POST" url="/post/increase" request="{ post_id: 1 }">
@@ -20,6 +20,20 @@ By default, the component performs a `GET` request with an `application/json` ac
 </x-splade-defer>
 ```
 
+If you want to parse the value by PHP, you may use the `:request` attribute (note the colon).
+
+```blade
+<x-splade-defer method="POST" url="/post/increase" :request="['post_id' => 1]">
+```
+
+You can do the same for adding headers:
+
+```blade
+<x-splade-defer method="POST" url="/post/increase" headers="{ 'In-Background': 1 }">
+
+<x-splade-defer method="POST" url="/post/increase" :headers="['In-Background' => 1]">
+```
+
 ## Poll
 
 You may also use this component to poll for new data. With the `poll` attribute, you can specify the interval in milliseconds.
@@ -60,6 +74,25 @@ The component can watch a passed value for changes using the `watch-value` attri
 
 If you want to watch all form data, you may pass `form.$all` to the `watch-value` attribute.
 
-## Async templates
+## Event
+
+The component emits `success` and `error` events, allowing you to interact with the response data within your template. For example, you may set a form value on a successful request. Note that the `url` attribute supports *Template literals*, making it perfect for generating dynamic URLs:
+
+```blade
+<x-splade-form>
+    <x-splade-input name="zip" label="ZIP code" />
+    <x-splade-input name="city" label="City" />
+
+    <x-splade-defer
+        url="`https://example-city-api.com/${form.zip}/json/`"
+        watch-value="form.zip"
+        watch-debounce="100"
+        manual
+        @success="(response) => form.city = response.city"
+    />
+</x-splade-form>
+```
+
+## Async templates and Rehydration
 
-If you want to load sections of your template asynchronously, check out the [Lazy Loading](/lazy-loading.md) section.
\ No newline at end of file
+If you want to load sections of your template asynchronously, check out the [Lazy Loading](/lazy-loading.md) section. There's also a [Rehydrate Component](/x-rehydrate.md) to reload a section of your Blade template.
\ No newline at end of file
diff --git a/x-event.md b/x-event.md
index 735f1a6..0fef484 100644
--- a/x-event.md
+++ b/x-event.md
@@ -1,12 +1,12 @@
 # X-Splade-Event Component
 
-The **Event Component** might be the most incredible Splade component of all. It allows you to listen for broadcasted events using [Laravel Echo](https://laravel.com/docs/9.x/broadcasting#client-side-installation).
+The **Event Component** might be the most incredible Splade component of all. It allows you to listen for broadcasted events using [Laravel Echo](https://laravel.com/docs/10.x/broadcasting#client-side-installation).
 
 ## Setup
 
 This component assumes you've set up Laravel Echo as in the official docs. You need to make sure the Echo instance is accessible through `window.Echo`. Future releases of Splade might allow for other implementations.
 
-## Refresh on event
+## Redirect on event
 
 Imagine your app allows customers to make payments. The payment provider redirects back to a *status* page, and performs a webhook request once the payment has succeeded. On the status page, you may poll for an updated status, but also listen for a broadcasted event. With Splade, you may instruct the status page to listen to the `OrderWasPaid` event and redirect to another page when the event is fired.
 
@@ -67,6 +67,18 @@ class OrderStatusWasUpdated implements ShouldBroadcast
 }
 ```
 
+Optionally, you may preserve the scroll state:
+
+```php
+Splade::refreshOnEvent()->preserveScroll();
+```
+
+Instead of doing this in the Event class, you may also use the `preserve-scroll` attribute in your Blade template:
+
+```blade
+<x-splade-event private channel="customer-1" listen="OrderStatusWasUpdated" preserve-scroll />
+```
+
 ## Toast on event
 
 Splade allows you to send toasts to the frontend using broadcasted events. Use the `Splade::toastOnEvent()` method to instantiate a new toast.
diff --git a/x-flash.md b/x-flash.md
index 36b3210..e09412a 100644
--- a/x-flash.md
+++ b/x-flash.md
@@ -1,6 +1,6 @@
 # X-Splade-Flash Component
 
-You may use the **Flash Component** to interact with [Flash Data](https://laravel.com/docs/9.x/session#flash-data). First, of course, you may render Flash Data server-side with Blade, but if you redirect back to the same page, for example, after [form submission](/x-form.md), you may choose to not reload the page. In that case, the browser won't update the server-side rendered Flash Data.
+You may use the **Flash Component** to interact with [Flash Data](https://laravel.com/docs/10.x/session#flash-data). First, of course, you may render Flash Data server-side with Blade, but if you redirect back to the same page, for example, after [form submission](/x-form.md), you may choose to not reload the page. In that case, the browser won't update the server-side rendered Flash Data.
 
 ```blade
 <x-splade-flash>
@@ -9,4 +9,4 @@ You may use the **Flash Component** to interact with [Flash Data](https://larave
 ```
 
 > **Warning**
-> By default, Splade will share *all* Flash Data to the frontend. You may disable this behavior with the `splade.share_session_flash_data` configuration key.
+> By default, Splade will share *all* Flash Data to the frontend. You may disable this behavior with the `splade.share_session_flash_data` [configuration key](/customization.md).
diff --git a/x-form.md b/x-form.md
index 98a6ab4..c8a29b4 100644
--- a/x-form.md
+++ b/x-form.md
@@ -10,6 +10,8 @@ The **Form Component** allows you to send forms asynchronously. This way, you'll
 </x-splade-form>
 ```
 
+The example above uses regular HTML form inputs, but Splade also comes with a collection of feature-rich [Form Components](/form-overview.md). These components all support labels, validation, data-binding, are more.
+
 ## Method and Validation errors
 
 Just like traditional forms, there's a `method` attribute. In addition, you may use the `form.errors` prop to evaluate validation errors:
@@ -62,7 +64,27 @@ Instead of fully unguarding the form, you may specify which attributes to unguar
 <x-splade-form ... :unguarded="['name', 'email']" />
 ```
 
-You can read more about this behaviour on the [Form Model Binding](/form-model-binding-attributes.md) page. Even better, the dedicated [Form Components](/form-overview.md) handle this automatically for you.
+You can read more about this behavior on the [Form Model Binding](/form-model-binding-attributes.md) page. Even better, the dedicated [Form Components](/form-overview.md) handle this automatically for you.
+
+## Using Data
+
+Besides binding form data to an input element, you may the form data the build interactive elements just like the [Data component](/x-data.md). For example, you could use the `form` object to toggle classes or show an element.
+
+```blade
+<x-splade-form>
+    {{-- Interact with the value of the data --}}
+    <input type="text" v-model="form.name" />
+    <p>Your name is: <span v-text="form.name" /></p>
+
+    {{-- Toggle classes based on the value of the data --}}
+    <input type="checkbox" v-model="form.newsletter" />
+    <svg :class="{ 'text-green-500': form.newsletter, 'text-red-500': !form.newsletter }" />
+
+    {{-- Show elements based on the value of the data --}}
+    <input type="checkbox" v-model="form.agree_with_terms" />
+    <button type="submit" v-show="form.agree_with_terms">Submit</button>
+</x-splade-form>
+```
 
 ## Confirmation
 
@@ -83,6 +105,34 @@ In addition, you may customize the confirmation dialog:
 >
 ```
 
+Instead of the `confirm` attribute, you may also use the `confirm-danger` attribute to render a red confirmation button.
+
+### Password Confirmation
+
+It's even possible to require the user to confirm their password within the confirmation dialog. First, you must register a supporting route using the `spladePasswordConfirmation()` method on the `Route` facade. As of version 1.2.2, the automatic installer does this for you. If you need to register the route manually, make sure it uses the `web` Middleware, for example, in `web.php`:
+
+```php
+Route::spladePasswordConfirmation();
+```
+
+Now you may add the `require-password` attribute:
+
+```blade
+<x-splade-form confirm require-password>
+```
+
+Only when the password is correct it submits the form. Splade will add the entered password to the form data as a `password` field. This way, you may recheck the password *server-side* in the form target action. For security reasons, this is disabled for `GET` requests. You can change the field by passing a value to the `require-password` attribute:
+
+```blade
+<x-splade-form confirm require-password="password_confirmation">
+```
+
+To prevent users from re-entering their password over and over, you may use the `require-password-once` attribute. Once the user has successfully entered their password, it won't be asked again until the number of seconds (defined with the `auth.password_timeout` config key) has elapsed:
+
+```blade
+<x-splade-form confirm require-password-once>
+```
+
 ## File uploads
 
 You may use the input event to bind the selected file to your form data:
@@ -97,6 +147,71 @@ You may use the input event to bind the selected file to your form data:
 
 The dedicated [File Component](/form-file.md) provides a cleaner solution, and has support for selecting multiple files as well as displaying the filename of the selected file.
 
+## File downloads
+
+If the form submittion results in a file download, you may use the `blob` attribute to let Splade handle the download:
+
+```blade
+<x-splade-form blob>
+    <input v-model="form.code" />
+    <button type="submit">Download</button>
+</x-splade-form>
+```
+
+## State
+
+There are several props that you can use to show the state of the form:
+
+```blade
+<x-splade-form>
+    <p v-if="form.processing">Submitting the data...</p>
+</x-splade-form>
+
+<x-splade-form stay>
+    <p v-if="form.wasSuccessful">Successfully submitted!</p>
+
+    <p v-if="form.recentlySuccessful">Flash message to show success!</p>
+</x-splade-form>
+```
+
+## Submit on change
+
+Sometimes you want to submit the form whenever a value changes, for example, on a settings page that you want to save immediately. For this, you may use the `submit-on-change` attribute.
+
+```blade
+<x-splade-form submit-on-change>
+```
+
+In addition, you may optionally specify one or more values (with an `array` or `string`) that Splade should watch instead of all values.
+
+```blade
+<x-splade-form submit-on-change="name">
+
+<x-splade-form submit-on-change="name, email">
+
+<x-splade-form :submit-on-change="['name', 'email']">
+```
+
+While this is great for elements like checkboxes, radios, and selects, it might lead to a bad user experience when applied to text inputs, as the form disables user input on submission. To overcome this, you may use the `background` attribute. This prevents to form from disabling user input and leaves the state properties (`processing`, `wasSuccessful`, and `recentlySuccessful`) untouched. In addition, to prevent the form from submitting on every keystroke, you may use the `debounce` attribute to set a debounce time in milliseconds:
+
+```blade
+<x-splade-form submit-on-change background debounce="500">
+    <input v-model="form.message" />
+</x-splade-form>
+```
+
+If you still want to indicate whether the form is processing, you may use the `processingInBackground` property:
+
+```blade
+<x-splade-form submit-on-change background debounce="500">
+    <input v-model="form.message" />
+
+    <p v-if="form.processingInBackground">Saving message in background...</p>
+
+    <button type="submit">Send message</button>
+</x-splade-form>
+```
+
 ## Reset and restore form
 
 You may use the `form.reset` method to clear all form data.
@@ -119,9 +234,31 @@ Similarly, there's a `form.restore` method to restore the default values.
 </x-splade-form>
 ```
 
+### Prevent navigation on submit
+
+If you want to stay on the same page after a successful request and want to preserve the page's current state, add the `stay` attribute.
+
+```blade
+<x-splade-form stay>
+```
+
+Additionally, a `preserve-scroll` attribute prevents the page from scrolling to the top. This can be useful when submitting a form from a [Table component](/table-overview.md) while returning `redirect()->back()` from the controller:
+
+```blade
+<x-splade-form preserve-scroll>
+```
+
+When the form has been submitted successfully, you may access the response using the `form.$response` prop:
+
+```blade
+<x-splade-form stay>
+    <pre v-text="form.$response" />
+</x-splade-form>
+```
+
 ### Reset and restore on success
 
-If you redirect back to the same page after a successful request and want to preserve the page's current state, add the `stay` attribute. You may choose to reset or restore the form data automatically. You can do this with the `reset-on-success` and `restore-on-success` attributes:
+You may choose to reset or restore the form data automatically. You can do this with the `reset-on-success` and `restore-on-success` attributes:
 
 ```blade
 <x-splade-form stay reset-on-success>
@@ -129,22 +266,40 @@ If you redirect back to the same page after a successful request and want to pre
 <x-splade-form stay restore-on-success>
 ```
 
-## State
+## Form API
 
-There are several props that you can use to show the state of the form:
+The `form` object has several additional methods and properties that you could use. With the `$put` method, you can set a value:
 
 ```blade
-<x-splade-form>
-    <p v-if="form.processing">Submitting the data...</p>
-</x-splade-form>
+<button @click.prevent="form.$put('plan', 'pro')">Set Plan to Pro</button>
+```
 
-<x-splade-form stay>
-    <p v-if="form.wasSuccessful">Successfully submitted!</p>
+The `$all` property could help you debug the Form by printing all values:
 
-    <p v-if="form.recentlySuccessful">Flash message to show success!</p>
-</x-splade-form>
+```blade
+<pre v-text="form.$all" />
+```
+
+If you'd somehow need to submit the Form with a custom trigger, you can use the `submit` method:
+
+```blade
+<div @click.prevent="form.submit">Start</div>
+```
+
+As shown above, there's an `errors` object to evaluate validation errors, but there's also a `hasError` method to determine whether there is an error:
+
+```blade
+<svg v-show="form.hasError('avatar')">...</svg>
+```
+
+If you want full access to the server-side error bag, you may use the `rawErrors` object.
+
+```blade
+<div v-for="(errorArray, key) in form.rawErrors">
+    ...
+</div>
 ```
 
 ## Form components
 
-While writing traditional input elements is fine, Splade comes with various components to build forms even faster. Make sure to check out the [documentation page](/form-overview.md)!
\ No newline at end of file
+While writing traditional input elements is fine, Splade comes with various components to build forms even faster. Make sure to check out the [documentation page](/form-overview.md). There's also an extensive guide about creating [custom form components](/custom-form-components.md).
diff --git a/x-link.md b/x-link.md
index 442af4d..7efba70 100644
--- a/x-link.md
+++ b/x-link.md
@@ -27,6 +27,16 @@ In addition, you may customize the confirmation dialog:
 </Link>
 ```
 
+Instead of the `confirm` attribute, you may also use the `confirm-danger` attribute to render a red confirmation button.
+
+## Redirecting To External Domains
+
+When the URL is outside your application pointing to an external domain, you'd typically use a regular `<a>` element. Still, you may use the `away` attribute on the `Link` component. This can be useful when you have wrapped the component into another component and don't want to change the tag dynamically.
+
+```blade
+<Link away href="https://www.google.com/">Google</Link>
+```
+
 ## Transform all anchors
 
 If you don't want to use the `Link` component but want Splade to transform all `<a>` elements, you need to update the plugin options in the `app.js` file:
@@ -37,4 +47,40 @@ createApp({ render: renderSpladeApp({ el }) })
         'transform_anchors': true,
     })
     .mount(el);
+```
+
+## Method, Headers, and Request Data
+
+By default, the asynchronous page load is a `GET` request, but you may change this with the `method` attribute:
+
+```blade
+<Link href="https://github.com/template/new" method="POST">Start new template</Link>
+```
+
+The component also supports custom headers and request data. While you can use the `headers` and `data` attributes on the `Link` component, there's also a Blade variant of the component. Just like the [Data component](/x-data.md), it allows you to pass a PHP value *or* a JavaScript object:
+
+The value passed to the `data` attribute will be parsed by Vue, not by PHP.
+
+```blade
+<x-splade-link href="https://github.com/template/new" method="POST" data="{ name: 'Untitled Template' }">
+```
+
+If you want to parse the value by PHP, you may use the `:data` attribute (note the colon).
+
+```blade
+<x-splade-link href="https://github.com/template/new" method="POST" :data="['name' => 'Untitled Template']">
+```
+
+You can do the same for adding headers:
+
+```blade
+<x-splade-link href="https://github.com/template/new" method="POST" headers="{ 'X-Redirect-To-Billing-Portal': 1 }">
+
+<x-splade-link href="https://github.com/template/new" method="POST" :headers="['X-Redirect-To-Billing-Portal' => 1]">
+```
+
+Additionally, a `preserve-scroll` attribute prevents the page from scrolling to the top. This can be useful when submitting a form from a [Table component](/table-overview.md) while returning `redirect()->back()` from the controller:
+
+```blade
+<x-splade-link href="https://github.com/project/touch" method="POST" :data="['id' => $item->id]" preserve-scroll>
 ```
\ No newline at end of file
diff --git a/x-modal.md b/x-modal.md
index e7e0997..66dbd2a 100644
--- a/x-modal.md
+++ b/x-modal.md
@@ -1,8 +1,8 @@
 # X-Splade-Modal Component
 
-With the **Modal Component**, Splade has built-in support for modals and slideover. This component allows you to load *any* route into a modal. To prepare a view so you can use it inside a modal, you have to wrap the content in a `<x-splade-modal>` component. Nothing changes when requesting the view *outside* of the modal. Everything will work as it used to be.
+With the **Modal Component**, Splade has built-in support for modals and slideover. This component allows you to load *any* route into a modal. Besides loading the content asynchronously, it also supports pre-loaded content.
 
-For example, here's a page to create a new user. This page is a regular, full-page view that extends the base layout.
+First, let's take a look at loading a route into a modal. To prepare a view to use it inside a modal, you have to wrap the content in a `<x-splade-modal>` component. Nothing changes when requesting the view *outside* of the modal. Everything will work as it used to. For example, here's a page to create a new user. This page is a regular, full-page view that extends the base layout.
 
 ```blade
 @extends('layout')
@@ -60,6 +60,34 @@ You can control the size of the modal with the `max-width` attribute. Valid valu
 <x-splade-modal max-width="lg">
 ```
 
+## Position
+
+By default, the modal is vertically centered. However, you may customize this with the `position` attribute, which you can set to either `top`, `center`, or `bottom`:
+
+```blade
+<x-splade-modal position="top">
+```
+
+The slideover opens on the right side by default, but you may change that as well with the `position` attribute:
+
+```blade
+<x-splade-modal position="left">
+```
+
+## Close behavior
+
+By default, the modal closes when the user presses the *escape* key or clicks outside of the modal. However, you may disable this with the `close-explicitly` attribute:
+
+```blade
+<x-splade-modal close-explicitly>
+```
+
+Suppose you want this to be the default behavior. In that case, you may call the `defaultModalCloseExplicitly` method on the `Splade` facade, for example, in the `AppServiceProvider` class:
+
+```php
+Splade::defaultModalCloseExplicitly();
+```
+
 ## Close Button
 
 The modal and slideover have a *close button*, which you can disable with the `close-button` attribute.
@@ -79,3 +107,40 @@ You can manually close the modal or slideover with the `modal.close()` or `modal
 </x-splade-modal>
 ```
 
+## Pre-loaded content
+
+Instead of loading the content asynchronously, you may also pass the content along with the page. You may do this by passing a `name` attribute to the component and use the name along with a `#` prefix in the `Link` component:
+
+```blade
+<h1>Tickets & Tour Dates</h1>
+
+<Link href="#refund-info">
+    Show Refund Information
+</Link>
+
+<x-splade-modal name="refund-info">
+    <p>...</p>
+</x-splade-modal>
+```
+
+To use a slideover, you must put the attribute on the `x-splade-component` instead of the `Link` component. The `max-width` attribute works with pre-loaded content as well.
+
+```blade
+<h1>Tickets & Tour Dates</h1>
+
+<Link href="#refund-info">
+    Show Refund Information
+</Link>
+
+<x-splade-modal name="refund-info" slideover max-width="lg">
+    <p>...</p>
+</x-splade-modal>
+```
+
+Additionally, it's possible to immediately show the modal on page load with the `opened` attribute:
+
+```blade
+<x-splade-modal opened>
+    <pre>secret-token</pre>
+</x-splade-modal>
+```
\ No newline at end of file
diff --git a/x-rehydrate.md b/x-rehydrate.md
new file mode 100644
index 0000000..f513f46
--- /dev/null
+++ b/x-rehydrate.md
@@ -0,0 +1,76 @@
+# X-Splade-Rehydrate Component
+
+The **Rehydrate Component** can reload a section of your Blade template. You may combine this component with the [Event Bus](/event-bus.md) to trigger the reload on certain events.
+
+To get started, wrap the section you want to be *reloadable* in the component. For example, imagine a list of team members:
+
+```blade
+<ul>
+    @foreach($team->members as $member)
+        <li>{{ $member->name }}</li>
+    @endforeach
+</ul>
+```
+
+You may wrap the list and pass the name of the event to the `on` attribute:
+
+```blade
+<x-splade-rehydrate on="team-member-added">
+    <ul>
+        @foreach($team->members as $member)
+            <li>{{ $member->name }}</li>
+        @endforeach
+    </ul>
+</x-splade-rehydrate>
+```
+
+If there's a form that stays on this page after a successful request, you may emit an event that reloads the list:
+
+```blade
+<x-splade-form action="https://github.com/team/member" stay @success="$splade.emit('team-member-added')">
+    <x-splade-input name="name" />
+    <x-splade-submit />
+</x-splade-form>
+```
+
+Of course, when the form doesn't have the `stay` attribute and redirects back to the same page, it will reload the complete page, including the list, but you'll lose the state of other components on the page. This pattern can help avoid that.
+
+### Listen to multiple events
+
+You may listen to multiple events with an array or string:
+
+```blade
+<x-splade-rehydrate on="profile-updated, team-updated">
+
+<x-splade-rehydrate :on="['profile-updated', 'team-updated']">
+```
+
+## Poll
+
+You may also use this component to poll for new data. With the `poll` attribute, you can specify the interval in milliseconds.
+
+```blade
+<x-splade-rehydrate poll="5000">
+    Today's score: {{ $score }}
+</x-splade-rehydrate>
+```
+
+## Conditionals
+
+Don't wrap the Rehydrate Component into an *if-statement*, but always put the statement *within* the component:
+
+```blade
+<!-- Instead of this -->
+@if($user->canUpdateTeam())
+    <x-splade-rehydrate>
+        ...
+    </x-splade-rehydrate>
+@endif
+
+<!-- Do this -->
+<x-splade-rehydrate>
+    @if($user->canUpdateTeam())
+        ...
+    @endif
+</x-splade-rehydrate>
+```
\ No newline at end of file
diff --git a/x-script.md b/x-script.md
new file mode 100644
index 0000000..b7d5508
--- /dev/null
+++ b/x-script.md
@@ -0,0 +1,20 @@
+# X-Splade-Script Component
+
+In addition to building [custom Vue components](/custom-vue-components.md), you may use the **Script Component** to add inline scripts to your Blade template. Usually, the Vue render engine would throw an error on script tags, but this component magically injects your script as if it was called in the [`mounted()`](https://vuejs.org/api/options-lifecycle.html#mounted) hook of a Vue component. This way, we can avoid the typical error, and you get access to the global `$splade` object, which you may use to navigate and access the Event Bus.
+
+Note that this component is quite limited, and it is generally recommended to use custom Vue components.
+
+```blade
+<x-splade-script>
+    document.body.classList.add('bg-confetti');
+</x-splade-script>
+```
+
+Here's another example of using Splade's navigation capabilities:
+
+```blade
+<x-splade-script>
+    setTimeout(() => $splade.visit('/destination'), 5000);
+</x-splade-script>
+```
+
diff --git a/x-transition.md b/x-transition.md
index 8fa44e3..4b7edf1 100644
--- a/x-transition.md
+++ b/x-transition.md
@@ -62,4 +62,4 @@ Now you can use the preset in your template:
 
 ## Included animations
 
-The included animations are `default`, `opacity`, `fade`, and `slide-right`.
\ No newline at end of file
+The included animations are `default`, `opacity`, `fade`, `slide-left`, and `slide-right`.
\ No newline at end of file