Signature ^0.1.23

Touch, mouse, and stylus-friendly signature pad. Variable stroke width driven by pen velocity (signature_pad algorithm), high-DPI crisp rendering, and export to PNG, JPEG, or SVG. Supports undo/redo, load from data URL, and is fully class-bindable.

1. Basic signature

Draw with mouse, finger, or stylus. Value is a PNG data URL.

Sign here

Empty — draw to see the value

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VxSignature } from 'veloxui'
const signature = ref('')
</script>

<template>
  <VxSignature v-model="signature" :height="200" />
</template>

2. Pen color

Pick a pen color — change it anytime, existing strokes keep their original color.

Sign here

vue

<VxSignature v-model="signature" :pen-color="'#2563eb'" />

3. Pen width

Fine-tune the minWidth / maxWidth — the stroke interpolates based on pen velocity.

min width: 1.0max width: 3.0

Sign here

vue

<VxSignature v-model="signature" :min-width="1" :max-width="4" />

4. Grid & baseline guides

Show a light grid or a dashed baseline to help align the signature.

Grid

Sign here

Baseline

Sign here

vue

<VxSignature show-grid />
<VxSignature show-baseline />

5. Background color

Set a paper-like background — useful for non-transparent exports (JPEG) or themed contexts.

Sign here

vue

<VxSignature background-color="#fffbeb" show-baseline pen-color="#78350f" />

6. Sizes

Different heights for compact forms, standard usage, and high-fidelity signing.

Small — 120px

Sign here

Default — 200px

Sign here

Large — 280px

Sign here

vue

<VxSignature :height="120" />
<VxSignature :height="200" />
<VxSignature :height="280" />

7. Disabled & read-only

disabled dims the pad and blocks input. readonly keeps the signature visible but prevents changes — useful for signed documents.

Disabled

Read-only

(Read-only)

vue

<VxSignature disabled />
<VxSignature readonly />

8. Undo, redo, clear

Stroke-level undo/redo via the exposed imperative API.

Sign here

vue

<script setup lang="ts">
import { ref } from 'vue'
const pad = ref()
</script>

<template>
  <VxSignature ref="pad" />
  <button @click="pad.undo()">Undo</button>
  <button @click="pad.redo()">Redo</button>
  <button @click="pad.clear()">Clear</button>
</template>

9. Export — PNG, JPEG, SVG

Export the canvas at any time. PNG preserves transparency; JPEG is smaller; SVG is resolution-independent vector output.

Sign here

const png = pad.value.toDataURL('png')
const jpeg = pad.value.toDataURL('jpeg', 0.85)
const svg = pad.value.toSVG()

10. Load from data URL

Pre-fill the pad via fromDataURL() — or just bind v-model to a saved signature string.

Sign here

await pad.value.fromDataURL(savedSignatureUrl)

11. Custom placeholder

Slot your own placeholder — an icon, helper text, or a prompt.

Draw your signature here

vue

<VxSignature>
  <template #placeholder>
    <MyIcon /> Draw here
  </template>
</VxSignature>

12. Built-in clear button

Show a floating clear button in the top-right — appears only once the user has drawn something.

Sign here

vue

<VxSignature show-clear-button clear-button-text="Reset" />

13. Form integration

Validate, submit, and persist — a typical agreement / consent flow.

Sign to continue

Signature required

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const pad = ref()
const value = ref('')
const isEmpty = computed(() => !value.value)
function submit() {
  if (isEmpty.value) return
  api.saveSignature(value.value)
}
</script>

<template>
  <VxSignature ref="pad" v-model="value" show-baseline />
  <button :disabled="isEmpty" @click="submit">Submit</button>
  <button @click="pad.clear()">Reset</button>
</template>

14. Class-bindable — custom styling

Every part accepts a class binding. Style the root, canvas, placeholder, and clear button.

sign below

vue

<VxSignature
  root-class="custom-sig-root"
  placeholder-class="custom-sig-placeholder"
  clear-button-class="custom-sig-clear"
/>

15. Output type — choose the emitted value

Use outputType to control the shape of the value emitted via v-model / @change. Pick a data URL, raw base64, a Blob, a File, an SVG string, or the raw stroke array. Combines with outputFormat (png / jpeg / svg) for raster/vector choice.

Sign here

Empty — draw to see the value

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VxSignature, type SignatureStroke } from 'veloxui'

// value type follows outputType
const value = ref<string | Blob | File | SignatureStroke[] | null>('')
</script>

<template>
  <!-- Data URL (default) — "data:image/png;base64,..." -->
  <VxSignature v-model="value" output-type="dataurl" />

  <!-- Bare base64 string (no "data:" prefix) -->
  <VxSignature v-model="value" output-type="base64" />

  <!-- Blob — great for FormData / fetch upload -->
  <VxSignature v-model="value" output-type="blob" output-format="png" />

  <!-- File — Blob + filename, drop straight into <input type="file"> workflows -->
  <VxSignature v-model="value" output-type="file" file-name="signature.png" />

  <!-- Raw SVG markup string -->
  <VxSignature v-model="value" output-type="svg" />

  <!-- Raw stroke data — compact, replayable, re-editable -->
  <VxSignature v-model="value" output-type="strokes" />
</template>

TIP

Use blob or file when uploading to a server — skips the ~33% base64 overhead. Use strokes to persist and later re-edit the signature losslessly.

