{"id":40464761,"url":"https://github.com/naknomum/scribby","last_synced_at":"2026-01-20T18:04:24.723Z","repository":{"id":43170703,"uuid":"272152719","full_name":"naknomum/scribby","owner":"naknomum","description":"small javascript library for scribbling on an svg element","archived":false,"fork":false,"pushed_at":"2021-11-30T08:56:30.000Z","size":146,"stargazers_count":57,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-06-11T16:29:00.396Z","etag":null,"topics":["drawing","javascript","post-it","scribble"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/naknomum.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}},"created_at":"2020-06-14T07:19:37.000Z","updated_at":"2024-05-18T09:08:45.000Z","dependencies_parsed_at":"2022-09-06T12:00:29.547Z","dependency_job_id":null,"html_url":"https://github.com/naknomum/scribby","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/naknomum/scribby","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naknomum%2Fscribby","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naknomum%2Fscribby/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naknomum%2Fscribby/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naknomum%2Fscribby/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naknomum","download_url":"https://codeload.github.com/naknomum/scribby/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naknomum%2Fscribby/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28608010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T16:10:39.856Z","status":"ssl_error","status_checked_at":"2026-01-20T16:10:39.493Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["drawing","javascript","post-it","scribble"],"created_at":"2026-01-20T18:04:20.062Z","updated_at":"2026-01-20T18:04:24.703Z","avatar_url":"https://github.com/naknomum.png","language":"JavaScript","readme":"# scribby\n\n_scribby_ is a javascript library which lets users draw simple \"scribbles\" on a web page.\n\n\n## Objectives\n\n* svg-based, smooth/natural drawing\n\n* simple/intuitive (non-existent) interface\n\n* json representation\n\n* localStorage and (experimental) rest-based persistence\n\n* lightweight, no dependencies\n\n\n## Components\n\nThe main functionality is in **scribby.js**, which handles the drawing on an svg dom element.  Also included is **notey.js** which presents\na simple post-it note-like object on a webpage, as an example application using scribby.js.  Utility functionality is found in draggy.js and resty.js (but these are only needed for the Notey app).\n\n### Embeddable svg file\n\nThere is also a `scribby-embed.svg` file that can simply be inserted into a page as an HTML Object, such as:\n\n`\u003cobject data=\"scribby-embed.svg\"\u003e\u003c/object\u003e`\n\n\n## Usage examples\n\n### Draw on svg\n\nUsing _scribby_ to enable drawing on an svg element:\n\n```javascript\nvar svgEl = document.getElementById('svg');\nvar scr = new Scribby(svgEl);\nscr.setAttrStroke('blue');\nscr.setAttrStrokeWidth(4);\n ...\nscr.undo();\nscr.redo();\nscr.reset();\n\nvar keep = scr.toJson();\nvar dup = new Scribby(svgEl2, keep);\n```\n\n![svg element](example/scribby-svg.png)\n\n### Notey usage\n\nUsing _notey_ to put a note on a page (which uses _scribby_ for its contents):\n\n```javascript\nvar note = new Notey();\nnote.attachToBody();\nnote.save();\n```\n![note and active note (mouseover)](example/scribby-notey.png)\n\n\n### Using scribby-embed.svg\n\nSelf-contained, simple, one-line usage.  (May be used multiple times on a single page.)\n\n```javascript\n   \u003cobject data=\"scribby-embed.svg\" id=\"my-id\" style=\"width: 300px; height: 200px;\"\u003e\u003c/object\u003e\n```\n\n### Misc. \n\nTypical json representation of a _note_:\n\n```json\n{\n    \"id\": \"7654b53b-a087-45f7-8163-46e96081fca7\",\n    \"version\": \"1.0b\",\n    \"dateCreated\": \"2020-06-14T08:19:04.927Z\",\n    \"dateModified\": \"2020-06-14T08:19:11.316Z\",\n    \"dateSaved\": \"2020-06-14T08:19:11.316Z\",\n    \"dateSynced\": \"2020-06-14T08:19:04.930Z\",\n    \"bgColorId\": 1,\n    \"bgColor\": \"#FE8\",\n    \"strokeColorId\": 0,\n    \"strokeColor\": \"#000\",\n    \"width\": 167,\n    \"height\": 167,\n    \"x\": 876,\n    \"y\": 353,\n    \"scribby\": {\n        \"version\": \"1.0b\",\n        \"dateCreated\": \"2020-06-14T08:19:04.928Z\",\n        \"dateModified\": \"2020-06-14T08:19:11.316Z\",\n        \"svg\": {\n            \"width\": 167,\n            \"height\": 167,\n            \"content\": \"\u003cpath fill=\\\"none\\\" stroke=\\\"#000\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" d=\\\"M57 69 L56.66 69 L56.2 69 [...] 135.75 L98.87 136.87 L98.37 137.87 L97.87 138.87 L97.37 139.75 L96.87 140.62 L96.5 141.5 L96.16 142.5 L96 143.5 L96 144.5\\\"\u003e\u003c/path\u003e\"\n        },\n        \"strokeWidth\": 2,\n        \"bufferSize\": 8\n    }\n}\n```\n\n## Demo\n\n[Try it out.](https://naknomum.github.io/scribby/)\n\n## Future development\n\nPossible features and improvements.... though these may go against the objective of simplified usage!\n\n* multi-touch \u0026 pressure support\n* better configuration via constructor\n* generalize (or plugin?) rest support\n* scaling / re-sizing\n* sharing (live), see also:\n* multi-user (as \"layers\")\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaknomum%2Fscribby","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaknomum%2Fscribby","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaknomum%2Fscribby/lists"}