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 & Helpers](/categories/utility) 4. / 5. alfianm/filament-signature-pad ActiveLibrary[Utility & Helpers](/categories/utility) alfianm/filament-signature-pad ============================== A Filament v4 plugin that adds a Signature Pad field. v1.0.0(7mo ago)040MITJavaScriptPHP ^8.2 Since Oct 3Pushed 7mo 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 1mo ago 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 34 — LowBetter than 77% of packages Maintenance64 Regular maintenance activity Popularity8 Limited adoption so far Community6 Small or concentrated contributor base Maturity48 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 222d 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 [illuminate/pipeline The Illuminate Pipeline package. 9446.6M213](/packages/illuminate-pipeline)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[kirschbaum-development/commentions A package to allow you to create comments, tag users and more 12369.2k](/packages/kirschbaum-development-commentions)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle)[interaction-design-foundation/laravel-geoip Support for multiple Geographical Location services. 17221.0k3](/packages/interaction-design-foundation-laravel-geoip)[aedart/athenaeum Athenaeum is a mono repository; a collection of various PHP packages 255.2k](/packages/aedart-athenaeum) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)