tillythecoder.com
tillythecoder.com
Home
Blog
What's new in filament v4 and how to use it in your laravel project's
Tilly The Coder

What's new in filament v4 and how to use it in your laravel project's

Tilly The Coder · ·
6 mins
This is the estimated time it takes to read the article.
Filament
PHP
Laravel

The Laravel ecosystem is constantly evolving, and Filament v4 marks one of the most significant updates for developers building admin panels, dashboards, and content management systems. Filament has already been known for its simple yet powerful approach to building back-office applications, and this latest version brings a wave of performance improvements, modern UI enhancements, and highly customizable form components.

In this article, we’ll dive into what’s new in Filament v4, explore its RichEditor component and merge tags, and show you how to build a real world example with an Article model that leverages these new features. By the end, you’ll have a clear understanding of how to upgrade your Filament powered projects and why this release is a game changer for Laravel developers.

1. Why Filament v4 Matters

If you’ve worked with Filament v2 or v3, you’ll already know how intuitive it is compared to traditional Laravel admin panel solutions. Filament v4 takes this even further by focusing on developer experience, performance, and flexibility. Some key highlights include:

  • Improved performance with fewer Blade partials and optimized Livewire components.

  • Tailwind CSS v4 and the OKLCH color model, which improves visual contrast and accessibility.

  • Nested resources and a fully schema driven UI, making complex resource management easier.

  • A new RichEditor powered by TipTap, which supports custom blocks, JSON storage, and merge tags.

  • A complete overhaul of forms and tables with faster rendering, fewer re-renders, and new components like sliders and code editors.

This release isn’t about flashy features but about improving the core workflow, enabling developers to build production ready admin panels faster.

2. Performance and Developer Experience

One of the most noticeable differences is speed. Filament v4 reduces unnecessary Livewire hydration calls, especially when working with large tables or complex forms. For example, table actions no longer trigger re-renders for the entire component, resulting in snappier interactions.

The schema driven UI also adds flexibility. You can now build components with container queries, making your Filament panels more responsive across screen sizes. This is particularly useful for dashboards viewed on tablets or smaller monitors, ensuring that your content remains visually clean.

3. A Closer Look at the RichEditor

One of the biggest changes in Filament v4 is the new RichEditor, powered by TipTap. This editor replaces Trix and introduces modern features like:

  • JSON storage format, making it easier to manipulate content programmatically.

  • Custom blocks such as Hero sections, image galleries, or call-to-action panels.

  • Merge tags for dynamic placeholders like {{ name }}, which can be replaced with runtime values.

  • Advanced file attachment handling with automatic uploads and directory scoping.

If you’ve ever needed a CMS like experience for your Laravel application, this RichEditor is a significant step forward.

4. Real World Example: Building an Article Model

To demonstrate how you can use Filament v4 in practice, let’s create an Article model. This model will use the RichEditor component to handle structured content with merge tags and custom blocks.

<?php

declare(strict_types=1);

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Filament\Forms\Components\RichEditor\Models\Contracts\HasRichContent;
use Filament\Forms\Components\RichEditor\Models\Concerns\InteractsWithRichContent;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Str;

class Article extends Model implements HasRichContent
{
    use HasFactory, InteractsWithRichContent;

    protected $fillable = [
        'title',
        'slug',
        'content',
        'author_id',
        'published_at',
    ];

    protected $casts = [
        'content' => 'array', // Using JSON storage for TipTap content
        'published_at' => 'datetime',
    ];

    public function author()
    {
        return $this->belongsTo(User::class, 'author_id');
    }

    /**
     * Configure Rich Content
     */
    public function setUpRichContent(): void
    {
        $this->registerRichContent('content')
            ->fileAttachmentsDisk('public')
            ->fileAttachmentsDirectory(fn () => "articles/{$this->id}")
            ->customBlocks([
                \App\Models\Blocks\HeroBlock::class,
                \App\Models\Blocks\ImageGalleryBlock::class,
                \App\Models\Blocks\CallToActionBlock::class,
            ])
            ->mergeTags([
                'author' => fn () => $this->author->name ?? 'Guest Author',
                'today'  => fn () => now()->toFormattedDateString(),
                'site'   => fn () => config('app.name'),
            ]);
    }

    /**
     * Generate slug automatically
     */
    protected static function booted(): void
    {
        static::saving(function (self $article): void {
            if ($article->isDirty('title') && !$article->slug) {
                $article->slug = Str::slug($article->title);
            }
        });
    }

    /**
     * Scope for published articles
     */
    public function scopePublished(Builder $query): Builder
    {
        return $query->whereNotNull('published_at')
            ->where('published_at', '<=', now());
    }
}

This setup provides a rich editing experience for article authors, allowing them to insert dynamic placeholders and custom content blocks. When rendering the article on the frontend, you can use $article->renderRichContent('content') to output fully processed HTML.

6. Merge Tags for Dynamic Content

Merge tags are one of the most SEO friendly and user-friendly additions. They allow you to define dynamic variables (like author names or current dates) within your article body. For example:

Hello {{ author }}, thank you for contributing to {{ site }}.  
This article was last updated on {{ today }}.


At runtime, these tags are automatically replaced with real values, meaning you don’t need to hard code them in every piece of content.

For developers running multi tenant systems or personalized CMS features, this is a massive time saver.

7. Other Notable Filament v4 Features

Besides the RichEditor, Filament v4 offers a variety of quality-of-life improvements:

  • Nested Resources: You can now manage related resources (e.g., categories under articles) without building separate admin pages.

  • Improved Tables: Tables can now load data from APIs or custom DTOs, not just Eloquent models.

  • Code Editor Component: Integrated Monaco Editor for editing JSON, Blade snippets, or configuration files directly from the panel.

  • Accessibility Enhancements: All headings, labels, and ARIA roles are dynamically generated, improving your Lighthouse scores.

8. SEO Benefits of Filament v4

From an SEO perspective, clean content editing and structured data are crucial. With TipTap storing content as JSON, you can easily process it into structured HTML or even generate meta descriptions from the content itself. The ability to insert merge tags for things like article dates or site names ensures that your content is always up-to-date and consistent across multiple pages.

Moreover, performance optimizations in v4 mean that admin panels and content publishing workflows are faster, reducing the time to publish articles and keeping your site fresh in the eyes of search engines.

9. Should You Upgrade to Filament v4?

If you’re building a new Laravel project, starting with Filament v4 is a no brainer. For existing v3 projects, the upgrade path is straightforward, but you should verify plugin compatibility as many third-party plugins are still being updated.

Filament v4 is particularly appealing for developers who want to build CMS-like features, thanks to its powerful RichEditor, custom blocks, and merge tags. Whether you’re running a blog, documentation site, or SaaS admin panel, v4’s flexibility means less time wrestling with content and more time shipping features.

10. Final Thoughts

Filament v4 is not just an upgrade; it’s a complete reimagining of how Laravel admin panels can be built. With its modern RichEditor, merge tags, and performance improvements, you have all the tools needed to create powerful, SEO-friendly, and highly interactive back-office experiences.

If you’re running a content-heavy site like a blog or technical documentation, pairing Filament v4 with Laravel’s resourceful backend is a winning combination. With structured content storage and dynamic rendering, your articles will be easier to manage, faster to load, and better optimized for search engines.