AutographJS

Lightweight, TypeScript-first, framework-agnostic signature capture library.

Project Structure

.
├── dist/                # build output (generated)
├── public/              # static assets/examples (optional)
├── src/                 # source code
├── LICENSE
├── package.json
├── tsconfig.build.json
└── tsup.config.ts

License

This package is licensed under BSD-3-Clause.

Installation

npm i

NPM Scripts

npm run dev      # development watch build
npm run build    # production build to dist
npm run clean    # remove build artifacts

Usage

Vanilla JavaScript

import { SignaturePad } from 'autographjs';

const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const pad = new SignaturePad(canvas, {
  width: 600,
  height: 200,
  strokeWidth: 2.5,
  brushType: 'pen',
});

pad.undo();
const png = pad.toPNG();

React

import { useRef } from 'react';
import { ReactSignaturePad, type SignaturePadRef } from 'autographjs/react';

export function App() {
  const ref = useRef<SignaturePadRef>(null);

  return (
    <>
      <ReactSignaturePad ref={ref} width={600} height={200} />
      <button onClick={() => console.log(ref.current?.toPNG())}>Save</button>
    </>
  );
}

Vue

<template>
  <VueSignaturePad ref="pad" :width="600" :height="200" @change="onChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VueSignaturePad } from 'autographjs/vue';

const pad = ref<InstanceType<typeof VueSignaturePad> | null>(null);

function onChange(dataUrl: string) {
  console.log(dataUrl);
}
</script>

Build Output and Compatibility

• Package outputs separate ESM/CJS/types entry files for core, React, and Vue.
• Main build files: dist/index.*, dist/react.*, dist/vue.*.
• Core entry remains framework-agnostic; adapters are exposed through subpath exports.
• react, react-dom, and vue are peer dependencies to avoid bundling framework runtimes.
• sideEffects: false and entry-point exports support tree-shaking.

Publish Checklist

npm i
npm run build