Streamlit Embed Code

0.1.2 · maintenance · verified Thu Apr 16

streamlit-embedcode is a Streamlit custom component that simplifies embedding code snippets from various popular services, including GitHub Gist, GitLab Snippets, Pastebin, CodePen, Ideone, and TagMyCode, directly into Streamlit applications. The library is currently at version 0.1.2. It has an infrequent release cadence, with the last update in May 2021, suggesting a stable and mature, albeit not actively feature-developed, component.

Common errors

```
Embedded content not appearing, showing a blank space, or 'refused to connect' errors in the browser console.
```
cause Browser security features, such as third-party cookie blocking or stricter iframe embedding policies, are preventing the external content from loading within the Streamlit app's iframe.

fix Instruct users to check their browser settings and potentially allow third-party cookies or loosen site isolation settings for the domain hosting the embedded content. Some issues might be resolved by Streamlit itself in newer versions if related to its iframe handling.
```
ModuleNotFoundError: No module named 'streamlit_embedcode' or ImportError: cannot import name 'github_gist' from 'streamlit_embedcode'
```
cause The `streamlit-embedcode` library is either not installed or there's a typo in the import statement, or a specific service function is misspelled.

fix Ensure the library is installed with `pip install streamlit-embedcode`. Verify the import statement is `from streamlit_embedcode import [service_function]`, e.g., `from streamlit_embedcode import github_gist`. Check for typos in function names.
```
Streamlit app not updating embedded code content or parameters after code changes, even after refreshing the browser.
```
cause Streamlit's caching mechanisms or file watcher issues might be preventing the application from detecting changes in the source code or configuration, leading to an old version of the component being rendered.

fix Manually stop and restart the Streamlit application from the terminal (`Ctrl+C`, then `streamlit run your_app.py`). Clear your browser's cache, or try a hard refresh (`Ctrl+Shift+R` or `Cmd+Shift+R`). Ensure `watchdog` is installed (`pip install watchdog`) and Streamlit's `fileWatcherType` configuration is set correctly (e.g., `[server] fileWatcherType = "watchdog"`).

Warnings

gotcha Embedded content (iframes) can be affected by browser security settings, particularly third-party cookie blocking. Users with strict browser settings may see blank spaces instead of the embedded code.
Fix: Users may need to adjust their browser's security settings to allow third-party cookies or site data for the embedded content to display correctly.
gotcha The component relies on external code-sharing services. If a service (e.g., GitHub Gist, CodePen) changes its embedding policy, API, or experiences downtime, the corresponding `streamlit-embedcode` function might stop working or display incorrectly.
Fix: Monitor the stability and embedding policies of the target code-sharing service. Consider providing alternative methods or direct code display using `st.code` as a fallback.
gotcha Streamlit's execution model reruns the entire script from top to bottom on every user interaction. If the URLs or parameters passed to `streamlit-embedcode` functions are derived from interactive widgets, ensure proper state management (e.g., using `st.session_state`) to prevent unintended resets or content flickering.
Fix: Familiarize yourself with Streamlit's execution model and use `st.session_state` to persist values that should not reset on reruns.

Install

pip install streamlit-embedcode Install with pip

Imports

github_gist
wrong:
```
import streamlit_embedcode.github_gist
```
correct:
```
from streamlit_embedcode import github_gist
```
The functions for each service are directly importable from the top-level package.
gitlab_snippet
```
from streamlit_embedcode import gitlab_snippet
```
Similar import pattern for other services like `codepen`, `pastebin`, etc.

Quickstart

This quickstart demonstrates how to embed a GitHub Gist into a Streamlit application using the `github_gist` function. The example also shows how to set optional parameters for the embedded content.

import streamlit as st
from streamlit_embedcode import github_gist

st.set_page_config(layout='wide', page_title='Streamlit EmbedCode Example')

st.title('Streamlit EmbedCode Example')
st.write(
    'This app demonstrates embedding various code snippets using `streamlit-embedcode`.'
)

# Example GitHub Gist
st.subheader('GitHub Gist Example')
github_gist('https://gist.github.com/randyzwitch/be8c5e9fb5b8e7b046afebcac12e5087/')

st.caption('Optionally, you can provide arguments for height, width, and scrolling.')
st.code("""
import streamlit as st
from streamlit_embedcode import github_gist

st.title('My App')
github_gist('https://gist.github.com/randyzwitch/be8c5e9fb5b8e7b046afebcac12e5087/')
""")

view raw JSON →