How to Build a Simple Notebook App with Laravel & Filament v4 (Step-by-Step Guide)

This guide walks you through building a minimal Notebook application using Filament v4. We’ll use Filament’s Panel and Resources to scaffold a CRUD system for quickly managing notes.

This tutorial is designed for developers new to Filament v4 who want to try it out by building something small but valuable. We’ll create a minimal Notebook application, which will help you get familiar with Filament’s core concepts without overwhelming detail.

The goal is not to build a production-ready app, but to walk through the first steps: setting up a panel, defining resources, and scaffolding a CRUD interface. By the end, you’ll have a working application and a better understanding of how Filament fits into your Laravel projects, so you can confidently explore more advanced features on your own via the excellent official Filament documentation: https://filamentphp.com/docs/4.x/getting-started.

Prerequisites

To follow along, you should have:

• A working Laravel 12+ project set up (we will install a new Laravel 12 app from scratch here)
• Basic knowledge of Laravel models, migrations, and routes
• PHP 8.2+ and Composer installed

No prior experience with Filament is required.

What we’ll build

Before jumping into the code, let’s clarify the scope of this tutorial. Our goal is to create a very simple Notebook application using Filament v4. Along the way, you’ll learn the basics of panels, models, migrations, and resources.

Here’s what we’ll cover:

• The app will be accessible at the path /admin.
• We’ll create a Note model to store our notes.
• The database will have a notes table with three fields:
  • title: a short string, managed with a standard text input
  • content: a long string, managed with a Markdown editor
  • active: a boolean value
• We’ll create a Note Resource in Filament, keeping the naming consistent with the model (Note).

By the end, you’ll have a working CRUD interface where you can create, edit, and delete notes in your admin panel.

Install a fresh Laravel project

Create a new Laravel project from scratch using composer (or you can use the laravel new command in the case you already installed the Laravel Installer package):

composer create-project laravel/laravel notebook
cd notebook

The command will set up the database connection (SQLite by default) and run the initial migrations automatically.

If you want to apply changes in your configuration, you can edit the .env file, and in the case you are changing the database configuration, you can run the migration again:

php artisan migrate

Install Filament v4

Once you have your Laravel app, you have to add the Filament package via composer:

composer require filament/filament:"^4.0"

Your first Filament Panel

In Filament, a Panel is the entry point to your application’s admin or dashboard area. You can think of it as the “container” that brings everything together: resources, pages, widgets, and navigation.

A Panel defines things like:

• The URL where your admin area lives (e.g., /admin)
• The look & feel (themes, colors, layout)
• Which resources and tools are available inside it

Why is the Filament Panel important?

Every Filament application starts with at least one Panel. Without it, your resources and pages wouldn’t have a place to live. It’s what turns a plain Laravel app into a Filament-powered dashboard.

In this tutorial, we’ll create a single panel for our Notebook app, which will serve as the foundation for adding resources (like our notes) and extending the interface later on.

Installing a Filament Panel

You can install a Filament panel using the Artisan command:

php artisan filament:install --panels

This command will prompt you for your panel's identifier (id). For example, if you choose admin, your panel will be available (by default, but later you can change it) at the /admin URL.

After installation, Filament will generate a provider file:

app/Providers/Filament/AdminPanelProvider.php

This is where you can customize your panel’s configuration, including the path, look & feel, and available features.

Now, start your development server:

php artisan serve

Visit http://localhost:8000/admin in your browser.

To log in, you’ll need at least one user in your database with valid credentials. Filament relies on Laravel’s authentication system, so make sure you have a user set up before accessing the panel.

Create a user to log in

You need at least one user before you can access the Filament panel.
Filament v4 provides a handy command for this:

php artisan make:filament-user

This will ask you for:

• Name
• Email
• Password

Once created, you can log in to your panel at:

http://localhost:8000/admin

using the email and password you just set up.

Now you have an administrator account to manage your Notebook app.

If you are using the php artisan serve command remember to check if it is running to make the web app available through the browser.

Modeling your data

Now that we have a Filament panel up and running, the next step is to decide what data we need to manage and how it should be structured in the database.

Filament works hand-in-hand with Laravel models and database tables.
Each “thing” you want users to create, edit, or view usually gets:

1. A database table: to actually store the data.
2. An eloquent model: the PHP class that represents that table.
3. A Filament resource: the UI layer that lets users manage records via forms and tables.

The core piece of data for our Notebook app is simple: a note.

• Each note has a title (short text).
• Each note has content (long text, often with formatting).
• Each note has a boolean flag named active (boolean, false as default).
• Each note has timestamps (created_at, updated_at) to know when it was written.

Later, you can associate each note with the user who created it, so every user gets their own private notebook.

By thinking through this structure first, we ensure that:

• Our database tables reflect real-world objects.
• Our models are clean and easy to work with.
• Our Filament resources align directly with what users see in the panel.

