MARKETPLACE
PLUGINS
SMOOTH SIGNATURE PAD (PRO)
Smooth Signature Pad (Pro) logo

Smooth Signature Pad (Pro)

Published December 2025
   •    Updated May 2026

Plugin details

Smooth Signature Pad (Pro) is the professional standard for capturing digital signatures and annotations in Bubble.
Unlike basic canvas tools, this plugin uses Bezier curve interpolation to simulate the physics of a real pen. The faster you draw, the thinner the line becomes, creating a natural and biometric-looking signature.

🔥 Pro Features:

↩️ Undo Functionality: Mistake? Just undo the last stroke instead of clearing the whole pad.

📸 Image Annotation: Upload an image (e.g., a photo of a document or a previous signature) onto the canvas to draw over it.

📐 SVG Vector Export: Get infinite-resolution signatures perfect for PDFs and printing.

🖊️ Pen Control: Customize the minimum and maximum line thickness for a "Ballpoint" or "Marker" feel.

🔒 Read-Only Mode: Display signatures securely without allowing edits.

☁️ Native Upload to Bubble (S3) Stop saving heavy Base64 strings to your database.

New Action Upload Signature: Sends the file directly to your Bubble storage and returns a clean URL.

SVG Vector Support: The only plugin that lets you save signatures as .svg files. Perfect for PDF generation, contracts, and printing (infinite quality, no pixelation).

📱 Smart Resize (Mobile Rotation Fix)

Rotation Bug Fixed: In most plugins, if a user rotates their phone, the signature disappears. v2.0 fixes this. We now persist the drawing data during any resize event.

Retina Ready: Crisp lines on high-DPI screens.

🎨 Pro Features

Background Image Support: Load a contract or image and sign on top of it.

Undo/Redo: Full history support, even with background images.

Dynamic Styles: Change pen color and thickness programmatically via workflow.

🎛️ Built-in Toolbar UI: A stunning, plug-and-play native interface. Includes buttons for Clear, Undo, Redo, Lock, Download, Background Upload, Color Picker, and Pen Controls—zero Bubble workflows required!

⌨️ Typed Signatures (Auto-Sign): Users can now type their name to instantly generate a beautiful cursive signature using premium Google Fonts. They can even draw over the typed text!

✒️ Pro Pen Physics Engine: Signatures now feel completely organic. Includes an Anti-Jitter system to smooth hand tremors and new Pen Modes (Fountain Pen, Ballpoint, Marker) that react to drawing velocity.

📸 High-Fidelity Virtual Export Engine: The upgraded Save Signature action now supports True Scaling (up to 3x HD resolution for PDFs), smart whitespace cropping (Trim), and output formatting (PNG/JPG).

📱 Flawless Responsiveness: Integrated ResizeObserver ensures the digital pen perfectly matches the mouse pointer, even if the canvas stretches or shrinks dynamically.


Here is what makes V4 a game-changer for B2B and LegalTech apps:

🛡️ 1. SHA-256 Cryptographic Hashing
The moment a user finishes signing, the plugin generates a unique SHA-256 Hash of the stroke data and timestamp. If a single pixel is ever altered, the hash breaks. Total tamper resistance!

🕵️ 2. Auto Fingerprinting & Audit Trail
V4 silently captures the user's Operating System (Windows, MacOS, iOS, etc.) and Browser type in real-time, instantly exposing them as Bubble States so you can save them to your database for legal compliance.

🖃 3. Visual Security Watermark (Stamping)
Exporting a signature? Our engine now dynamically expands the canvas and stamps the Signer's Name, exact ISO Timestamp, and the SHA-256 Hash directly onto the final PNG/JPEG image. This works natively via the built-in download button AND your Bubble Workflow Actions (Save/Upload)!

Demo Test: https://demo-app-56978.bubbleapps.io/version-test/signature_pro/1764673550938x283719504528054500

Editor: https://bubble.io/page?id=demo-app-56978&test_plugin=1764666889159x311967997461790700_current&tab=Design&name=signature_pro&ai_generated=true&type=page&elements=bTIbv

$15

One time  •  Or  $5/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

NoCoddo logo
NoCoddo
Joined 2025   •   96 Plugins
View contributor profile

Instructions

How to use Smooth Signature Pad (Pro):
1. Setup: Drag the element onto your page. Set a fixed size (e.g., 500x300px).

2. Customization (Properties):

  - Colors: Set the Pen Color and Background Color.

  - Placeholder: Customize the "Sign Here" text and color.

  - Line Width: Adjust Min Width and Max Width to change the pen thickness.

  - Locking: Check Read Only to prevent drawing (useful for displaying saved data).

3. Actions (Workflows):

  - Save: Trigger the Save Signature action. You can choose to save with a Transparent Background (PNG) or a solid background (JPG).

  - Undo: Trigger Undo Last Stroke to remove the last line drawn.

  - Clear: Trigger Clear to reset the pad completely.

  - Load Image: Use the Load Signature action to inject an image (from a Picture Uploader or Database) into the canvas background. Great for annotating photos.

4. Saving the Result: Listen for the "Signature is saved" event. You will have access to two outputs:

  - saved_image: The standard image (PNG/JPG).

  - saved_image_svg: The vector format (best for PDFs).


🎛️ Enabling the Built-in Toolbar:

Simply drop the element onto your page and check the Show Built-in Toolbar property.

The plugin will automatically render a responsive, native UI to handle Undo, Redo, styling, and background uploads without you needing to build a single button or workflow!

⌨️ Using Typed Signatures:

If the toolbar is enabled, users can click the "Type" button, type their name, and select a cursive font.

Pro Tip: The generated text acts as a "stamp". Users can grab their mouse/stylus to add a custom underline or checkmark right on top of the typed text!

📥 Upgraded "Save Signature" Action (For Workflows):

When your user is ready to submit the document, use the Save Signature action in your workflows.

Use the Trim Whitespace option to automatically crop out empty canvas space (perfect for placing signatures inside tight PDF boxes).

Use the Resolution Multiplier (set to 2 or 3) to generate crystal-clear, non-pixelated images for high-end printing or PDF generation.


How to setup the new Security & Audit features:

1. Place the 'Smooth Signature Pad' on your page.
2. Scroll down to the new "--- SECURITY & AUDIT ---" section in the property editor.
3. In the 'Signer Name' field, insert dynamic data (e.g., Current User's Name) so the plugin knows who is signing.
4. Toggle 'Stamp Audit Trail on Image?' to YES.
5. In your Bubble Workflows, whenever a user signs, save the new exposed states (Audit Browser, Audit OS, Audit Hash, and Signed Timestamp) directly into your database to keep a compliant log.
6. Trigger the "Save Signature" or "Upload to Bubble" workflow actions as usual. The plugin will automatically append the security watermark to the bottom of the exported image!

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Productivity   •   Technical   •   Small Business   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Bubble is Global
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales