Are you using HTML in Markdown? Tell us why!

Custom Components
42

Is it possible to inject Javascrpit into streamlit? I was trying to add google analytic to track the traffic but seems it does not work with unsafe_html_allow=True

43

Hi,

Iā€™m using streamlit right now to replace a complex react app (that might be potentially unsafe ;-)).

I think having a very close look at what people want to do with html markdown would be a great driver for key features.

For now I use it to integrate various media objects into the context of dataframes - clickable images (i would love to trigger python thoughā€¦), videos, links (that then run into triggering other services/processes). Also freely formatting tables is just great (I can turn a dataframe with a couple of string merges into something that does not resemble a table but portrays data in a meaningful way to the user).

I would certainly miss the feature for flexibility and this thread is a great case of how that opening enables creativity / possibility.

2 Likes
44

Thank you @nthmost for your useful feedback and follow-up. I appreciate it. I will give it a try.

I managed to get something similar working, but I noticed that the text direction gets distorted if there are 2 new lines (\n) in the text. Not sure why though. I will try your tip and see.

As you said, Arabic and its bidirectionality is not easy, and without HTML support, it will be extermely difficult. I am happy to see that itā€™s now on Steamlitā€™s road map. So, I hope it will be available soon.

RTL native support doesnā€™t only include text direction. For example, the whole layout should be a mirrored version of English. So, for example, the left side panel should be on the right. Checkboxes, SelectBoxes, bullets, etc. should also be on the right side, not on the left side.

A native RTL support in Streamlit would be great indeed to support languages such as Arabic, Farsi, Urdu, and Hebrew.

1 Like
45

I would like to inject javascript scripts in order to explore the awesome SlickGrid. But all the tags are removed.

For some examples see

https://mleibman.github.io/SlickGrid/examples/

st.markdown(
"""
<link rel="stylesheet" href="https://mleibman.github.io/SlickGrid/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="https://mleibman.github.io/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="https://mleibman.github.io/SlickGrid/examples/examples.css" type="text/css"/>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:600px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>
      <ul>
        <li>basic grid with minimal configuration</li>
      </ul>
        <h2>View Source:</h2>
        <ul>
            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
        </ul>
    </td>
  </tr>
</table>
<script src="https://mleibman.github.io/SlickGrid/lib/jquery-1.7.min.js"></script>
<script src="https://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="https://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="https://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script>
  var grid;
  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete"},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
  ];
  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };
  $(function () {
    var data = [];
    for (var i = 0; i < 500; i++) {
      data[i] = {
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 == 0)
      };
    }
    grid = new Slick.Grid("#myGrid", data, columns, options);
  })
</script>
""", unsafe_allow_html=True)
4 Likes
Is it possible to add a fixed sticky header like sidebar to streamlit?
46

Hey @Marc!

I think the ultimate solution for that will be plugin support, but it seems like you already guessed that since you just posted in that issue :smiley:

1 Like
47

Thatā€™s interesting, thanks for mentioning this. Iā€™m adding this observation to a bug recently filed about styling in Markdown, as it may be related.

And yes, internationalization is an important feature to us! Feedback from people who are actively developing in RTL languages will be especially important as we go forward. Please keep us informed on your experiences and use cases.

1 Like
48

Thank you so much @nthmost for filing that bug. I think itā€™s the same issue I am having. I have subscribed to that github issue. :+1:

2 Likes
49

One of the things Iā€™d like to be able to do is specify a div class for st.write, st.image, etc. and then specify specific styles for that class. Concretely, I have a list of images being rendered by st.image, but I want all them to be contained by a scroll box so that the entire app doesnā€™t extend down thousands of pixels on the page.

3 Likes
50

The use case I have for HTML embedding is that Iā€™m creating a quick app to filter through my liked tweets for specific content. The tweets usually have links and it would be better if those links were clickable and able to redirect you to the blog post that the tweet is linking to.

Since all html is escaped when rendering streamlit dataframes and tables, Iā€™ve managed to get around it by doing st.markdown(df.to_html(escape=False), unsafe_allow_html=True)

Also some of the apps I create also link to other apps locally, so being able to highlight link that link to localhost: based apps would also be another use case.

Still a great tool in general though!

2 Likes
51

I was hoping to try and monetize an app with Adsense display ads which requires some HTML snippets. I have yet to fully try to implement but is this a supported use case currently in markdown? Is there a better way to accomplish this?

52

Same here!

53

Iā€™d love to have HTML to embed other apps into streamlit. What would be also great to have an option to break out of the parent

to have the underlying app be displayed at a 90%-width resolution
3 Likes
54

I use it to embed Folium maps (as html objects) in apps

1 Like
55

The MainMenu component doesnā€™t make sense for viewers coming to a deployed app, so we did
hide_menu_style = ā€œā€"

#MainMenu {visibility: hidden;}

ā€œā€"
st.markdown(hide_menu_style, unsafe_allow_html=True)

For what itā€™s worth, I tried using unsafe_allow_html to embed javascript for an analytics app. That didnā€™t work, which wasnā€™t a huge deal.

3 Likes
56

Hi @Chris_Brake.

Welcome to the community :+1:

Could you provide a smal example/ code snippet of the Folium maps. I think this would be of general interest.

I could include it in the Gallery at awesome-streamlit.org.

57

Hi @Marc,
Itā€™s probably more of a hack than an elegant solution tbh (!):

  1. create map using folium as save as html (which folium makes really simple)
  2. run a basic python web server in the directory where I store the map file(s)
    python3 -m http.server [port]
  3. Folium map now available as url
  4. Use markup to insert local link as iframe:
        f'<iframe width="{width}" height="{height}" src="{src}" frameborder="0" ></iframe>',
        unsafe_allow_html=True,
    )

with src = the network url for the map
height = 900, width = 750 gives a nice portrait aspect ratio.

But I think the solution higher up this thread for creating & embedding Folium maps is probably better:

m = folium.Map(location=[45.5236, -122.6750])
    st.write(m._repr_html_(), unsafe_allow_html=True)
4 Likes
58

Iā€™m currently using it to adjust layout and add some simple CSS styling:

st.markdown(f'<span class="badge badge-pill badge-success">{n_pass} Passing</span>', unsafe_allow_html=True)

Iā€™d love the concept of themes or a cleaner way to style my streamlit apps.

Keep up the amazing work guys :heart:

1 Like
59

Linking to a post in the forum about specifying CSS in a div inside markdown for alignment.

I was rambling about injecting custom CSS and specifying a list of new CSS classes in an arg of st methods (if I can edit the markdown/write, what if I want to change the styling of the sidebar with st.sidebar.slider(...csslist=[".red", ".hide"]), or maybe expose a specific custom class per component (like .st-sidebar) to change in an external file.

I stumbled on @isaacā€™s hack, which I like a lot and will reuse :stuck_out_tongue: really a huge thanks for all those shared snippets !

Now Iā€™m going to look for a way to change that sidebar color :upside_down_face:.

4 Likes
60

For markup of raw text in NLP. Highlighting certain features, original spacing, etcā€¦
Streamlit formats the text which is nice but sometimes it is needed to see raw text and still use some custom formatting.

3 Likes
61

Itā€™d be great to be able to adjust the background.
E.g. Creating a moving background using HTML and CSS.

1 Like