--- title: Widget Dag | daily.dev description: A walkthrough of embedding interactive Python notebooks as widget DAGs (directed acyclic graphs) in a static blog, using marimo, wigglystuff, and marimo-mdx.... canonical: https://daily.dev/posts/widget-dag-a0tkxctox twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Widget Dag | daily.dev og:description: A walkthrough of embedding interactive Python notebooks as widget DAGs (directed acyclic graphs) in a static blog, using marimo, wigglystuff, and marimo-mdx.... og:url: https://daily.dev/posts/widget-dag-a0tkxctox og:image: https://api.daily.dev/og/posts/a0TKXcTOX.png og:image:alt: Widget Dag og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Widget Dag **[Vincent D. Warmerdam](https://daily.dev/sources/koaning)** · 2 min read · 0 upvotes · 0 comments ## Summary A walkthrough of embedding interactive Python notebooks as widget DAGs (directed acyclic graphs) in a static blog, using marimo, wigglystuff, and marimo-mdx. The setup uses Pyodide/WASM to run Python in the browser, a Deno script to compile .mdx files with the marimo-mdx remark plugin, and uvx to fetch Deno without needing Node installed. The result is a live, reactive graph widget that tracks variable dependencies and renders hand-drawn digit convolution demos directly on a static site. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I convert a marimo .mdx notebook file into an HTML fragment without installing Node.js? Use uvx to fetch Deno, then run a small Deno script that imports the mdx-js evaluate function along with the marimo-mdx remark plugin and preact for rendering. The script reads the .mdx content from stdin and writes an HTML fragment to stdout, invoked as: cat post.mdx | uvx deno run -A --node-modules-dir=auto mdx_to_html.ts > post.html. Deno fetches the required npm packages automatically. _Developers building marimo-powered static sites can find WASM and tooling workflows like this on daily.dev._ ### What is a marimo WidgetDAG and how does it differ from mo.hstack? A WidgetDAG is a graph widget that embeds notebook variables and automatically determines the order in which they execute, similar to a mo.hstack call but with dependency tracking. It leverages marimo's internal variable-definition tracking to figure out which variables must exist before others, constructing a visual dependency graph rather than a simple stacked layout. _Those exploring interactive notebook tooling like marimo can track new widget patterns on daily.dev._ ## Similar posts on daily.dev - [Why I’m Making the Switch to marimo Notebooks](https://daily.dev/posts/why-i-m-making-the-switch-to-marimo-notebooks-6uldmguqp) · Towards Data Science · 0 upvotes · 0 comments - [Announcing the marimo plugin for PyCharm](https://daily.dev/posts/announcing-the-marimo-plugin-for-pycharm-gdfhp1vla) · Hacker News · 0 upvotes · 0 comments - [Build YOUR data dashboard — join my next 8-week HOPPy studio cohort](https://daily.dev/posts/build-your-data-dashboard-join-my-next-8-week-hoppy-studio-cohort-iv656081u) · Planet Python · 0 upvotes · 0 comments - [Run Real Python in Browsers With Pyodide and WebAssembly](https://daily.dev/posts/run-real-python-in-browsers-with-pyodide-and-webassembly-87j5vxcj6) · The New Stack · 1 upvotes · 0 comments --- Tags: [#python](https://daily.dev/tags/python), [#webassembly](https://daily.dev/tags/webassembly) [View this post on daily.dev](https://daily.dev/posts/widget-dag-a0tkxctox) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Widget Dag","url":"https://daily.dev/posts/widget-dag-a0tkxctox","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/widget-dag-a0tkxctox"},"datePublished":"2026-07-22T17:58:22.609Z","dateModified":"2026-09-14T08:33:15.143Z","description":"A walkthrough of embedding interactive Python notebooks as widget DAGs (directed acyclic graphs) in a static blog, using marimo, wigglystuff, and marimo-mdx....","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6b2858b77be71df8aca4421f8bc7ff77?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6b2858b77be71df8aca4421f8bc7ff77?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Vincent D. Warmerdam","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Vincent D. Warmerdam","logo":"https://media.daily.dev/image/upload/s--r1vuGNlQ--/f_auto/v1752592623/logos/koaning","url":"https://daily.dev/sources/koaning"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/widget-dag-a0tkxctox","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"python,webassembly","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Vincent D. Warmerdam","item":"https://daily.dev/sources/koaning"},{"@type":"ListItem","position":3,"name":"Widget Dag"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/widget-dag-a0tkxctox#faq","mainEntity":[{"@type":"Question","name":"How do I convert a marimo .mdx notebook file into an HTML fragment without installing Node.js?","acceptedAnswer":{"@type":"Answer","text":"Use uvx to fetch Deno, then run a small Deno script that imports the mdx-js evaluate function along with the marimo-mdx remark plugin and preact for rendering. The script reads the .mdx content from stdin and writes an HTML fragment to stdout, invoked as: cat post.mdx | uvx deno run -A --node-modules-dir=auto mdx_to_html.ts > post.html. Deno fetches the required npm packages automatically. Developers building marimo-powered static sites can find WASM and tooling workflows like this on daily.dev."}},{"@type":"Question","name":"What is a marimo WidgetDAG and how does it differ from mo.hstack?","acceptedAnswer":{"@type":"Answer","text":"A WidgetDAG is a graph widget that embeds notebook variables and automatically determines the order in which they execute, similar to a mo.hstack call but with dependency tracking. It leverages marimo's internal variable-definition tracking to figure out which variables must exist before others, constructing a visual dependency graph rather than a simple stacked layout. Those exploring interactive notebook tooling like marimo can track new widget patterns on daily.dev."}}]} ```