React Signature Pad: Glatte Tinte, Tippmodus, PNG und SVG

Ein React Signature Pad wirkt wie die einfachste Komponente in einem Formular: ein Canvas, ein paar Pointer-Listener, ein Button zum Löschen. Dann benutzen es echte Menschen. Auf dem Handy scrollt die Seite nicht mehr, die Unterschrift verschwindet, sobald jemand den Bildschirm dreht, die Tinte ist im Dark Mode unsichtbar, und das gespeicherte PNG hat einen schwarzen Hintergrund. Dieser Guide zeigt, was eine Signature-Pad-Komponente für React richtig machen muss, welche Props beim Signature Pad von Wingo UI zählen und wie du es in ein mehrstufiges Formular einbaust.

Was muss ein React Signature Pad richtig machen?

Sechs Dinge: glatte Tinte, ein scharfes Canvas, eine Seite, die weiter scrollt, Striche, die Resizes überstehen, ein zweiter Weg zu unterschreiben und Exporte, die das Theme ignorieren.

1. Glatte Tinte. Rohe Pointer-Punkte, mit geraden Linien verbunden, sehen aus wie ein Seismograph. Bézierkurven mit einer Breite, die sich entlang des Strichs ändert, sehen aus wie ein Stift.
2. Ein scharfes Canvas. Der Buffer des Canvas muss seiner CSS-Größe mal devicePixelRatio entsprechen, sonst ist die Tinte auf jedem Handy unscharf.
3. Scrollen, das weiter funktioniert. Das Canvas braucht touch-action: none, damit ein Finger zeichnet statt zu schieben. Alles andere auf der Seite muss weiter scrollen.
4. Striche, die Resizes überstehen. Ein Resize leert das Canvas. Wenn du nur Pixel behältst, löscht eine Drehung die Unterschrift.
5. Ein zweiter Weg zu unterschreiben. Zeichnen braucht einen Pointer. Tastatur- und Screenreader-Nutzer brauchen einen Weg zum Tippen.
6. Exporte, die das Theme ignorieren. Weiße Tinte im Dark Mode ist auf dem Bildschirm richtig und auf einem Vertrag falsch.

So sieht es bei den gängigen Optionen aus, Stand Oktober 2026:

Brauchst du nur ein Canvas in einem internen Tool, reicht react-signature-canvas, und es kostet nichts. Die Tinte kommt aus derselben Engine, signature_pad. Den Rest der Liste überlässt es dir: Striche, die einen Resize überstehen, einen Tippmodus und Exporte, die nicht vom Theme abhängen.

Warum wird die Tinte ohne Stiftdruck dünner und dicker?

Weil die Breite aus der Geschwindigkeit kommt. In signature_pad 5.1.4 speichert jeder Punkt den pressure des Pointers, aber die Breite jedes Kurvensegments ist maxWidth / (velocity + 1), nach unten begrenzt durch minWidth. Die Geschwindigkeit ist ein gleitender Mittelwert: velocityFilterWeight mal die Geschwindigkeit des neuesten Segments plus der Rest der vorherigen Geschwindigkeit. Wirst du am Ende eines Buchstabens langsamer, wird die Linie dicker; ziehst du schnell über die Grundlinie, wird sie dünner. Das wirkt auf jedem Gerät wie ein Stift auf Papier, auch mit einer Maus oder einem Finger, die gar keinen Druck melden.

Das Pad von Wingo UI macht diese drei Zahlen zu Props, mit etwas kräftigeren Standardwerten als die Bibliothek (0.8 und 2.8 px statt 0.5 und 2.5), weil dünne Tinte auf einem Handy auf Armlänge verschwindet:

<SignaturePad
  label="Unterschrift Empfänger"
  minWidth={1}
  maxWidth={4}
  velocityFilterWeight={0.5}
/>

