HTML template

🎈 Using Streamlit
,
1

Can we use a Jinja HTML template in Streamlit, similar to how we use it in Flask and Django? or else is there any other way of custom styling the streamlit application

2

Streamlit can render html. So yes you can use jinja.

Example.

./template/template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    <div>
        <h1>{{ title }}</h1>
        <p>This is a simple Streamlit app with a Jinja2 template.</p>
        <ul>
            {% for item in items %}
                <li>{{ item }}</li>
            {% endfor %}
        </ul>
    </div>
</body>
</html>

streamlit_app.py

import streamlit.components.v1 as components
from jinja2 import Template

def main():
    # Your dynamic data
    app_title = "My Streamlit App"
    items = ["Item 1", "Item 2", "Item 3"]

    # Load the Jinja2 template
    with open("template/template.html", "r") as template_file:
        template_content = template_file.read()
        jinja_template = Template(template_content)

    # Render the template with dynamic data
    rendered_html = jinja_template.render(title=app_title, items=items)

    # Display the HTML in Streamlit app
    components.html(rendered_html, height=200, scrolling=True)

if __name__ == '__main__':
    main()

image

2 Likes
3

image
image1850×974 18.5 KB

Hi @ferdy , thank you for your response. I am currently able to render the HTML template only as an iframe, but my intention is to fully design the Streamlit application using HTML and CSS. Is that possible?"

4

What do you plan to build?

5

I am planning to build a data app and am considering implementing HTML and CSS for the design, similar to how we create HTML templates for designing entire pages in Django. I am curious about how to apply this concept to a Streamlit application so that I can incorporate my own custom designs to the entire page. Is it possible to customise the entire page on streamlit or else we have only option to create a custom component using html and add it to the streamlit application as a custom component iframe

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.