# Unable to load .html file in streamlit app

**URL:** <https://discuss.streamlit.io/t/unable-to-load-html-file-in-streamlit-app/40186>\
**Category:** Using Streamlit\
**Created:** [March 27, 2023, 3:16pm UTC](https://discuss.streamlit.io/t/unable-to-load-html-file-in-streamlit-app/40186 "2023-03-27T15:16:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gabriel21](https://avatars.discourse-cdn.com/v4/letter/g/9f8e36/32.png) [@Gabriel21](https://discuss.streamlit.io/u/Gabriel21)\
**Post date:** [March 27, 2023, 3:16pm UTC](https://discuss.streamlit.io/t/unable-to-load-html-file-in-streamlit-app/40186/1 "2023-03-27T15:16:54Z")

</div>

I am generating a deepchecks report to visualize data drift. I am trying to load the .html file in a streamlit application, but Its not loading on the page.

**Code snippet:**

```auto
import streamlit as st

#Read the HTML file
with open("deepchecks_file.html", "r") as f: ##deepchecks: result.save_as_html("deepchecks_file")
    html_data = f.read()

st.header("Deepchecks")
st.components.v1.html(html_data)

```

When i run the code above, i get the following result:

 ![image](https://global.discourse-cdn.com/streamlit/original/3X/c/4/c490c01f505bb9f56c06c6616c9214c7b6cd9336.png)

The deepchecks report does not load and i keep getting this blank page with no error message. Any tips on how to solve it? Thanks!

---

<div class="post-metadata">

**Author:** ![tonykip](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/tonykip/32/45167_2.png) [@tonykip](https://discuss.streamlit.io/u/tonykip)\
**Post date:** [March 27, 2023, 6:10pm UTC](https://discuss.streamlit.io/t/unable-to-load-html-file-in-streamlit-app/40186/2 "2023-03-27T18:10:17Z")

</div>

Hi @Gabriel21,

Thanks for posting! Not sure why your get is not rendering but you could double-check your HTML code and make sure it’s not causing ay rendering issues.

Here’s an example I used with your code:

### `example_page.html`

```auto
<!DOCTYPE html>
<html>
<head>
	<title>Example HTML Page</title>
</head>
<body>
	<h1>Welcome to my HTML page</h1>
	<p>This is an example paragraph of text.</p>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>
</body>
</html>

```

### `app.py`

```auto
import streamlit as st

# Read the HTML file
with open("example_page.html", "r") as f:
    html_data = f.read()

st.header("Deepchecks")

st.write('---')

st.subheader('Using st.markdown')
st.code('''st.markdown(html_data, unsafe_allow_html=True)''', language='python')
st.markdown(html_data, unsafe_allow_html=True)

st.write('---')

st.subheader('Using st.markdown with iframe')
st.code('''st.markdown(f'<iframe srcdoc="{html_data}" width="1000" height="600"></iframe>', unsafe_allow_html=True)''', language='python')
st.markdown(f'<iframe srcdoc="{html_data}" width="1000" height="600"></iframe>', unsafe_allow_html=True)

st.write('---')

st.subheader('Using components.v1.html')
st.code('''st.components.v1.html(html_data)''', language='python')
st.components.v1.html(html_data)

```

### Output

![streamlit-app-2023-03-27-14-03-94](https://global.discourse-cdn.com/streamlit/original/3X/e/0/e0efc7758067b69305623ce14887043d0ffcaa58.gif)

Let me know if any of these solves the issue.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/streamlit/original/3X/c/f/cf4c2ee0d938358f82448c5fe4b9c3c91d7ce19c.svg) [@system](https://discuss.streamlit.io/u/system)\
**Post date:** [March 26, 2024, 6:11pm UTC](https://discuss.streamlit.io/t/unable-to-load-html-file-in-streamlit-app/40186/3 "2024-03-26T18:11:17Z")

</div>

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