How can I directly use streamlit to create sidebars similar to those in pictures?

How can I directly use streamlit to create sidebars similar to those in pictures?

One option is to use this library GitHub - arnaudmiribel/stoc to create a table-of-contents section in the sidebar.

Is that what you’re looking for?


Yes, it’s great! In fact, I want to read Word documents(Such as a xxx.doc or xxx.docx document) with images and text directly through Streamlit. What’s a good solution?

@Bruce_Yin In my experience, .docx tend to be easier to work with, because they use a more open standard than .doc files. I haven’t used this particular library, but this looks like it would be a good library to use: python-docx — python-docx 0.8.11 documentation

1 Like

Yes, the files I intend to display using streamlit are all in .docx format. As far as you know, is there a better way or demo to render .docx files directly through streamlit? thanks!

Here’s one way, using the mammoth library, which can convert docx into either markdown or html

import mammoth
import streamlit as st
import streamlit.components.v1 as components

uploaded = st.file_uploader("Upload docx", type="docx")

if uploaded is not None:
    md, html = st.tabs(["Markdown", "HTML"])
    with md:
        result = mammoth.convert_to_markdown(uploaded).value
    with html:
        result = mammoth.convert_to_html(uploaded).value
        components.html(result, height=500, scrolling=True)

Great! My DOCX document can be displayed. May I ask how to display the directory structure in DOCX in the sidebar through variable result and stoc()? (how do I loop out from variable result?)

Iterating on the stoc library I referenced before, this is one way you could accomplish it – just get the markdown from mammoth, and pass it to stoc.from_markdown

import streamlit as st

from stoc2 import stoc

text = """
# Testing

Some stuff

## More stuff

### Even more stuff

More stuff?


* A
* B
* C

# New H1



import streamlit as st
import unidecode

a.toc {
    color: inherit;
    text-decoration: none; /* no underline */

class stoc:
    def __init__(self):
        self.toc_items = list()

    def _h1(self, text):
        self.toc_items.append(("h1", text))

    def _h2(self, text):
        self.toc_items.append(("h2", text))

    def _h3(self, text):
        self.toc_items.append(("h3", text))

    def toc(self):
        st.write(DISABLE_LINK_CSS, unsafe_allow_html=True)
        st.sidebar.caption("Table of contents")
        markdown_toc = ""
        for title_size, title in self.toc_items:
            h = int(title_size.replace("h", ""))
            markdown_toc += (
                " " * 2 * h
                + "- "
                + f'<a href="#{normalize(title)}" class="toc"> {title}</a> \n'
        st.sidebar.write(markdown_toc, unsafe_allow_html=True)

    def from_markdown(cls, text: str):
        self = cls()
        for line in text.splitlines():
            if line.startswith("###"):
            elif line.startswith("##"):
            elif line.startswith("#"):

def normalize(s):
    Normalize titles as valid HTML ids for anchors
    >>> normalize("it's a test to spot how Things happ3n héhé")

    # Replace accents with "-"
    s_wo_accents = unidecode.unidecode(s)
    accents = [s for s in s if s not in s_wo_accents]
    for accent in accents:
        s = s.replace(accent, "-")

    # Lowercase
    s = s.lower()

    # Keep only alphanum and remove "-" suffix if existing
    normalized = (
        "".join([char if char.isalnum() else "-" for char in s]).strip("-").lower()


1 Like

Where’s the pull request @blackary??? Pull requests · arnaudmiribel/stoc · GitHub :smiley:

Right there, @arnaud :wink: Add from_markdown method by blackary · Pull Request #1 · arnaudmiribel/stoc · GitHub

1 Like