PHPackages                             alfianm/filament-signature-pad - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility &amp; Helpers](/categories/utility)
4. /
5. alfianm/filament-signature-pad

ActiveLibrary[Utility &amp; Helpers](/categories/utility)

alfianm/filament-signature-pad
==============================

A Filament v4 plugin that adds a Signature Pad field.

v1.0.0(5mo ago)040MITJavaScriptPHP ^8.2

Since Oct 3Pushed 5mo agoCompare

[ Source](https://github.com/alfianm/filament-signature-pad)[ Packagist](https://packagist.org/packages/alfianm/filament-signature-pad)[ RSS](/packages/alfianm-filament-signature-pad/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (2)Versions (2)Used By (0)

Filament Signature Pad Field
============================

[](#filament-signature-pad-field)

Custom [Filament](https://filamentphp.com/) form field that lets users draw and download a signature. The component ships with a Laravel service provider, Blade view, and a Signature Pad driver tailored for Filament v3+.

---

Requirements
------------

[](#requirements)

- PHP 8.2+
- Laravel 10+
- Filament 3+

---

Installation
------------

[](#installation)

1. Pull the package into your project (point Composer to the path/VCS of this plugin):

    ```
    composer require alfianm/filament-signature-pad
    ```
2. (Optional) If you disabled package auto-discovery, register the service provider manually in `config/app.php`:

    ```
    'providers' => [
        // ...
        Alfianm\FilamentSignaturePad\SignaturePadServiceProvider::class,
    ];
    ```
3. Publish Filament assets so the JavaScript bundle is copied into `public/`:

    ```
    php artisan filament:assets
    ```

    Re-run this command whenever you update the package.
4. Clear cached assets and refresh your browser to make sure the new scripts are loaded.

---

Usage
-----

[](#usage)

In any Filament resource or form schema, import the field class and add it to your form:

```
use Alfianm\FilamentSignaturePad\Forms\Components\SignaturePad;

// ...

SignaturePad::make('signature')
    ->label('Signature')
    ->penColor('#EF4444')        // optional, defaults to black
    ->backgroundColor('white')   // optional, defaults to transparent
    ->height('16rem')            // optional, defaults to 14rem
    ->downloadPadding(12),       // optional, padding (px) around signature when downloaded
```

When the user draws on the field, the Image (base64 PNG) is stored in the form state. You can save the string directly to your database or process it (e.g. store as file storage).

The **Download** button generates a PNG cropped to the drawn area. Adjust the `downloadPadding()` value if you want more or less whitespace around the signature.

---

Updating Assets
---------------

[](#updating-assets)

If you pull updates that change the JavaScript driver, run:

```
php artisan filament:assets
```

Then hard-refresh your Filament panel or clear browser cache to ensure the latest script loads.

---

Troubleshooting
---------------

[](#troubleshooting)

- **Command `filament:assets` not found** – verify you are using Filament v3+ and that the package is installed in a Filament project.
- **JS changes not appearing** – run `php artisan filament:assets`, clear compiled views (`php artisan view:clear`), and hard-refresh the browser.
- **Signature not filling full width** – ensure the field is placed inside a column span that occupies the desired width (e.g. call `->columnSpanFull()` on the field in your form schema).

---

License
-------

[](#license)

This plugin is released under the MIT license.

###  Health Score

35

—

LowBetter than 81% of packages

Maintenance70

Regular maintenance activity

Popularity8

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

170d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/c2ba4bb8ff1a2a6e6f36bbc4ba587cb86a34b3ec0bf8cf1ed4af7bfca9f2fa86?d=identicon)[alfianm](/maintainers/alfianm)

---

Top Contributors

[![apin1411](https://avatars.githubusercontent.com/u/50357438?v=4)](https://github.com/apin1411 "apin1411 (1 commits)")

### Embed Badge

![Health badge](/badges/alfianm-filament-signature-pad/health.svg)

```
[![Health](https://phpackages.com/badges/alfianm-filament-signature-pad/health.svg)](https://phpackages.com/packages/alfianm-filament-signature-pad)
```

###  Alternatives

[bezhansalleh/filament-google-analytics

Google Analytics integration for FilamentPHP

205134.9k3](/packages/bezhansalleh-filament-google-analytics)[spatie/laravel-mix-preload

Add preload and prefetch links based your Mix manifest

169175.3k2](/packages/spatie-laravel-mix-preload)[kirschbaum-development/commentions

A package to allow you to create comments, tag users and more

11650.6k](/packages/kirschbaum-development-commentions)[konnco/filament-safely-delete

342.1k](/packages/konnco-filament-safely-delete)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
