{"id":14962721,"url":"https://github.com/captaincodeman/svelte-signature-pad","last_synced_at":"2025-10-25T00:30:40.706Z","repository":{"id":65511631,"uuid":"593690153","full_name":"CaptainCodeman/svelte-signature-pad","owner":"CaptainCodeman","description":"Capture smoothed signatures as SVG paths in Svelte","archived":false,"fork":false,"pushed_at":"2024-08-28T21:37:48.000Z","size":85,"stargazers_count":23,"open_issues_count":3,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-29T12:02:56.703Z","etag":null,"topics":["signature","signature-pad"],"latest_commit_sha":null,"homepage":"https://captaincodeman.github.io/svelte-signature-pad/","language":"TypeScript","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/CaptainCodeman.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":"2023-01-26T16:15:00.000Z","updated_at":"2024-09-13T08:16:08.000Z","dependencies_parsed_at":"2024-08-28T23:05:37.568Z","dependency_job_id":null,"html_url":"https://github.com/CaptainCodeman/svelte-signature-pad","commit_stats":{"total_commits":12,"total_committers":1,"mean_commits":12.0,"dds":0.0,"last_synced_commit":"e7b05324ba77ae417be7930caf1a45d07b8da652"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-signature-pad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-signature-pad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-signature-pad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-signature-pad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CaptainCodeman","download_url":"https://codeload.github.com/CaptainCodeman/svelte-signature-pad/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867387,"owners_count":16555891,"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","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","signature-pad"],"created_at":"2024-09-24T13:30:25.275Z","updated_at":"2025-10-25T00:30:40.249Z","avatar_url":"https://github.com/CaptainCodeman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-signature-pad\n\nSvelte Action to capture smoothed signatures as SVG paths using the excellent [perfect-freehand](https://github.com/steveruizok/perfect-freehand) library.\n\n## Instructions\n\nInstall using you package manager of choice:\n\n    pnpm i svelte-signature-pad\n\nImport action into page and pass and object with `ondraw` and `oncomplete` method properties.\n\nEach will receive a path which can be rendered as SVG in your component. `ondraw` fires _while the user is drawing_ and would be the current stroke. `oncomplete` fires when they have finished the line (which could transition to a different color).\n\n## Example\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { signature } from 'svelte-signature-pad'\n\n  let layers: { path: string; width: number; height: number }[] = []\n\n  let width: number\n  let height: number\n  let preview: string\n\n  const ondraw = (path: string) =\u003e (preview = path)\n  const oncomplete = (path: string) =\u003e {\n    preview = ''\n    layers = [...layers, { width, height, path }]\n  }\n\n  const clear = () =\u003e {\n    layers = []\n  }\n\u003c/script\u003e\n\n\u003cdiv class=\"relative w-full h-[360px] bg-gray-100 border border-dashed border-gray-300\"\u003e\n  \u003cdiv class=\"absolute left-4 right-4 bottom-24 border-t border-dotted border-gray-300\" /\u003e\n  \u003cdiv\n    class=\"w-full h-full\"\n    use:signature={{ ondraw, oncomplete }}\n    bind:clientWidth={width}\n    bind:clientHeight={height}\n    on:touchmove|preventDefault={() =\u003e false}\n  \u003e\n    {#each layers as layer}\n      \u003csvg class=\"absolute w-full h-full fill-black pointer-events-none\" viewBox=\"0 0 {layer.width} {layer.height}\"\u003e\n        \u003cpath d={layer.path} /\u003e\n      \u003c/svg\u003e\n    {/each}\n\n    {#if preview}\n      \u003csvg class=\"absolute w-full h-full fill-gray-900 pointer-events-none\" viewBox=\"0 0 {width} {height}\"\u003e\n        \u003cpath d={preview} /\u003e\n      \u003c/svg\u003e\n    {/if}\n  \u003c/div\u003e\n  \u003cbutton class=\"absolute top-2 right-2 px-4 py-2 text-sm text-gray-500 bg-white border border-gray-200\" on:click={clear}\u003eClear\u003c/button\u003e\n\u003c/div\u003e\n\n\u003cp class=\"mt-2 text-sm\"\u003ePlease sign on the dotted line to indicate that you agree to all the legal terms we all know you didn't read. Thank you!\u003c/p\u003e\n\n\u003cdiv class=\"relative mt-4\"\u003e\n  {#each layers as layer}\n    \u003csvg class=\"absolute fill-black\" viewBox=\"0 0 {layer.width * 2} {layer.height * 2}\"\u003e\n      \u003cpath d={layer.path} /\u003e\n    \u003c/svg\u003e\n  {/each}\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-signature-pad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaptaincodeman%2Fsvelte-signature-pad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-signature-pad/lists"}