How do i get Typed.js to work in a python Dash application?

Question

I'm trying to have the Typed.js packages to work in a Dash application. With Typed.js the text and a page gets written dynamically using a certain list of words. Minimal code example:

import dash
from dash import html

# import grasia_dash_components as gdc
# import dash_defer_js_import as dji

external_scripts = [
    'https://unpkg.com/[email protected]/dist/typed.umd.js',
    ]

app = dash.Dash(__name__, external_scripts=external_scripts)
app.layout = html.Div(
    [
        html.H1(["Hello, ",html.Span("Dash", className="mov", id="mov"),"!"]),
    ]
)

# app.layout.children.append(gdc.Import(src="./20_typed.js"))
app.layout.children.append(dash.html.Script("""
    var typed = new Typed("#mov", {
        strings: ["for one", "for two", "for three"],
        typeSpeed: 150,
        backSpeed: 150,
        loop: true
    });
"""))

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

I tried several options but to not success:

1. Via dash.html.Script
2. Via a js file in the assets folder (same javascript as in the code in the assets folder)
3. Via grasia packages (20_typed.js in root folder and same javascript as in the code code)

In the code example option 3 is commented out to show you what i did (also with dji didn't get it to work).

Answer 1

You could use a client side callback

from dash import Dash, html                                                                               
from dash.dependencies import Output, Input                                                               
                                                                                                          
app = Dash(__name__, external_scripts=["https://unpkg.com/[email protected]/dist/typed.umd.js"])            
                                                                                                          
app.layout = html.Span(id="element")                                                                      
                                                                                                          
app.clientside_callback(                                                                                  
    """                                                                                                   
    function(input) {                                                                  
        var typed = new Typed('#element', {                                                               
          strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],                                
          typeSpeed: 50,                                                                                  
        });                                                                                               
        return window.dash_clientside.no_update                                                           
    }                                                                                                     
    """,                                                                                                  
    Output('element', 'children'),                                                                        
    Input('element', 'children')                                                                          
)                                                                                                         
                                                                                                          
if __name__ == '__main__':                                                                                
    app.run_server(debug=True)