Comparing Dash and Streamlit

powers_in_dash.py

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

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

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

app.layout = html.Div([
    dcc.Input(
        id='num',
        type='number',
        value=5
    ),
    html.Table([
        html.Tr([html.Td(['x', html.Sup(2)]), html.Td(id='square')]),
        html.Tr([html.Td(['x', html.Sup(3)]), html.Td(id='cube')]),
        html.Tr([html.Td([2, html.Sup('x')]), html.Td(id='twos')]),
        html.Tr([html.Td([3, html.Sup('x')]), html.Td(id='threes')]),
        html.Tr([html.Td(['x', html.Sup('x')]), html.Td(id='x^x')]),
    ]),
])


@app.callback(
    [Output('square', 'children'),
     Output('cube', 'children'),
     Output('twos', 'children'),
     Output('threes', 'children'),
     Output('x^x', 'children')],
    [Input('num', 'value')])
def callback_a(x):
    return x**2, x**3, 2**x, 3**x, x**x


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

powers_in_streamlit.py

import streamlit as st

x = st.slider('Pick x', 1, 100, 5)
f"""
| Formula | Result |
|---------|--------|
|  $x^2$  | {x**2} |
|  $x^3$  | {x**3} |
|  $2^x$  | {2**x} |
|  $3^x$  | {3**x} |
|  $x^x$  | {x**x} |
"""

Just a comment: the Dash code is from the tutorial chapter that introduces multiple outputs, but it's not necessarily the best way to achieve the result. This code is closer to the Streamlit example:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate

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

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

app.layout = html.Div([
    dcc.Input(
        id='num',
        type='number',
        value=5
    ),
    dcc.Markdown(id='table', dangerously_allow_html=True)
])


@app.callback(
    Output('table', 'children'),
    [Input('num', 'value')]
)
def callback(x):
    if x is None:
        raise PreventUpdate
    return f"""
| Formula       | Result |
|---------------|--------|
| x<sup>2</sup> | {x**2} |
| x<sup>3</sup> | {x**3} |
| 2<sup>x</sup> | {2**x} |
| 3<sup>x</sup> | {3**x} |
| x<sup>x</sup> | {x**x} |
    """


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

Oh. So cool @jkseppan! Thanks for pointing this out! Also, so funny that the nearly identical functionality is called dangerously_allow_html. 😆

I'd imagine that's borrowed from react's dangerouslySetInnerHTML: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml , for the same reasons.