How to enable Full-Screen option for element rendered through components.html?

I’m using a st.pydeck object but because of existing confirmed bugs the performance is poor and I’m looking into rendering the component through components.html (streamlit.components.v1)


import streamlit as st
import streamlit.components.v1 as components
import pydeck as pdk
r2 = pdk.Deck(...)
components.html(r2.to_html(as_string=True), height=600)

This somewhat works but I’m trying to figure out how to enable fullscreen, specially the arrow icons ↖↘ that appear when you hover over a streamlit element that allow you to full-screen it.

I see this related issue but I can’t quite figure it out:

Also a similar thread here: Fullscreen mode for components.html() or components.iframe()

Hey @kee,

Sharing my comment from the GitHub Issue here as well:

While we don’t prevent st.html components from calling Element.requestFullscreen() (which you can read more about here), we also don’t automatically add a fullscreen button overlay on the st.html component.

As a result, to have a fullscreen option display, you would need to do the following:

  1. The code that you pass to st.html would need to make a call to the Element.requestFullscreen() API.
  2. If you want a button to appear to allow users to select the fullscreen option, you’d need to implement it with HTML + JS in the code passed to st.html.

(copied from github thread you replied to)

@Caroline - to confirm would this enable the native streamlit fullscreen ↖↘ icon (top right of the element in question to appear). Are there any examples you could share of how this could work? In my use case I’m rending a pydeck chart into the component as follows

pydeck_element = '...'
components.html(pydeck_element.to_html(as_string=True), height=800)

Looking at a simplified version of what the pydeck_element.to_html(...) yields:

<!DOCTYPE html>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script src=""></script>
        <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="" />
    <script src=''></script>
    body {
  margin: 0;
  padding: 0;
  overflow: hidden;

#deck-container {
  width: 100vw;
  height: 100vh;

#deck-container canvas {
  z-index: 1;
  background: none;
    <div id="deck-container">
    const container = document.getElementById('deck-container');
    const jsonInput = {
  "initialViewState": {
    "bearing": 0,
    "latitude": 38.028549,
    "longitude": -120.181034,
    "maxZoom": 16,
    "pitch": 45,
    "zoom": 5
"layers": [
  // ...
  "mapProvider": "carto",
  "mapStyle": "",
  "mapboxKey": "",
  "views": [
      "@@type": "MapView",
      "controller": true
    const tooltip = true;
    const customLibraries = null;
    const configuration = null;

    const deckInstance = createDeck({


What would need to be added exactly and where in this HTML to achieve the full-screen icon to appear? Want to make sure I’m understanding things correctly, so if I need to modify this HTML in memory I can replace / inject what I need correctly.