{"id":19903854,"url":"https://github.com/docusealco/signature-maker-js","last_synced_at":"2026-02-06T07:35:43.563Z","repository":{"id":257627856,"uuid":"854240143","full_name":"docusealco/signature-maker-js","owner":"docusealco","description":"Easy to use signature maker for web applications","archived":false,"fork":false,"pushed_at":"2024-11-02T13:36:55.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-15T02:17:51.806Z","etag":null,"topics":["signature","vanilla-js"],"latest_commit_sha":null,"homepage":"https://www.docuseal.co/docs/embedded/signature#js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/docusealco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-08T18:36:11.000Z","updated_at":"2024-11-02T13:36:58.000Z","dependencies_parsed_at":"2024-09-17T20:54:14.021Z","dependency_job_id":"575b1571-8bcc-4158-a562-8f8465b4593b","html_url":"https://github.com/docusealco/signature-maker-js","commit_stats":null,"previous_names":["docusealco/signature-maker-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/docusealco/signature-maker-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/docusealco%2Fsignature-maker-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/docusealco%2Fsignature-maker-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/docusealco%2Fsignature-maker-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/docusealco%2Fsignature-maker-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/docusealco","download_url":"https://codeload.github.com/docusealco/signature-maker-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/docusealco%2Fsignature-maker-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267475794,"owners_count":24093359,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["signature","vanilla-js"],"created_at":"2024-11-12T20:25:43.951Z","updated_at":"2026-02-06T07:35:43.516Z","avatar_url":"https://github.com/docusealco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.docuseal.com/online-signature\" target=\"_blank\"\u003e\n    \u003cimg width=\"600\" height=\"356\" src='https://github.com/user-attachments/assets/305904a9-291f-416d-ac32-baaf22970450' alt='Signature Maker'\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Signature Maker JS\n\nSignature Maker is a web component that lets users draw or type their signature.\n\n#### Other implementations\n\n- [React](https://github.com/docusealco/signature-maker-react)\n- [Vue](https://github.com/docusealco/signature-maker-vue)\n\n## Demo\n\nTry the live demo [here](https://www.docuseal.com/online-signature)\n\n## Documentation\n\nCheck out the full documentation [here](https://www.docuseal.com/docs/embedded/signature#js).\n\n## Installation\n\n```bash\nnpm install @docuseal/signature-maker-js\n```\n\nOR\n\n```bash\nyarn add @docuseal/signature-maker-js\n```\n\nOR\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@docuseal/signature-maker-js/dist/index.cjs.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nBasic Usage with standard styles and default signature saving behavior:\n\n```html\n\u003csignature-maker\n  id=\"signatureMaker\"\n  data-download-on-save=\"true\"\n\u003e\n\u003c/signature-maker\u003e\n```\n\n---\n\nUsage with default styles but custom signature saving behavior, such as uploading the signature to a server:\n\n```html\n\u003csignature-maker id=\"signatureMaker\"\u003e\u003csignature-maker\u003e\n\n\u003cscript\u003e\n  window.signatureMaker.addEventListener('save', (e) =\u003e {\n    fetch('/save-signature', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ file: e.detail.base64 }),\n    });\n  })\n\u003c/script\u003e\n```\n\n---\n\nUsage without a save signature button, embedded in another form. The signature will be stored in a form field named `signature`:\n\n```html\n\u003cform id=\"myForm\" method=\"POST\" action=\"/submit-form\"\u003e\n  \u003cinput name=\"name\" type=\"text\"\u003e\n  \u003csignature-maker\n    id=\"signatureMaker\"\n    data-with-submit=\"false\"\n  \u003e\n    \u003cinput type=\"hidden\" type=\"file\" name=\"signature\"\u003e\n  \u003c/signature-maker\u003e\n  \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\n---\n\nUsage without a save signature button and tracking each signature change:\n\n```html\n\u003csignature-maker\n  id=\"signatureMaker\"\n  data-with-submit=\"false\"\n\u003e\n\u003c/signature-maker\u003e\n\u003cscript\u003e\n  window.signatureMaker.addEventListener('change', (e) =\u003e {\n    if (e.detail.base64) {\n      fetch('/background-save-signature', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ file: e.detail.base64 }),\n      });\n    } else {\n      console.log('No signature to save');\n    }\n  })\n\u003c/script\u003e\n```\n\n---\n\nUsage with custom button labels and classes (DaisyUI):\n\n```html\n\u003csignature-maker\n  class=\"block my-8\"\n  data-save-button-text=\"Télécharger\"\n  data-undo-button-text=\"Annuler\"\n  data-clear-button-text=\"Clair\"\n  data-draw-type-button-text=\"Dessiner\"\n  data-text-type-button-text=\"Type\"\n  data-upload-type-button-text=\"Télécharger\"\n  data-text-input-placeholder=\"Tapez votre signature ici\"\n  data-type-buttons-container-class=\"flex gap-2 mb-4 justify-center\"\n  data-draw-type-button-class=\"flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold\"\n  data-draw-type-button-active-class=\"bg-neutral text-white font-semibold\"\n  data-text-type-button-class=\"flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold\"\n  data-text-type-button-active-class=\"bg-neutral text-white font-semibold\"\n  data-upload-type-button-class=\"flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold\"\n  data-upload-type-button-active-class=\"bg-neutral text-white font-semibold\"\n  data-text-input-class=\"input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl\"\n  data-canvas-class=\"bg-white border border-base-300 rounded-2xl w-full\"\n  data-undo-button-class=\"btn btn-outline btn-sm font-medium\"\n  data-clear-button-class=\"btn btn-outline btn-sm font-medium\"\n  data-save-button-class=\"btn btn-neutral text-white text-base w-full\"\n\u003e\n\u003c/signature-maker\u003e\n```\n\n---\n\nUsage with customization of certain elements using CSS classes and styles:\n\n```html\n\u003csignature-maker\n  data-save-button-class=\"btn btn-neutral text-white text-base w-full\"\n  data-canvas-class=\"bg-white border border-base-300 rounded-2xl w-full\"\n  data-canvas-style=\"border: 2px solid #000;\"\n\u003e\n\u003c/signature-maker\u003e\n```\n\n## Customization\n\nSignature Maker can be customized with the following attributes:\n\n```\ndata-download-on-save\ndata-with-typed\ndata-with-drawn\ndata-with-upload\ndata-with-color-select\ndata-with-submit\ndata-save-button-text\ndata-control-buttons-container-class\ndata-control-buttons-container-style\ndata-save-button-class\ndata-save-button-style\ndata-save-button-disabled-class\ndata-save-button-disabled-style\ndata-undo-button-text\ndata-undo-button-class\ndata-undo-button-style\ndata-clear-button-text\ndata-clear-button-class\ndata-clear-button-style\ndata-text-input-placeholder\ndata-text-input-class\ndata-text-input-style\ndata-canvas-class\ndata-canvas-style\ndata-type-buttons-container-class\ndata-type-buttons-container-style\ndata-draw-type-button-text\ndata-draw-type-button-class\ndata-draw-type-button-style\ndata-draw-type-button-active-class\ndata-draw-type-button-active-style\ndata-text-type-button-text\ndata-text-type-button-class\ndata-text-type-button-style\ndata-text-type-button-active-class\ndata-text-type-button-active-style\ndata-upload-type-button-text\ndata-upload-type-button-class\ndata-upload-type-button-style\ndata-upload-type-button-active-class\ndata-upload-type-button-active-style\ndata-font-url\n````\n\nThe full documentation with detailed configuration and event descriptions can be found [here](https://www.docuseal.com/docs/embedded/signature#js).\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdocusealco%2Fsignature-maker-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdocusealco%2Fsignature-maker-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdocusealco%2Fsignature-maker-js/lists"}