Signature Pad — WeWeb Custom Element

A freehand signature/drawing pad for WeWeb, built on top of signature_pad.

Features

• Smooth pressure-sensitive strokes (velocity-based width)
• Export as PNG, JPEG, or SVG
• Pre-load a saved signature via initialValue (data URL)
• Disable drawing programmatically
• ResizeObserver-based canvas scaling for crisp output at any DPR
• Internal variables, local context, trigger events, and component actions usable in WeWeb workflows

---

Development

npm i                                  # install dependencies
npm run serve --port=3100              # serve locally, then add in WeWeb editor developer popup
npm run build --name=signature-pad    # check for build errors before release

---

Properties

Pen

Property	Type	Default	Description
Pen Color	Color	#000000	Ink color
Pen Min Width	Number	0.5	Minimum stroke width (px)
Pen Max Width	Number	2.5	Maximum stroke width (px)
Dot Size	Number	0	Single-tap dot radius. 0 = average of min/max
Velocity Filter	Number	0.7	How quickly width reacts to speed (0–1)
Throttle (ms)	Number	16	Max one point per N ms. 0 = no throttle
Min Distance (px)	Number	5	Minimum px between recorded points

Canvas

Property	Type	Default	Description
Background Color	Color	#ffffff	Canvas fill color (also baked into the export). Use rgba(0,0,0,0) for transparent PNG

Output

Property	Type	Default	Description
Output Format	Select	PNG	PNG / JPEG / SVG
JPEG Quality	Number	0.92	Compression quality (0–1). Only shown when format is JPEG
SVG Include Background	Toggle	off	Embed a background <rect> in SVG output
SVG Embed Initial Image	Toggle	off	Embed the pre-loaded image inside SVG output

Interaction

Property	Type	Default	Description
Initial Value	Text	—	Data URL to pre-load (e.g. a previously saved signature)
Disabled	Toggle	off	Prevent the user from drawing

Initial Value format

initialValue must be a data URL — raw SVG markup will not work. Examples:

data:image/png;base64,iVBORw0K...
data:image/jpeg;base64,/9j/4AAQ...
data:image/svg+xml;base64,PHN2Zy...

To use an SVG string, base64-encode it first:

"data:image/svg+xml;base64," + btoa(svgString)

---

Internal Variables

Accessible in WeWeb bindings as component variables:

Name	Type	Description
value	string	Current signature as a data URL (empty string when blank)
isEmpty	boolean	true when the pad has no strokes

---

Local Context

Accessible in the formula editor under context.local.data['signature-pad']:

context.local.data?.['signature-pad']?.['value']
context.local.data?.['signature-pad']?.['isEmpty']

---

Trigger Events

Event	Payload	Fires when
On change	{ value, isEmpty }	After any stroke ends or pad is cleared
On clear	{ value: '' }	Pad is cleared
On begin drawing	{}	User starts a new stroke
On end drawing	{ value, isEmpty }	User lifts pen/finger

---

Component Actions

Action	Description
Clear signature	Wipes the canvas and resets the value
Redraw canvas	Re-renders existing strokes (useful after layout changes)