Streamlit Annotated Text

4.0.2 · active · verified Wed Apr 15

st-annotated-text is a simple component designed to display annotated text directly within Streamlit applications. Currently at version 4.0.2, the library provides an intuitive way to highlight and label parts of text. Releases are typically driven by compatibility fixes and minor feature enhancements.

Warnings

gotcha The correct import path for the `annotated_text` function is `from annotated_text import annotated_text`. Attempting to import from `st_annotated_text` (e.g., `from st_annotated_text import annotated_text`) will result in a `ModuleNotFoundError`.
Fix: Always use `from annotated_text import annotated_text`.
gotcha For very long strings or complex annotations, the displayed text may be truncated within the Streamlit app. This is often due to the underlying `iframe` component not having enough height. You can often mitigate this by passing a `height` keyword argument to `annotated_text()`.
Fix: Pass `height=N` (e.g., `height=200`) to the `annotated_text()` function to allocate more vertical space.
breaking Version 4.0.2 introduced 'Compatibility with both older and current htbuilder versions.' This suggests that prior 4.x.x versions might have had specific `htbuilder` version requirements, potentially leading to runtime errors if `htbuilder` was not correctly aligned. Ensure `htbuilder` is up-to-date or compatible with your `st-annotated-text` version.
Fix: Upgrade `st-annotated-text` to 4.0.2 or later, and ensure `htbuilder` is also updated (`pip install --upgrade htbuilder`).
gotcha When trying to combine `annotated_text` output (or `annotation` from `htbuilder`) directly within `st.markdown(..., unsafe_allow_html=True)`, it can lead to parsing issues or incorrect rendering. Streamlit's HTML sanitizer might struggle with fragmented HTML.
Fix: Wrap the entire HTML output in a single parent HTML element (e.g., `h3` from `htbuilder`) before passing it to `st.markdown` to ensure proper parsing.
gotcha Global customization of annotation styles (e.g., `SHOW_LABEL_SEPARATOR`, `BORDER_RADIUS`, `PADDING`) is done by importing and modifying variables in the `annotated_text.parameters` module. This is less explicit than passing arguments directly to the main function.
Fix: Import `parameters` from `annotated_text` and modify its attributes (e.g., `from annotated_text import parameters; parameters.SHOW_LABEL_SEPARATOR = False`) before calling `annotated_text`.

Install

pip install streamlit st-annotated-text Install with pip

Imports

annotated_text
```
from annotated_text import annotated_text
```
The top-level package for import is `annotated_text`, not `st_annotated_text`.

Quickstart

This example demonstrates basic usage, including simple annotations, custom background colors, and nested list structures for more complex text segments.

import streamlit as st
from annotated_text import annotated_text

st.set_page_config(layout='centered', page_title='Annotated Text Demo')

st.title("My Annotated Text App")

annotated_text(
    "This ", 
    ("is", "Verb"), 
    " some ", 
    ("annotated", "Adj"), 
    ("text", "Noun"), 
    " for those of ", 
    ("you", "Pronoun"), 
    " who ", 
    ("like", "Verb"), 
    " this sort of ", 
    ("thing", "Noun"),
    "."
)

st.subheader("Custom Colors and No Label")
annotated_text(
    "And here's a ",
    ("word", "", "#faf"),
    " with a fancy background but no label."
)

st.subheader("Nested Lists for Complex Structures")
my_complex_list = [
    "Hello ", 
    ["my ", ("dear", "Adj"), " "],
    ("world", "Noun"),
    "."
]
annotated_text(my_complex_list)

view raw JSON →