# Standalone HTML file with static plots and text

**URL:** <https://community.plotly.com/t/standalone-html-file-with-static-plots-and-text/48695>\
**Category:** Dash Python\
**Created:** [January 5, 2021, 1:04pm UTC](https://community.plotly.com/t/standalone-html-file-with-static-plots-and-text/48695 "2021-01-05T13:04:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![aoid789aygso](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@aoid789aygso](https://community.plotly.com/u/aoid789aygso)\
**Post date:** [January 5, 2021, 1:04pm UTC](https://community.plotly.com/t/standalone-html-file-with-static-plots-and-text/48695/1 "2021-01-05T13:04:11Z")

</div>

I usually do plots with Plotly and save them as standalone HTML files, which is extremely convenient for sharing them with colleagues and to “freeze” the data that is being displayed. [This](https://htmlpreview.github.io/?https://github.com/SengerM/html-github-hosting/blob/main/201120%2037th%20RD50%20Workshop/Signal%2001191-B.html) is an example I made with

```Python
plotly.offline.plot(
    plotly_plot, 
    filename = 'standalone great plot.html',
)

```

Now I want to do the same with a very simple Dash app that has no server-side requirements at all, it is just a bunch of Plotly figures and some text. How can I do this?

## Example of what I want

Consider the first example that is shown in [this tutorial](https://dash.plotly.com/layout), which I copy-paste here for easiness:

```auto
# -*- coding: utf-8 -*-

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == ' __main__':
    app.run_server(debug=True)

```

When I run this with Python and then open [http://127.0.0.1:8050/](http://127.0.0.1:8050/) in my browser I see this:

[![enter image description here](https://i.stack.imgur.com/az70l.png)](https://i.stack.imgur.com/az70l.png)

so as can be seen this is basically a single Plotly figure with some text. So it **must be somehow possible to produce the standalone HTML file** with this content.

I want to replicate the behavior of `plotly.offline.plot` with this. How can I do it? I have tried to do “File → Save Page As” in my web browser but the resulting HTML fails to display because the server (the Python `app.py` file) is not running.

---

<div class="post-metadata">

**Author:** ![JasenM](https://avatars.discourse-cdn.com/v4/letter/j/df705f/32.png) [@JasenM](https://community.plotly.com/u/JasenM)\
**Post date:** [February 12, 2021, 7:24pm UTC](https://community.plotly.com/t/standalone-html-file-with-static-plots-and-text/48695/2 "2021-02-12T19:24:39Z")

</div>

Currently, when the dash client comes up, one of the first things it does is to fetch the application definition and then the component wiring (aka dependencies) from the server. There’s no way around this. I’ve proposed that the client look locally first for this content and then hit the server thus enabling exactly your desired capability to embed it all into one file (kinda). Here’s my proposal:

> [@Feature Request: HTML Embedded layout and dependency lookup for standalone HTML Dash Reports](https://community.plotly.com/t/feature-request-html-embedded-layout-and-dependency-lookup-for-standalone-html-dash-reports/49149/2):
>
> Standalone HTML Report Examples Here’s a zip with the examples I’ll talk about plus all related support files: [staging/stock\_demo.zip at main · jwminton/staging · GitHub](https://github.com/jwminton/staging/blob/main/stock_demo.zip) I’ll try to highlight the important differences going from a simple save to the proposed dash standalone report. The examples use and cache public stock data. Its a little over the top but it stays the same across all examples and gives a nice rich sample to work from. I’ll go over the important changes from one example to the…