Ein kleineres velocityFilterWeight ergibt ruhigere Tinte, weil jedes neue Segment weniger in den Mittelwert eingeht. Bei 1 zeigt sich jede Änderung der Geschwindigkeit, und bei 0 bleibt die Breite bei maxWidth stehen. Der Standardwert ist 0.7, wie in der Bibliothek. Kurzes Antippen hinterlässt einen Punkt.

Wie scrollt die Seite auf dem Handy weiter?

Setz touch-action: none auf das Canvas und nirgendwo sonst. signature_pad setzt es auf das Canvas, wenn du on() aufrufst, und stellt bei off() wieder auto her. Das Pad von Wingo UI schaltet den Stift nur ein, solange es bedienbar ist und im Draw-Modus steht. Ein Wischen, das außerhalb der gestrichelten Fläche beginnt, scrollt die Seite wie gewohnt; ein Wischen, das darin beginnt, zeichnet. Ist das Pad disabled oder read-only oder steht es im Type-Modus, gehört das Canvas wieder der Seite.

Wenn Leute mit dem Finger unterschreiben, ist touch-action nur die halbe Lösung. Zwei Layout-Regeln zählen genauso viel:

• Halte das Pad so niedrig, dass man daran vorbeiscrollen kann. Die Standard-height ist 200px. Ein Screen für Kuriere verträgt 240px, aber ein Pad, das den Viewport füllt, fängt den Daumen, weil jedes Wischen darauf zeichnet.
• Halte es aus horizontalen Swipern heraus. In einem Karussell oder in wischbaren Tabs kämpfen die beiden Gesten gegeneinander. Der Form Wizard wechselt die Schritte nur über seine Buttons, nie per Wischen, also behält ein Pad in einem Schritt seine Geste.

Unser Guide zu Tailwind touch-manipulation erklärt, wann touch-none richtig ist und wann es Nutzer auf der Seite festhält.

Wie bleibt die Unterschrift erhalten, wenn das Handy gedreht wird?

Speichere die Striche als Daten und zeichne sie neu; verlass dich nie auf die Pixel des Canvas. Das Pad hält jeden Strich als Punkte in CSS-Pixeln der Box, in der er gezeichnet wurde. Ein ResizeObserver auf dem Canvas setzt den Buffer auf die neue Größe mal devicePixelRatio und zeichnet die Striche neu, gleichmäßig skaliert, damit sie passen. Dreh das Handy, öffne die Tastatur, zieh ein Desktop-Fenster schmaler: Die Unterschrift bleibt und behält ihre Form.

Dieselben Daten sind der Wert. onValueChange gibt dir ein SignatureData-Objekt, schlichtes JSON, das du speichern und wieder laden kannst. Wer mit dem Signature Pad TypeScript schreibt, bekommt den exportierten Typ als Union über kind:

type SignatureData =
  | { kind: "drawn"; strokes: SignatureStroke[]; width: number; height: number }
  | { kind: "typed"; text: string; font: string }

width und height sind die Box, in der die Striche gezeichnet wurden. Beim Neuzeichnen gilt der kleinere der beiden Faktoren aus Breite und Höhe. Eine Unterschrift schrumpft also, um in ein schmaleres Pad zu passen, und behält in einem breiteren ihre Größe: Eine auf einem 360px breiten Handy erfasste Unterschrift passt später in ein 600px breites Pad am Desktop. onValueChange wird ausgelöst, wenn ein Strich endet, nie bei jedem Punkt. Deshalb rendert ein kontrolliertes Pad nicht 60 Mal pro Sekunde neu.

Wie unterschreibt man, ohne zu zeichnen?

Mit einem getippten Namen. WCAG 2.1.1 Keyboard (opens in a new tab) nimmt Eingaben aus, die vom Weg des Pointers abhängen, und die Erklärseite des W3C nennt freihändiges Zeichnen als Beispiel. Ob eine Unterschrift darunterfällt, ist Ermessenssache: Dieselbe Seite sagt, Handschrift falle nicht darunter, weil ihr eigentlicher Zweck die Eingabe von Text ist. So oder so: Ein Pad, das nur Zeichnen erlaubt, lässt Tastatur- und Screenreader-Nutzer dein Formular nicht abschließen. Der Type-Modus ist ihr Weg.