With that in mind, let’s create the database table and model for our note.

Create the Note model and the migration file.

First, we must generate a model representing our notes and a migration to define the database table. Laravel makes this easy with a single command:

php artisan make:model Note -m

The -m flag tells Laravel to create a migration file along with the model. The migration file is created in the database/migrations/ directory.

Edit the migration file, adding the definition of the title, content, and active fields:

Schema::create('notes', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('content')->nullable();
    $table->boolean('active')->default(false);
    $table->timestamps();
});

Run the migration:

php artisan migrate

Adding $fillable property to the Note model

By default, Laravel blocks mass assignment for security.
Since Filament uses Model::create() under the hood, we must explicitly allow fields to be updated.

Edit app/Models/Note.php:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Note extends Model
{
    protected $fillable = [
        'title',
        'content',
        'active'
    ];
}

Without this step, when you save a note, you’ll get an error like:
Illuminate\Database\Eloquent\MassAssignmentException

Generate a Filament Resource

Once we have a model and a database table (via migration), the next step is to give Filament a way to manage that data.
That’s where a Resource comes in.

A Filament Resource is the bridge between your model and the admin panel:

• It defines the forms used to create and edit records.
• It defines the table used to list and search records.
• It handles your CRUD logic (Create, Read, Update, Delete).

We can generate a resource for our Note model with:

php artisan make:filament-resource Note

During the command, you’ll be asked for

• The field to be used to visualize the note label in the UI, (e.g., in breadcrumbs or dropdowns) (we can define title);
• If we want to generate the read-only view form to visualize the details of a note (usually, I answer Yes);
• If the configuration should be generated from the current database columns, I usually answer yes, and then later, I adapt and adjust the configuration. For example, in this tutorial, a text area will be automatically set up for the create and edit form because the content field is a text column from the database perspective. Later, we will improve this using a Markdown editor instead of a text area.

After running the command, you’ll find your new NoteResource.php in the directory:

app/Filament/Resources/Notes/

The NoteResource.php file is where all the resources are initialized.

Each resource (table, form, view) has a specific file. For example, you can edit the file app/Filament/Resources/Notes/Tables/NotesTable.php to handle and customize the table.

For now, we can start using the default resources.

Try it out

• Go to http://127.0.0.1:8000/admin/notes
• Create a note
• Edit with the rich editor
• Manage notes from the table

Fine-Tuning the Notebook App

Our notebook app already works, but Filament makes it easy to improve the user experience with just a few tweaks. Let’s look at two common enhancements:

• Using a Markdown editor instead of a text area forthe content field.
• Adding a filter to the notes table (list) for the active field.

Use a Markdown editor for content field

Right now, our content field uses a very simple text area.
If you prefer to use the Markdown editor, Filament ships with a MarkdownEditor form field.

Open app/Filament/Resources/Notes/Schemas/NoteForm.php and update the form schema, instead of:

Textarea::make('content')
    ->columnSpanFull(),

You should use

MarkdownEditor::make('content')
    ->columnSpanFull(),

remember to use the right namespace:

use Filament\Forms\Components\MarkdownEditor;

Adding a filter for active or inactive notes

Sometimes you want to distinguish between active and inactive notes.
Let’s add the filter as a Tab widget on top of the table.

In theapp/Filament/Resources/Notes/Pages/ListNotes.php file add a method getTabs():

public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}

In this case, remember to add the proper import:

use Filament\Schemas\Components\Tabs\Tab;
use Illuminate\Database\Eloquent\Builder;

Recap of our fine-tuning

With just a few small changes, we’ve made our notebook app:

• More pleasant to write in, with a Markdown editor.
• More organized, with an active/inactive tab filter.

These are just starting points. Filament v4 lets you go further with:

• Custom dashboards and widgets
• Relations between models
• Advanced filtering and sorting
• Permissions and roles

Conclusion

In this guide, we built a Notebook application from scratch using Laravel and Filament v4.

We went step by step:

• Set up a fresh Laravel project and installed Filament.
• Created a Filament Panel to serve as our admin interface.
• Designed the data model for notes and connected it to the database.
• Created users with make:filament-user.
• Generated a Filament Resource to manage notes with forms and tables.
• Fine-tuned the app with improvements like a Markdown editor and filters.

With just a handful of commands and a few lines of configuration, you now have a fully functional note-taking system, proof of how powerful and developer-friendly Filament v4 is.

From here, you could expand the app by:

• Adding tags or categories for notes.
• Allowing users to pin or favorite notes.
• Adding search across titles and content.
• Building a dashboard widget showing recently edited notes.

Filament makes these features straightforward to add, so you can keep evolving your notebook into something even more powerful.

Resources

• Filament official documentation: https://filamentphp.com/docs
• Filament website: https://filamentphp.com/
• Filament Source Code: https://github.com/filamentphp/filament
• Filament official shop: https://shop.filamentphp.com/