valentin-morice/filament-sketchpad

A simple package that provides you with a sketchpad field in Filament

2.0.0 2026-06-27 16:43 UTC

Requires

• php: ^8.2
• filament/forms: ^5.0
• filament/infolists: ^5.0
• filament/support: ^5.0
• spatie/laravel-package-tools: ^1.15.0

Requires (Dev)

• laravel/pint: ^1.0
• nunomaduro/collision: ^8.0
• orchestra/testbench: ^9.0|^10.0
• pestphp/pest: ^3.0
• pestphp/pest-plugin-arch: ^3.0
• pestphp/pest-plugin-laravel: ^3.0

MIT

• valentin-morice

• laravel
• valentin-morice
• filament-sketchpad

README

A simple package that provides you with a sketchpad field in Filament.

Compatibility

Filament	filament-sketchpad
5.x	2.x (this version)
3.x	1.x

Installation

You can install the package via composer:

composer require valentin-morice/filament-sketchpad

Usage

The filament-sketchpad plugin works as any other Filament schema component. Make sure the column on which it is called is cast to array (or json).

use ValentinMorice\FilamentSketchpad\Sketchpad;
use Filament\Schemas\Schema;

public static function form(Schema $schema): Schema
    {
        return $schema
            ->components([
                Sketchpad::make('example'),
            ]);
    }

// An infolist component is also available.
use ValentinMorice\FilamentSketchpad\SketchpadInfolist;

public static function infolist(Schema $schema): Schema
    {
        return $schema
            ->components([
                SketchpadInfolist::make('example'),
            ]);
    }

Set history configuration

// Provide full or partial configuration.
// Keys 'undo' and 'redo' are mandatory.

$config = [
    'undo' => [
         'label' => 'Undo',
         'icon' => 'heroicon-o-arrow-left',
         'color' => 'gray',
    ],
    'redo' => [
            'label' => 'Redo',
            'icon' => 'heroicon-o-arrow-right',
            'color' => 'gray',
    ],
];

FilamentSketchpad::make('example')->history(array |Closure $config);

Set controls configuration

// Provide full or partial configuration.
// Keys 'clear' and 'reset' are mandatory.

$config = [
    'clear' => [
            'label' => 'Clear',
            'icon' => 'heroicon-o-document',
            'color' => 'gray',
    ],
    'reset' => [
            'label' => 'Reset',
            'icon' => 'heroicon-o-trash',
            'color' => 'gray',
    ],
];

FilamentSketchpad::make('example')->controls(array |Closure $config);

Set download configuration

// Provide full or partial configuration.
$config = [
            'label' => 'Download',
            'icon' => 'heroicon-m-arrow-down-tray',
            'color' => 'gray',
            'filename' => 'my-sketch', // saved as my-sketch.png
          ];

FilamentSketchpad::make('example')->download(array |Closure $config);

Minimal mode

Display only icons instead of buttons.

FilamentSketchpad::make('example')->minimal(bool|Closure $bool = true);

Set the height

FilamentSketchpad::make('example')->height(int 400|Closure); // in px

NOTE: All standard injected utilities are available in your closures.

Translations

All button labels and the read-only empty state respect Laravel's active locale. English (en) and French (fr) ship with the package. To customise or add a locale, publish the translations and edit the file:

php artisan vendor:publish --tag=filament-sketchpad-translations

This creates lang/vendor/filament-sketchpad/{locale}/sketchpad.php, exposing the undo, redo, clear, reset, download and empty keys.

Thanks to http://yiom.github.io/sketchpad/ for the JS.

License

The MIT License (MIT). Please see License File for more information.