Signature Pad

Headless signature pad: pointer-captured, pressure-aware strokes rendered as SVG.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { SignaturePadCanvas, SignaturePadClear, SignaturePadGuide, SignaturePadRedo, SignaturePad, SignaturePadRoot, SignaturePadUndo } from "@vizejs/ui/signature-pad";

Or copy the source into your project with vize lib pull signature-pad (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Signature pad bound with v-model, with a sign-here guide and undo, redo, and clear buttons. -->
<script setup lang="ts">
import { ref } from "vue";

import {
  SignaturePad,
  SignaturePadCanvas,
  SignaturePadClear,
  SignaturePadGuide,
  SignaturePadRedo,
  SignaturePadUndo,
  type SignatureValue,
} from "@vizejs/ui/signature-pad";

const signature = ref<SignatureValue>([]);
</script>

<template>
  <SignaturePad v-slot="{ empty }" v-model="signature" name="signature" :width="400" :height="160">
    <SignaturePadCanvas aria-label="Your signature" />
    <SignaturePadGuide>Sign above the line</SignaturePadGuide>
    <SignaturePadUndo>Undo</SignaturePadUndo>
    <SignaturePadRedo>Redo</SignaturePadRedo>
    <SignaturePadClear>Clear</SignaturePadClear>
    <p>{{ empty ? "Not signed yet" : "Signed" }}</p>
  </SignaturePad>
</template>

API

SignaturePadCanvas

Source: src/families/media/signature-pad/signature-pad-canvas.vue

Props

Slots

Exposed

SignaturePadClear

Source: src/families/media/signature-pad/signature-pad-clear.vue

Events

Slots

Exposed

SignaturePadGuide

Source: src/families/media/signature-pad/signature-pad-guide.vue

Slots

Exposed

SignaturePadRedo

Source: src/families/media/signature-pad/signature-pad-redo.vue

Events

Slots

Exposed

SignaturePad

Source: src/families/media/signature-pad/signature-pad-root.vue

Props

Events

Slots

Exposed

SignaturePadRoot

Source: src/families/media/signature-pad/signature-pad-root.vue

Props

Events

Slots

Exposed

SignaturePadUndo

Source: src/families/media/signature-pad/signature-pad-undo.vue

Events

Slots

Exposed

Behavior

Normative state x input -> outcome table for signature-pad-root.vue, signature-pad-canvas.vue, signature-pad-guide.vue, signature-pad-undo.vue, signature-pad-redo.vue, and signature-pad-clear.vue (@vizejs/ui/signature-pad). Every row is proven by the named test.

Strokes are typed data ({ points: { x, y, pressure, time }[] }[]) in the drawing surface's viewBox coordinates, rendered as filled SVG outlines whose width follows pressure. The surface is not keyboard drawable; name it with ariaLabel, describe it with ariaDescribedby, and offer a typed-name field as the accessible alternative when a signature is required.

Undo and redo history record requests; in controlled mode the parent decides whether each request is applied.