Props

Name	Type	Default	Description
`modelValue`	`string \| Blob \| File \| SignatureStroke[] \| null`	`''`	Two-way bound value. Concrete type depends on `outputType`.
`width`	`number \| string`	`'100%'`	Canvas CSS width — number in pixels or any CSS length.
`height`	`number \| string`	`200`	Canvas CSS height.
`penColor`	`string`	`'#111827'`	Stroke color. Changing mid-draw affects new strokes only.
`minWidth`	`number`	`1`	Minimum stroke width at fastest velocity.
`maxWidth`	`number`	`2.8`	Maximum stroke width at slowest velocity.
`velocityFilterWeight`	`number`	`0.7`	Exponential smoothing factor for velocity (0–1).
`smoothing`	`boolean`	`true`	Use quadratic bezier + variable width. Disable for raw polyline.
`backgroundColor`	`string`	`'transparent'`	Canvas fill. Used for both on-screen render and exports.
`showGrid`	`boolean`	`false`	Draw a light 20px grid.
`showBaseline`	`boolean`	`false`	Draw a dashed baseline at ~78% height.
`gridColor`	`string`	`'rgba(17,24,39,0.08)'`	Grid line color.
`baselineColor`	`string`	`'rgba(17,24,39,0.25)'`	Baseline color.
`outputFormat`	`'png' \| 'jpeg' \| 'svg'`	`'png'`	Raster/vector format used when encoding.
`outputQuality`	`number`	`0.92`	Quality for JPEG export (0–1).
`outputType`	`'dataurl' \| 'base64' \| 'blob' \| 'file' \| 'svg' \| 'strokes'`	`'dataurl'`	Shape of the emitted value — data URL, bare base64, `Blob`, `File`, SVG string, or raw strokes.
`fileName`	`string`	`''`	File name used when `outputType="file"`. Falls back to `signature.{png,jpg,svg}` based on `outputFormat`.
`disabled`	`boolean`	`false`	Disable drawing; dims the pad.
`readonly`	`boolean`	`false`	Block drawing but keep the signature visible.
`placeholder`	`string`	`'Sign here'`	Placeholder text shown when empty.
`showPlaceholder`	`boolean`	`true`	Toggle the placeholder.
`showClearButton`	`boolean`	`false`	Show the built-in floating clear button.
`clearButtonText`	`string`	`'Clear'`	Clear button label.
`rootClass`	`ClassBinding`	`''`	Class(es) on the root wrapper.
`canvasClass`	`ClassBinding`	`''`	Class(es) on the `<canvas>` element.
`placeholderClass`	`ClassBinding`	`''`	Class(es) on the placeholder overlay.
`clearButtonClass`	`ClassBinding`	`''`	Class(es) on the clear button.

Events

Name	Payload	Description
`update:modelValue`	`string \| Blob \| File \| SignatureStroke[] \| null`	Emitted whenever the signature changes. Payload type follows `outputType`.
`change`	`string \| Blob \| File \| SignatureStroke[] \| null`	Mirror of `update:modelValue` — fires on every stroke end.
`begin`	—	A new stroke started.
`end`	—	The current stroke just ended.
`empty`	—	The pad just became empty (clear).

Exposed methods

Accessible via a template ref.

Name	Signature	Description
`clear`	`() => void`	Remove all strokes and loaded images.
`undo`	`() => void`	Undo the last stroke.
`redo`	`() => void`	Redo the last undone stroke.
`isEmpty`	`() => boolean`	Returns `true` when nothing is drawn.
`toDataURL`	`(format?: 'png' \| 'jpeg', quality?: number) => string`	Export as data URL.
`toSVG`	`() => string`	Export as SVG markup.
`toBlob`	`(mime?: string, quality?: number) => Promise<Blob \| null>`	Export as a `Blob`.
`toFile`	`(name?: string, mime?: string, quality?: number) => Promise<File \| null>`	Export as a `File` (Blob + filename).
`fromDataURL`	`(url: string) => Promise<void>`	Load a saved image or SVG into the pad.
`getStrokes`	`() => SignatureStroke[]`	Serialize the raw stroke data (points + width).
`setStrokes`	`(strokes: SignatureStroke[]) => void`	Restore strokes previously serialized via `getStrokes`.

Slots

Name	Description
`placeholder`	Replaces the default placeholder text.
`clear`	Replaces the clear button label.

Signature ^0.1.23 ​

1. Basic signature ​

2. Pen color ​

3. Pen width ​

4. Grid & baseline guides ​

5. Background color ​

6. Sizes ​

7. Disabled & read-only ​

8. Undo, redo, clear ​

9. Export — PNG, JPEG, SVG ​

10. Load from data URL ​

11. Custom placeholder ​

12. Built-in clear button ​

13. Form integration ​

14. Class-bindable — custom styling ​

15. Output type — choose the emitted value ​

Props ​

Events ​

Exposed methods ​

Slots ​

Signature ^0.1.23

1. Basic signature

2. Pen color

3. Pen width

4. Grid & baseline guides

5. Background color

6. Sizes

7. Disabled & read-only

8. Undo, redo, clear

9. Export — PNG, JPEG, SVG

10. Load from data URL

11. Custom placeholder

12. Built-in clear button

13. Form integration

14. Class-bindable — custom styling

15. Output type — choose the emitted value

Props

Events

Exposed methods

Slots