Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Text Annotation / Text Dragging with Mouse in Dash

Hi, I am working on a task which has some component of named entity recognition, and I was wondering if there is any feature in Dash where it allows interactive text annotation of intervals of words.
An example of what I would like to do is something like the image below (which is from Doccano, an NER labeling tool). I like the flexibility of Dash, and hence I would like to leverage Dash (instead of just using tools like Doccano or BRAT) but would need a mouse-highlighting event that could capture the fact that I am dragging from index x to index y and the ability to let people annotate this span of text, in order for it to work.


There isn’t a component that doesn’t this out of the box, but you could write your own Dash React component using JavaScript’s window.getSelection(); method.

Thank you very much for the direction @chriddyp!
I really would like to look into writing this dash react component, but I am not familiar to this (and I know just the very basics in javascript)

  • I guess there is a way to write this react component in javascript and then call this within the Python Dash framework?
  • Would you be able to point me to any sample links to these react components (and maybe how these components are called within python dash) so that I could get familiar with how this would be done?

You could take a look at the Keyboard component,

In your case, you would capture selection(s) from window rather than keyboard events, but I guess the principle is the same.

1 Like

Also see our documentation on

1 Like