# Is it possible to customize annotation UI?

**URL:** <https://support.prodi.gy/t/is-it-possible-to-customize-annotation-ui/418>\
**Category:** Uncategorized\
**Tags:** enhancement, ner, front-end\
**Created:** [March 20, 2018, 12:45pm UTC](https://support.prodi.gy/t/is-it-possible-to-customize-annotation-ui/418 "2018-03-20T12:45:29Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [March 20, 2018, 7:12pm UTC](https://support.prodi.gy/t/is-it-possible-to-customize-annotation-ui/418/2 "2018-03-20T19:12:59Z")

</div>

Not yet – but possibly soon! In v1.4.0, we quietly shipped very experimental support for the features described here:

> [@Custom view templates with scripts](https://support.prodi.gy/t/custom-view-templates-with-scripts/302/6):
>
> Update: All works pretty smoothly already! :tada [custom\_js\_poc] The above example only needed the following html\_template and javascript config: \<button class="custom-button" onClick="updateText()"\> point_down Text to uppercase \</button\> \<br /\> \<strong\>{{text}}\</strong\> let upper = false; function updateText() { const text = window.prodigy.content.text; const newText = !upper ? text.toUpperCase() : text.toLowerCase(); window.prodigy.update({ text: newText }); upper = !upper; …

The custom scripts are currently only available for the `html` interface, but if it all works well, we might consider adding an option for custom HTML and scripts to all interfaces. (In the case of `ner_manual`, we could, for example, allow custom HTML in the area below the text – so you could insert your own markup and links there, and write a JavaScript function that updates the data based on the current selection).

Another idea could be to break your task down into a classification task first – e.g. annotate if the title is about topic X, includes type Y or has context Z. This would let you use a custom HTML interface, or even the [choice mode](https://prodi.gy/demo?view_id=textchoice) with custom HTML (and even a list of several topic options to choose from). Once you've pre-classified your examples, you can then move on to annotate them manually.

> [@daniel](#):
>
> But I’d like to be able to convert this meta data to a link at the bottom of the UI, for quick access to the video (opened in new tab) by a single click.

Prodigy should convert all URLs in the task meta data to links, so in the meantime, this could be a simple solution for this particular case (where you actually know the link upfront).

> [@daniel](#):
>
> This should help me speed up the annotation process since I often can’t figure out the correct annotations from the context and need to look it up.

One quick note on this: Keep in mind that the harder it is for you to make the annotation decisions based on the context, the harder it will be for the model to pick up on context clues and learn the labels you assign. This is especially true if you're relying on mostly manual annotations. So if you can come up with creative ways to pack more text context into the individual task that's displayed, it might help the model learn your labels (and help you annotate them).

---

_[View the full topic](https://support.prodi.gy/t/is-it-possible-to-customize-annotation-ui/418)._