{"_id":"@markerjs/markerjs-ui","_rev":"6-8b6094422720636c85eedf4c5b1b2ee1","name":"@markerjs/markerjs-ui","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0-alpha.0":{"name":"@markerjs/markerjs-ui","version":"1.0.0-alpha.0","keywords":["image","annotation","web components"],"author":{"name":"Alan Mendelevich"},"license":"MIT","_id":"@markerjs/markerjs-ui@1.0.0-alpha.0","maintainers":[{"name":"ailon","email":"ailon@ailon.org"}],"homepage":"https://github.com/ailon/markerjs-ui#readme","bugs":{"url":"https://github.com/ailon/markerjs-ui/issues"},"dist":{"shasum":"c6dac0b43a75ef84ee59804e9cc18ed1b1c8c40b","tarball":"https://registry.npmjs.org/@markerjs/markerjs-ui/-/markerjs-ui-1.0.0-alpha.0.tgz","fileCount":7,"integrity":"sha512-bb9S+lH2MjHnreJ2Qa+9cSNK8RXPXggBufdi6jYf3b8hqceMFay4f3RZZ3COI9vu0oiwaee2+/gApI3rc/eLKg==","signatures":[{"sig":"MEQCIChJsx3yhHBMfymPwaQsqbw0PjdBcX82PhFptVoanTGnAiBx/qcIK1bvrSxktMwcU06EVCMDekGmz33V89x3eGp2bQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":337411},"main":"./markerjs-ui.umd.cjs","type":"module","types":"./markerjs-ui.d.ts","module":"./markerjs-ui.js","exports":{".":{"import":"./markerjs-ui.js","require":"./markerjs-ui.umd.cjs"}},"gitHead":"961896b15b17a6cc396bee5a6595d96bd2471a94","scripts":{},"_npmUser":{"name":"ailon","email":"ailon@ailon.org"},"repository":{"url":"git+https://github.com/ailon/markerjs-ui.git","type":"git"},"_npmVersion":"10.2.4","description":"marker.js UI is a simple and lightweight UI for marker.js, a library for creating image annotations.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"@markerjs/markerjs3":"^3.5.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/markerjs-ui_1.0.0-alpha.0_1744372735437_0.5791499306933281","host":"s3://npm-registry-packages-npm-production"}},"1.0.0-beta.0":{"name":"@markerjs/markerjs-ui","version":"1.0.0-beta.0","keywords":["image","annotation","web components"],"author":{"name":"Alan Mendelevich"},"license":"MIT","_id":"@markerjs/markerjs-ui@1.0.0-beta.0","maintainers":[{"name":"ailon","email":"ailon@ailon.org"}],"homepage":"https://github.com/ailon/markerjs-ui#readme","bugs":{"url":"https://github.com/ailon/markerjs-ui/issues"},"dist":{"shasum":"f6aedf5c7f972f71c476a5d3290f3cd9713cdbdd","tarball":"https://registry.npmjs.org/@markerjs/markerjs-ui/-/markerjs-ui-1.0.0-beta.0.tgz","fileCount":7,"integrity":"sha512-qfGUTxYzt3u7X2dxtuCrCSNPB6OxcCUGYAQl23iUrji4jgj7gHC5w+MEzzHdyZsHU34kNE5U0DUGAb+Z3ANKAg==","signatures":[{"sig":"MEQCIC9S6hgJ8Fk1gNrwTqVQZqcSnCEYmFdN1Yco2ajkzwUCAiA9qsNSNKgV/6QsEElI8tjz/E+IwGxHyFapTadpzqttHQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":341071},"main":"./markerjs-ui.umd.cjs","type":"module","types":"./markerjs-ui.d.ts","module":"./markerjs-ui.js","exports":{".":{"import":"./markerjs-ui.js","require":"./markerjs-ui.umd.cjs"}},"gitHead":"fcee597fe4c0273c0325512792bfb1919f58cacf","scripts":{},"_npmUser":{"name":"ailon","email":"ailon@ailon.org"},"repository":{"url":"git+https://github.com/ailon/markerjs-ui.git","type":"git"},"_npmVersion":"10.2.4","description":"marker.js UI is a simple and lightweight UI for marker.js, a library for creating image annotations.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"@markerjs/markerjs3":"^3.5.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/markerjs-ui_1.0.0-beta.0_1744702354915_0.47083759800031744","host":"s3://npm-registry-packages-npm-production"}},"1.0.0-beta.1":{"name":"@markerjs/markerjs-ui","version":"1.0.0-beta.1","keywords":["image","annotation","web components"],"author":{"name":"Alan Mendelevich"},"license":"MIT","_id":"@markerjs/markerjs-ui@1.0.0-beta.1","maintainers":[{"name":"ailon","email":"ailon@ailon.org"}],"homepage":"https://github.com/ailon/markerjs-ui#readme","bugs":{"url":"https://github.com/ailon/markerjs-ui/issues"},"dist":{"shasum":"a25039107ce54591be912c81ff762cd97a27ba8f","tarball":"https://registry.npmjs.org/@markerjs/markerjs-ui/-/markerjs-ui-1.0.0-beta.1.tgz","fileCount":7,"integrity":"sha512-wj1+PSMImAepvUbmYp3fSKIGHo0wQ5nHA4e6eTV2UEmcZviboHKw8LvL6kRuYUouzsNN1zQb/sTus/4h8iWAUg==","signatures":[{"sig":"MEUCIQCpZIzlhWNu27ULW6Ag1StjeLeiWIemOQ7MDgRHvrzkFgIgJTYG8WegJfE2DhHGKKs5x6/0/ibRVUDVsEvE1uEeTd4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":359200},"main":"./markerjs-ui.umd.cjs","type":"module","types":"./markerjs-ui.d.ts","module":"./markerjs-ui.js","exports":{".":{"import":"./markerjs-ui.js","require":"./markerjs-ui.umd.cjs"}},"gitHead":"e0eded651f36bb835fe72f77e0c9c53efbd92374","scripts":{},"_npmUser":{"name":"ailon","email":"ailon@ailon.org"},"repository":{"url":"git+https://github.com/ailon/markerjs-ui.git","type":"git"},"_npmVersion":"10.2.4","description":"marker.js UI is a simple and lightweight UI for marker.js, a library for creating image annotations.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"@markerjs/markerjs3":"^3.5.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/markerjs-ui_1.0.0-beta.1_1744805993179_0.7921277981092347","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@markerjs/markerjs-ui","version":"1.0.0","keywords":["image","annotation","web components"],"author":{"name":"Alan Mendelevich"},"license":"MIT","_id":"@markerjs/markerjs-ui@1.0.0","maintainers":[{"name":"ailon","email":"ailon@ailon.org"}],"homepage":"https://github.com/ailon/markerjs-ui#readme","bugs":{"url":"https://github.com/ailon/markerjs-ui/issues"},"dist":{"shasum":"bae7b48dec3bc2123ebe26e8a27da19d016f09fe","tarball":"https://registry.npmjs.org/@markerjs/markerjs-ui/-/markerjs-ui-1.0.0.tgz","fileCount":7,"integrity":"sha512-sADD+a4c5XOeZtFhqqk6/HYASg8xDzPXQy+XRKlbl7mc2Xrn9OJSqwHP5tJKNF5AzrlMDLgvxELMD293w4TU/w==","signatures":[{"sig":"MEYCIQDkiQiIkG/T2qqAUZMa0q8k6JYd1UPbd+yDt20ZLUv2OAIhAIKBofspjILEzacaIoztsEh25HLcbMxniPD+er8hXRiF","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":363185},"main":"./markerjs-ui.umd.cjs","type":"module","types":"./markerjs-ui.d.ts","module":"./markerjs-ui.js","exports":{".":{"import":"./markerjs-ui.js","require":"./markerjs-ui.umd.cjs"}},"gitHead":"c1e0fba4bbc9d773a2ad41861e9fff96ec0db88f","scripts":{},"_npmUser":{"name":"ailon","email":"ailon@ailon.org"},"repository":{"url":"git+https://github.com/ailon/markerjs-ui.git","type":"git"},"_npmVersion":"10.2.4","description":"marker.js UI is a simple and lightweight UI for marker.js, a library for creating image annotations.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"@markerjs/markerjs3":"^3.5.6"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/markerjs-ui_1.0.0_1744971406433_0.032164470561542924","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@markerjs/markerjs-ui","version":"1.0.1","keywords":["image","annotation","web components"],"author":{"name":"Alan Mendelevich"},"license":"MIT","_id":"@markerjs/markerjs-ui@1.0.1","maintainers":[{"name":"ailon","email":"ailon@ailon.org"}],"homepage":"https://github.com/ailon/markerjs-ui#readme","bugs":{"url":"https://github.com/ailon/markerjs-ui/issues"},"dist":{"shasum":"b1860fe034ab5d356c2edf10f922da1210484c89","tarball":"https://registry.npmjs.org/@markerjs/markerjs-ui/-/markerjs-ui-1.0.1.tgz","fileCount":7,"integrity":"sha512-4NAgosRLIQZJWkfXyFAZzcEKQswrwlqSyiqufvZZAyXT/9OpvvqJpbYudvmsOZyhurDrp4SH/9OEIwwjlTKmNQ==","signatures":[{"sig":"MEUCIQChBqsVLn/aXS8Vx89eB+0FdH3SqzrRQYRnxaHd5na56wIgIMH8DJO6x/OLrORQZAykqL12OBNvBTvOPwworJtxwoM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":363346},"main":"./markerjs-ui.umd.cjs","type":"module","types":"./markerjs-ui.d.ts","module":"./markerjs-ui.js","exports":{".":{"import":"./markerjs-ui.js","require":"./markerjs-ui.umd.cjs"}},"gitHead":"1e306972bd1e0476f0ab58c216ebba5eb166519a","scripts":{},"_npmUser":{"name":"ailon","email":"ailon@ailon.org"},"repository":{"url":"git+https://github.com/ailon/markerjs-ui.git","type":"git"},"_npmVersion":"10.9.2","description":"marker.js UI is a simple and lightweight UI for marker.js, a library for creating image annotations.","directories":{},"_nodeVersion":"22.16.0","dependencies":{"@markerjs/markerjs3":"^3.5.6"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.11.1+sha512.e519b9f7639869dc8d5c3c5dfef73b3f091094b0a006d7317353c72b124e80e1afd429732e28705ad6bfa1ee879c1fce46c128ccebd3192101f43dd67c667912","_npmOperationalInternal":{"tmp":"tmp/markerjs-ui_1.0.1_1757574242786_0.35461139610614345","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@markerjs/markerjs-ui","version":"1.1.0","type":"module","author":{"name":"Alan Mendelevich"},"license":"MIT","description":"marker.js UI is a simple and lightweight UI for marker.js, a library for creating image annotations.","repository":{"type":"git","url":"git+https://github.com/ailon/markerjs-ui.git"},"keywords":["image","annotation","web components"],"scripts":{},"dependencies":{"@markerjs/markerjs3":"^3.9.0"},"exports":{".":{"import":"./markerjs-ui.js","require":"./markerjs-ui.umd.cjs"}},"packageManager":"pnpm@10.11.1+sha512.e519b9f7639869dc8d5c3c5dfef73b3f091094b0a006d7317353c72b124e80e1afd429732e28705ad6bfa1ee879c1fce46c128ccebd3192101f43dd67c667912","main":"./markerjs-ui.umd.cjs","module":"./markerjs-ui.js","types":"./markerjs-ui.d.ts","_id":"@markerjs/markerjs-ui@1.1.0","gitHead":"2f22bd65a479195000968a81154a76ec70e57e61","bugs":{"url":"https://github.com/ailon/markerjs-ui/issues"},"homepage":"https://github.com/ailon/markerjs-ui#readme","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-8ItHc5aWDZZoRZqG4BRHA8Q5YqXZ9LxjaKLyIBgnVIBRtiXc0IJwh1darjyL6fyj0kX3czGLntq3kq5Gyl9+Fw==","shasum":"659ae3e9608cb9de1b7c41ec29c27b52a787d746","tarball":"https://registry.npmjs.org/@markerjs/markerjs-ui/-/markerjs-ui-1.1.0.tgz","fileCount":7,"unpackedSize":366613,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDVCXmtOM+SOlgohqjgF0x/d378zF6I14jPexubn/APMgIgCyZ8eB10jyD3pE4HMyNF8x6V2MsJg1IWQpWJ0veBVys="}]},"_npmUser":{"name":"ailon","email":"ailon@ailon.org"},"directories":{},"maintainers":[{"name":"ailon","email":"ailon@ailon.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/markerjs-ui_1.1.0_1769854641722_0.36703127024554916"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-11T11:58:55.346Z","modified":"2026-01-31T10:17:22.064Z","1.0.0-alpha.0":"2025-04-11T11:58:55.647Z","1.0.0-beta.0":"2025-04-15T07:32:35.078Z","1.0.0-beta.1":"2025-04-16T12:19:53.375Z","1.0.0":"2025-04-18T10:16:46.617Z","1.0.1":"2025-09-11T07:04:02.966Z","1.1.0":"2026-01-31T10:17:21.936Z"},"bugs":{"url":"https://github.com/ailon/markerjs-ui/issues"},"author":{"name":"Alan Mendelevich"},"license":"MIT","homepage":"https://github.com/ailon/markerjs-ui#readme","keywords":["image","annotation","web components"],"repository":{"type":"git","url":"git+https://github.com/ailon/markerjs-ui.git"},"description":"marker.js UI is a simple and lightweight UI for marker.js, a library for creating image annotations.","maintainers":[{"name":"ailon","email":"ailon@ailon.org"}],"readme":"# marker.js UI - the \"3 lines of code\" UI wrapper for marker.js 3\n\nmarker.js UI is a wrapper for [marker.js 3](https://markerjs.com) bringing a full-fledged editor and viewer UI to the library. It is designed to make it super easy to integrate image annotation into your projects with minimal custom code needed. marker.js UI brings back that \"3 lines of code\" feel to the library that some marker.js 2 users loved.\n\n### When to use marker.js UI vs. marker.js 3\n\nThe choice is quite simple:\n\n- Use marker.js UI if you want to add image annotation to your project with minimal effort.\n- Use marker.js 3 directly if you want to build a custom UI and have full control over the look, feel, and available functionality.\n\n## Installation\n\n```bash\nnpm install @markerjs/markerjs3 @markerjs/markerjs-ui\n```\n\nNote that you need to install both `@markerjs/markerjs3` and `@markerjs/markerjs-ui` to use marker.js UI.\n\nThe library includes TypeScript type definitions out of the box.\n\n## Usage\n\n### Annotation Editor\n\n`AnnotationEditor` is a web component that, as the name suggests, allows users to annotate images easily.\n\nHere are the \"3 lines of code\" to start annotating an image:\n\n```js\nconst editor = new AnnotationEditor();\neditor.targetImage = targetImage;\ncontainerDiv.appendChild(editor);\n```\n\nObviously, you'd need to import the `AnnotationEditor` class from the library first:\n\n```js\nimport { AnnotationEditor } from \"@markerjs/markerjs-ui\";\n```\n\nAnd the `targetImage` in the example above is the image you want to annotate. It is an `HTMLImageElement` that can either be a reference to an image on your page, or you can create a new image element in JavaScript and set its `src` property to the image you want to annotate.\n\n```js\nconst targetImage = document.createElement(\"img\");\ntargetImage.src = \"image.jpg\";\n```\n\n#### Handling Events\n\nThere are two main events fired by the `AnnotationEditor` class: `editorsave` and `editorclose`.\n\nThe `editorclose` tells you that the user clicked the close button and you can decide what it means in your context. Most likely you want to remove the editor from the page.\n\nThe `editorsave` event is fired when the user clicks the save button. There are two properties in the event that are important to you:\n\n- `detail.state` - the annotations that were created by the user. This is a marker.js 3 `AnnotationState` object that you can save for later.\n- `detail.dataUrl` (optional) - the data URL of the annotated image. This is a base64 encoded string that you can use to display the annotated image in an `img` element or save it to a file.\n\nHere's an example of how to handle the `editorsave` event:\n\n```js\neditor.addEventListener(\"editorsave\", (event) => {\n  console.log(\"Editor state:\", event.detail.state);\n  const dataUrl = event.detail.dataUrl;\n\n  // download the rasterized image\n  if (dataUrl) {\n    const link = document.createElement(\"a\");\n    link.href = dataUrl;\n    link.download = \"annotation.png\";\n    link.click();\n  }\n});\n```\n\n#### Editing Annotations\n\nTo edit existing annotations, you need to load the `AnnotationState` object into the editor. You can do this by calling the `restoreState` method on the editor instance:\n\n```js\neditor.restoreState(savedState); // where savedState is your AnnotationState object\n```\n\n### Annotation Viewer\n\n`AnnotationViewer` is a web component that allows you to display an image with an annotations overlay on top of it.\n\nHere's how you display the previously saved annotations on an image:\n\n```js\nconst viewer = new AnnotationViewer();\nviewer.targetImage = targetImage;\ncontainerDiv.appendChild(viewer);\nviewer.show(savedState);\n```\n\n## Docs and Tutorials\n\nYou can find marker.js UI reference and tutorials [here](https://markerjs.com/docs-v3/).\n\n## License\n\nmarker.js UI is licensed under the [MIT License](LICENSE).\n\nNote that marker.js 3 has its own license, which you can find [here](https://github.com/ailon/markerjs3/blob/master/LICENSE). Alternative licenses are available on [markerjs.com](https://markerjs.com/).\n\n## Credits\n\nIn addition to [marker.js 3] and TypeScript marker.js UI is based on the following tools and libraries (and their dependencies):\n\n- [Vite](https://vite.dev/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [daisyUI](https://daisyui.com/)\n- [Tabler Icons](https://tabler.io/icons)\n\n[marker.js 3]: https://markerjs.com\n","readmeFilename":"README.md"}