{"id":28145191,"url":"https://github.com/ailon/markerjs-live","last_synced_at":"2025-05-14T22:16:55.156Z","repository":{"id":44985835,"uuid":"390368909","full_name":"ailon/markerjs-live","owner":"ailon","description":"Display dynamic, interactive, and scalable image annotations in your web apps.","archived":false,"fork":false,"pushed_at":"2023-09-30T07:45:46.000Z","size":2134,"stargazers_count":7,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T16:34:54.339Z","etag":null,"topics":["image-annotation","image-processing","javascript","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ailon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2021-07-28T13:52:38.000Z","updated_at":"2024-07-23T08:50:24.000Z","dependencies_parsed_at":"2024-06-20T21:48:50.346Z","dependency_job_id":"445f4e60-1238-40fa-bd11-5ca3ce5cbb4e","html_url":"https://github.com/ailon/markerjs-live","commit_stats":{"total_commits":60,"total_committers":1,"mean_commits":60.0,"dds":0.0,"last_synced_commit":"334d996e17510b0abccc8835fa28d18098b483eb"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ailon%2Fmarkerjs-live","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ailon%2Fmarkerjs-live/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ailon%2Fmarkerjs-live/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ailon%2Fmarkerjs-live/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ailon","download_url":"https://codeload.github.com/ailon/markerjs-live/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253689898,"owners_count":21948075,"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":["image-annotation","image-processing","javascript","typescript"],"created_at":"2025-05-14T22:14:21.655Z","updated_at":"2025-05-14T22:16:55.137Z","avatar_url":"https://github.com/ailon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# marker.js Live \u0026mdash; Display interactive image annotations\n\n**[marker.js Live]** is a JavaScript library for overlaying dynamic interactive annotations on top of images. \n\n[marker.js Live] is a companion library for [marker.js 2]. While **marker.js 2** enables users to annotate images it produces both a static representation of the annotated image as well as a configuration dataset for future editing of the annotations. [marker.js Live] takes that configuration and displays it dynamically on top of original (untouched) images. This enables responsiveness, interactivity, and other use-cases beyond what static annotations could ever offer.\n\n**marker.js Live** is extensible and enables you to pick and choose the [plugins](https://markerjs.com/docs/markerjs-live/plugins) to add just the functionality you need for your project.\n\n## Installation\n\n```\nnpm install markerjs-live\n```\n\nor \n\n```\nyarn add markerjs-live\n```\n\n## Usage\n\nTo display dynamic image annotations in your project, first, annotate your images using [marker.js 2], grab the \"state\" configuration of the annotations, and then follow these 2 easy steps:\n\n1. Create an instance of `mjslive.MarkerView` passing a target image reference to the constructor.\n2. Call its `show()` method passing your annotation configuration (marker.js 2 state) to it.\n\nThat's it!\n\nHere's a simple example:\n\n```js\n// skip this line if you are importing marker.js Live into the global space via the script tag\nimport * as mjslive from 'markerjs-live';\n\n// create an instance of MarkerView and pass the target image reference as a parameter\nconst markerView = new mjslive.MarkerView(target);\n\n// call the show() method and pass your annotation configuration (created with marker.js 2) as a parameter\nmarkerView.show(markerState);\n```\n\nObviously, there's much more [marker.js Live] can do: use the range of events to add your own custom functionality based on lifecycle and interactions, or just utilize the pre-made plugins to extend the core features, or create your own plugins and share them with the community.\n\nFor these and other uses please refer to the [marker.js Live documentation](https://markerjs.com/docs/markerjs-live/getting-started).\n\n## Demos\nCheck out [marker.js Live demos](https://markerjs.com/demos/markerjs-live/all-defaults/) for various usage examples.\n\n## More docs and tutorials\nFor a more detailed \"Getting started\" and other docs and tutorials, please refer to \nthe [official documentation](https://markerjs.com/docs/markerjs-live/getting-started).\n\n\n## License\nLinkware (see [LICENSE](https://github.com/ailon/markerjs-live/blob/master/LICENSE) for details) - the UI displays a small link back to the marker.js website which should be retained.\n\nAlternative licenses are available through the [marker.js website](https://markerjs.com).\n\n[marker.js Live]: https://markerjs.com/products/markerjs-live\n[marker.js 2]: https://markerjs.com/products/markerjs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Failon%2Fmarkerjs-live","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Failon%2Fmarkerjs-live","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Failon%2Fmarkerjs-live/lists"}