{"id":6462,"library":"st-annotated-text","title":"Streamlit Annotated Text","description":"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.","status":"active","version":"4.0.2","language":"en","source_language":"en","source_url":"https://github.com/tvst/st-annotated-text","tags":["streamlit","text annotation","ui","nlp"],"install":[{"cmd":"pip install streamlit st-annotated-text","lang":"bash","label":"Install with pip"}],"dependencies":[{"reason":"Required to run the Streamlit custom component.","package":"streamlit","optional":false},{"reason":"Used for building HTML elements; recent versions include compatibility fixes.","package":"htbuilder","optional":false}],"imports":[{"note":"The top-level package for import is `annotated_text`, not `st_annotated_text`.","wrong":"from st_annotated_text import annotated_text","symbol":"annotated_text","correct":"from annotated_text import annotated_text"}],"quickstart":{"code":"import streamlit as st\nfrom annotated_text import annotated_text\n\nst.set_page_config(layout='centered', page_title='Annotated Text Demo')\n\nst.title(\"My Annotated Text App\")\n\nannotated_text(\n    \"This \", \n    (\"is\", \"Verb\"), \n    \" some \", \n    (\"annotated\", \"Adj\"), \n    (\"text\", \"Noun\"), \n    \" for those of \", \n    (\"you\", \"Pronoun\"), \n    \" who \", \n    (\"like\", \"Verb\"), \n    \" this sort of \", \n    (\"thing\", \"Noun\"),\n    \".\"\n)\n\nst.subheader(\"Custom Colors and No Label\")\nannotated_text(\n    \"And here's a \",\n    (\"word\", \"\", \"#faf\"),\n    \" with a fancy background but no label.\"\n)\n\nst.subheader(\"Nested Lists for Complex Structures\")\nmy_complex_list = [\n    \"Hello \", \n    [\"my \", (\"dear\", \"Adj\"), \" \"],\n    (\"world\", \"Noun\"),\n    \".\"\n]\nannotated_text(my_complex_list)","lang":"python","description":"This example demonstrates basic usage, including simple annotations, custom background colors, and nested list structures for more complex text segments."},"warnings":[{"fix":"Always use `from annotated_text import annotated_text`.","message":"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`.","severity":"gotcha","affected_versions":"<1.1.0 and common user typos"},{"fix":"Pass `height=N` (e.g., `height=200`) to the `annotated_text()` function to allocate more vertical space.","message":"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()`.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Upgrade `st-annotated-text` to 4.0.2 or later, and ensure `htbuilder` is also updated (`pip install --upgrade htbuilder`).","message":"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.","severity":"breaking","affected_versions":"Potentially 4.0.0, 4.0.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All versions"},{"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`.","message":"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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-15T00:00:00.000Z","next_check":"2026-07-14T00:00:00.000Z"}