Get help from the marimo community

Updated last month

javascript within html

At a glance

The community member is trying to shift from Svelte to Python for their data visualisation course. They are using svg.py to create SVGs, but need to add tooltip functionality, which requires JavaScript. The community member has created a minimal HTML page with inline CSS and JavaScript, but the JavaScript does not seem to be running. A comment suggests that using an iframe might work instead of mo.Html.

We'd like to shift from svelte to mainly python for our data visualisation course. We use svg.py to create SVGs, but need to add tooltip functionality as well. To make that possible, we therefore need javascript to run.

Doing a test with a minimal html, it seems that the javascript is not run (i.e. nothing is printed on the console). Is that correct? And if so: is there a workaround?f

Here is the minimal code I try to run:
Plain Text
_html = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimal HTML Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a minimal HTML page with inline CSS and JavaScript.</p>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            alert("JavaScript is running!");
            console.log("JavaScript executed successfully.");
        });
    </script>
</body>
</html>
"""
mo.Html(_html)
J
1 comment
It seems that iframe works instead of mo.Html...
Add a reply
Sign up and join the conversation on Discord
\n\n\n\"\"\"\nmo.Html(_html)","url":"https://community.marimo.io//javascript-within-html-wTs5j0FH56Hz","identifier":"wTs5j0FH56Hz","publisher":{"@type":"Organization","name":"marimo","logo":{"@type":"ImageObject","url":"https://assets.usehall.com/org_01JDJKYVWQSJ3YGE2WXS6C4F17/6e34d90a-5df6-480a-833e-17f056b6e796.png"}},"comment":[{"@type":"Comment","text":"It seems that iframe works instead of mo.Html...","dateCreated":"2025-02-08T17:09:36.354Z","dateModified":"2025-02-08T17:09:36.354Z","author":{"@type":"Person","url":"https://community.marimo.io//members/e76818c6-a28f-4e32-accd-fac9e77e65c9","name":"Jan Aerts","identifier":"e76818c6-a28f-4e32-accd-fac9e77e65c9","image":"https://cdn.discordapp.com/avatars/710036775506018344/d71df06bf9ab03922b12c04481a950df.webp?size=256"},"commentCount":0,"comment":[],"position":1,"upvoteCount":0}],"author":{"@type":"Person","url":"https://community.marimo.io//members/e76818c6-a28f-4e32-accd-fac9e77e65c9","name":"Jan Aerts","identifier":"e76818c6-a28f-4e32-accd-fac9e77e65c9","image":"https://cdn.discordapp.com/avatars/710036775506018344/d71df06bf9ab03922b12c04481a950df.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]