Der Umschalter zwischen Draw und Type ist ein Segmented Control oben, der erste Tab-Stopp. Im Type-Modus erscheint der Name auf der Grundlinie in einer System-Schreibschrift (der Stack DEFAULT_SIGNATURE_FONT: Segoe Script, Snell Roundhand, Brush Script MT, Apple Chancery, cursive) und schrumpft, bis er passt, wenn er lang ist. Nichts wird heruntergeladen, und die Exporte nutzen denselben Stack. Jeder Modus behält seinen eigenen Entwurf: Schaltest du zurück, sind die Striche oder der Name wieder da.

Die Zeichenfläche selbst ist fokussierbar und trägt das Label als Namen. Mit dem Fokus darauf macht mod+Z den letzten Strich rückgängig, und Entf oder Backspace leert die Fläche. Eine Live-Region meldet „Signature added“ und „Signature cleared“.

Nutze modes={["draw"]} nur, wenn es einen anderen Weg zum Unterschreiben gibt, etwa in einer Kurier-App, in der der Fahrer das Handy weiterreicht und eine Hotline sich um alle anderen kümmert.

Wie exportiere ich die Unterschrift als PNG oder SVG?

Über das api-Objekt, das dir setApi übergibt. Jeder Export nutzt exportColor (Standard #111111) auf transparentem Hintergrund, egal welches Theme aktiv ist, und schneidet auf die Unterschrift plus 12px zu, wenn trimExport an ist:

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { SignaturePad, isSignatureEmpty, type SignatureData, type SignaturePadApi } from "@/components/ui/signature-pad"

export function SignContract() {
  const [signature, setSignature] = useState<SignatureData | null>(null)
  const [api, setApi] = useState<SignaturePadApi | null>(null)

  const save = async () => {
    if (!api || isSignatureEmpty(signature)) return
    const png = await api.toBlob({ scale: 2 })
    const body = new FormData()
    body.append("image", png, "signature.png")
    body.append("strokes", JSON.stringify(signature))
    await fetch("/api/contracts/118/signature", { method: "POST", body })
  }

  return (
    <div className="flex max-w-md flex-col gap-4">
      <SignaturePad
        label="Unterschrift Kunde"
        description="Unterschreib mit dem Finger oder der Maus"
        required
        value={signature}
        onValueChange={setSignature}
        setApi={setApi}
        exportColor="#1F3A93"
        fileName="Unterschrift Kunde"
      />
      <div className="flex gap-2">
        <Button disabled={isSignatureEmpty(signature)} onClick={save}>
          Vertrag unterschreiben
        </Button>
        <Button variant="soft" disabled={isSignatureEmpty(signature)} onClick={() => api?.download({ format: "svg" })}>
          SVG herunterladen
        </Button>
      </div>
    </div>
  )
}

• toBlob(options) liefert standardmäßig ein PNG. type, quality, trim, scale (Gerätepixel pro CSS-Pixel, Standard 2), padding, background und color überschreiben die Standardwerte pro Aufruf.
• toSVG() gibt einen SVG-String zurück, gut für einen PDF-Generator oder eine E-Mail, die bei jedem Zoom scharf bleiben soll.
• toDataURL() ist synchron, praktisch für eine Vorschau per <img src>.
• download({ format }) speichert die Datei als fileName plus lokales Datum und Uhrzeit und liefert den Namen zurück.

Schick beides, das Bild und das JSON der Striche. Das PNG kommt auf das Dokument; mit dem JSON kannst du die Unterschrift später in jeder Größe neu zeichnen. Die Helfer für Download und Blob stammen aus File Export, das die CLI mit dem Pad installiert.

Für klassische HTML-Formulare setzt du name="signature", und ein verstecktes Input-Feld enthält das zugeschnittene PNG als Data-URL, aktualisiert nach jedem Strich. Ein Reset des Formulars stellt defaultValue wieder her.

Wie baue ich einen Unterschriftsschritt in ein mehrstufiges Formular ein?

Gib dem Schritt ein validate, das den Wert prüft, und zeig den Fehler am Pad. Das Pad ist ein normales Feld und passt deshalb wie jedes andere Eingabefeld in einen Schritt des Form Wizards:

"use client"

import { useState } from "react"
import { FormWizard, type WizardStep } from "@/components/ui/form-wizard"
import { Input } from "@/components/ui/input"
import { SignaturePad, isSignatureEmpty, type SignatureData } from "@/components/ui/signature-pad"

export function RentalAgreement() {
  const [name, setName] = useState("")
  const [signature, setSignature] = useState<SignatureData | null>(null)
  const [missing, setMissing] = useState(false)

  const steps: WizardStep[] = [
    {
      id: "renter",
      title: "Mieter",
      content: <Input label="Vollständiger Name" value={name} onValueChange={setName} autoComplete="name" />,
      validate: () => name.trim().length > 1,
    },
    {
      id: "sign",
      title: "Unterschrift",
      content: (
        <SignaturePad
          label="Unterschrift Mieter"
          description="Unterschreib mit dem Finger oder wechsle zu Type"
          required
          value={signature}
          onValueChange={(next) => {
            setSignature(next)
            setMissing(false)
          }}
          error={missing ? "Eine Unterschrift ist erforderlich" : undefined}
        />
      ),
      validate: () => {
        const ok = !isSignatureEmpty(signature)
        setMissing(!ok)
        return ok
      },
    },
  ]

  return (
    <div className="h-dvh md:h-auto">
      <FormWizard
        steps={steps}
        fullScreenOnMobile
        labels={{ submit: "Vertrag unterschreiben" }}
        onComplete={() => fetch("/api/rentals", { method: "POST", body: JSON.stringify({ name, signature }) })}
      />
    </div>
  )
}

Halte die Unterschrift im State der Elternkomponente, wie hier. Inaktive Schritte werden unmountet. Ein Wert, der nur im Schritt lebt, wäre also weg, wenn onComplete läuft. isSignatureEmpty ist true für null, für einen gezeichneten Wert ohne Striche und für einen getippten Wert mit leerem Namen, eine Prüfung deckt also beide Modi ab. Unter 768px füllt fullScreenOnMobile (standardmäßig an, hier zur Klarheit ausgeschrieben) die Höhe des Containers mit einem Sticky Header, einem scrollenden Inhalt und einem Sticky Footer mit 48px hohen Buttons über der Safe Area. Dafür braucht der Wizard einen Container mit fester Höhe. Deshalb sitzt er in einem h-dvh-Wrapper, der ab 768px keine Höhe mehr vorgibt. Unser Tutorial zu mehrstufigen Formularen in React behandelt zod-Schemas pro Schritt und gespeicherte Entwürfe.

Welche Fallstricke gibt es, wenn du in React eine Unterschrift erfassen willst?

Wer in React eine Unterschrift erfassen will, stolpert meist über diese Punkte:

• Nur das PNG speichern. Du kannst es nicht größer neu zeichnen, nicht umfärben und die Reihenfolge der Striche nicht später abspielen (jeder Punkt trägt im JSON einen Zeitstempel). Speichere das JSON mit.
• Die Bildschirm-Tinte exportieren. penColor steht standardmäßig auf currentColor, also ist die Tinte im Dark Mode weiß und wird neu gezeichnet, wenn das Theme wechselt. Exporte nutzen exportColor, damit eine im Dark Mode gezeichnete Unterschrift auf einer weißen Seite nicht verschwindet.
• Ein Pad so hoch wie der Bildschirm. Jedes Wischen darauf zeichnet, also kann niemand daran vorbeiscrollen. Der Standard von 200px passt auf ein Handy; 240px ist das großzügige Ende.
• Das Bild für die ganze E-Signatur halten. Das Bild eines Namens ist nur ein Beweisstück von mehreren. Halte fest, wer unterschrieben hat, wann und welche Version des Dokuments, und frag einen Anwalt, was in deiner Rechtsordnung gilt.
• Den Type-Modus ausblenden, um Platz zu sparen. Er ist der einzige Weg für Tastatur-Nutzer. Lass ihn drin, außer dein Produkt hat einen anderen.

Für den Rest der Formularschicht (Felder, Fehler, zod und mobile Tastaturen) lies unseren großen Leitfaden zu React-Formularkomponenten oder stöbere in allen Komponenten-Guides.

Wie installiere ich das Signature Pad?

npx wingo-ui@latest add signature-pad kopiert die Komponente mit Field, Button, Input, Segmented Control, Tooltip und File Export sowie den Helfern für State, Motion und UI-Config, die sie importiert, und installiert signature_pad, motion und lucide-react. Signature Pad gehört zu Wingo UI Pro, führ also zuerst npx wingo-ui@latest login aus. Den Wizard fügst du mit npx wingo-ui@latest add form-wizard hinzu.

Häufige Fragen

Welche Bibliothek ist die beste für ein React Signature Pad?

Die meisten React-Komponenten für Unterschriften bauen auf signature_pad auf (MIT, Stand Oktober 2026 Version 5.1.4), das für die glatte Tinte sorgt. react-signature-canvas ist der übliche dünne Wrapper; das Signature Pad von Wingo UI ergänzt einen Tippmodus, Tinte passend zum Theme, Striche, die einen Resize überstehen, und PNG- und SVG-Export als Komponente zum Kopieren.

Nutzt ein Signature Pad echten Stiftdruck?

Nicht in signature_pad 5.1.4. Es speichert zwar den Druck des Pointers mit jedem Punkt, die Strichbreite kommt aber aus der Geschwindigkeit: maxWidth geteilt durch Geschwindigkeit plus eins, nie dünner als minWidth. Langsame Striche werden dicker und schnelle dünner, und das wirkt wie ein Stift, ganz ohne drucksensitiven Stylus.

Warum verschwindet meine Unterschrift, wenn ich das Handy drehe?

Ein Resize leert die Pixel eines Canvas, und react-signature-canvas leert es bei einem Resize zusätzlich standardmäßig (clearOnResize ist true). Speichere die Striche als Punktdaten und zeichne sie nach jedem Resize neu, skaliert auf die neue Box; das Pad von Wingo UI macht das mit einem ResizeObserver.

Wie speichere ich eine React-Unterschrift als Bild?

Exportier ein PNG als Blob für das Dokument und behalte das JSON der Striche, damit du sie später neu zeichnen kannst. Beim Pad von Wingo UI liefert api.toBlob() ein zugeschnittenes PNG und api.toSVG() einen Vektor-String, api.download({ format: "svg" }) speichert eine Datei.

Kann man mit der Tastatur unterschreiben?

Nicht durch Zeichnen, denn freihändige Tinte hängt vom Weg des Pointers ab. WCAG 2.1.1 nimmt pfadabhängige Eingaben von der Tastaturpflicht aus, sicherer ist aber ein zweiter Weg zu unterschreiben, etwa ein getippter Name in einer Schreibschrift, und genau das ist der Type-Modus des Pads von Wingo UI.

Ist das Signature Pad von Wingo UI kostenlos?

Nein. Signature Pad und Form Wizard sind Pro-Komponenten. Field, Input und Segmented Control, auf denen es aufbaut, sind kostenlos.