Framework Adapters

annotate-image provides thin framework adapters for jQuery, React, and Vue. Each adapter is a separate entry point — importing one does not pull in the others.

jQuery

CDN
HTML 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/annotate-image@2.0.0-beta.3/dist/jquery.min.js"></script>
npm
Bash 
npm install annotate-image jquery
JavaScript 
import 'annotate-image/jquery';
import 'annotate-image/css';
Usage
JavaScript 
$(window).on('load', function() {
  $('#my-image').annotateImage({
    editable: true,
    notes: [
      { top: 80, left: 30, width: 100, height: 350,
        text: "Cypress tree", id: "note-1", editable: true },
      { top: 20, left: 200, width: 500, height: 200,
        text: "Swirling sky", id: "note-2", editable: false }
    ]
  });

  // Destroy
  $('#my-image').annotateImage('destroy');
});
Live Demo
Starry Night

React

Installation
Bash 
npm install annotate-image react react-dom
Usage (JSX)
JSX 
import { useRef } from 'react';
import { AnnotateImage } from 'annotate-image/react';
import 'annotate-image/css';

function App() {
  const ref = useRef(null);

  return (
    <>
      <AnnotateImage
        ref={ref}
        src="/photo.jpg"
        width={800}
        height={600}
        editable
        notes={[]}
        onChange={(notes) => console.log(notes)}
        onSave={(note) => console.log('Saved:', note)}
        onDelete={(note) => console.log('Deleted:', note)}
      />
      <button onClick={() => ref.current?.add()}>Add Note</button>
    </>
  );
}
Props
Prop Type Default Description
src string — Image URL (required)
width number — Image width in pixels
height number — Image height in pixels
notes AnnotationNote[] [] Initial annotations
editable boolean true Enable editing
onChange (notes: NoteData[]) => void — Notes changed
onSave (note: NoteData) => void — Note saved
onDelete (note: NoteData) => void — Note deleted
onLoad (notes: NoteData[]) => void — Notes loaded
alt string — Image alt text
autoResize boolean true Re-scale on resize
onError (ctx: AnnotateErrorContext) => void — Error occurred
Ref Methods
Method Returns Description
add() void Enter add-note mode
clear() void Remove all annotations
getNotes() NoteData[] Get current annotations
Live Demo

Vue

Installation
Bash 
npm install annotate-image vue
Usage (SFC)
Vue 
<script setup>
import { ref } from 'vue';
import { AnnotateImage } from 'annotate-image/vue';
import 'annotate-image/css';

const annotator = ref();
</script>

<template>
  <AnnotateImage
    ref="annotator"
    src="/photo.jpg"
    :width="800"
    :height="600"
    editable
    :notes="[]"
    @change="(notes) => console.log(notes)"
    @save="(note) => console.log('Saved:', note)"
    @delete="(note) => console.log('Deleted:', note)"
  />
  <button @click="annotator?.add()">Add Note</button>
</template>
Props
Prop Type Default Description
src String — Image URL (required)
width Number — Image width in pixels
height Number — Image height in pixels
notes AnnotationNote[] — Initial annotations
alt String — Image alt text
editable Boolean true Enable editing
autoResize Boolean true Re-scale on resize
Emits
Event Payload Description
change NoteData[] Notes changed
save NoteData Note saved
delete NoteData Note deleted
load NoteData[] Notes loaded
error AnnotateErrorContext Error occurred
Exposed Methods
Method Returns Description
add() void Enter add-note mode
clear() void Remove all annotations
getNotes() NoteData[] Get current annotations
notes Ref<NoteData[]> Reactive current notes
Live Demo