<?xml version="1.0" encoding="UTF-8"?>
<rss  xmlns:atom="http://www.w3.org/2005/Atom" 
      xmlns:media="http://search.yahoo.com/mrss/" 
      xmlns:content="http://purl.org/rss/1.0/modules/content/" 
      xmlns:dc="http://purl.org/dc/elements/1.1/" 
      version="2.0">
<channel>
<title>Kaushik Sinha</title>
<link>https://kaushiksinha.com/</link>
<atom:link href="https://kaushiksinha.com/index.xml" rel="self" type="application/rss+xml"/>
<description>Notes on things I find interesting</description>
<generator>quarto-1.10.19</generator>
<lastBuildDate>Sat, 17 Oct 2026 00:00:00 GMT</lastBuildDate>
<item>
  <title>A First Experiment with marimo Studio and Quarto</title>
  <dc:creator>Kaushik Sinha</dc:creator>
  <link>https://kaushiksinha.com/posts/2026-10-17-marimo-studio-quarto/</link>
  <description><![CDATA[ 





<p>I am building a new home for my technical writing at <a href="https://kaushiksinha.com/">kaushiksinha.com</a>. I wanted the freedom of a notebook for exploration, but I also wanted the typography and structure of a proper article. That led me to an experiment with <a href="https://marimo.io/">marimo</a>, <a href="https://github.com/marimo-team/marimo-studio">marimo Studio</a>, and <a href="https://quarto.org/">Quarto</a>.</p>
<section id="the-idea" class="level2">
<h2 class="anchored" data-anchor-id="the-idea">The idea</h2>
<p>The notebook should own the computation, controls, and decisions. A published view should own the presentation.</p>
<p>The idea was simple:</p>
<ol type="1">
<li>Author the analysis in a marimo notebook.</li>
<li>Create a Studio view from the notebook.</li>
<li>Use Quarto to present the view as a polished document.</li>
</ol>
<p>To test the pipeline, I made a tiny notebook with a slider. The notebook computes the square of the selected number, and the Quarto view displays the result.</p>
</section>
<section id="the-first-obstacle" class="level2">
<h2 class="anchored" data-anchor-id="the-first-obstacle">The first obstacle</h2>
<p>The Quarto provider was available in the development version of marimo Studio, but installing that development package did not provide the browser assets needed by the Studio server. The editor started, but the browser returned an HTTP 500 because <code>build-meta.json</code> was missing.</p>
<p>The fix was to build Studio from its source repository. That required the JavaScript build toolchain in addition to the Python environment. The first build attempt used Node.js 26 and stopped because one of the frontend scripts still passed <code>--experimental-transform-types</code>, an option that Node 26 no longer accepts.</p>
<p>Fortunately, the source setup had also installed Node.js 24.19.0 in its Python environment. Running the build with that Node version produced the browser assets successfully.</p>
</section>
<section id="a-minimal-notebook" class="level2">
<h2 class="anchored" data-anchor-id="a-minimal-notebook">A minimal notebook</h2>
<p>The smallest useful test is a notebook with one control, one computation, and one displayed result:</p>
<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb1-1"><span class="im" style="color: #00769E;
background-color: null;
font-style: inherit;">import</span> marimo</span>
<span id="cb1-2"></span>
<span id="cb1-3">app <span class="op" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> marimo.App()</span>
<span id="cb1-4"></span>
<span id="cb1-5"></span>
<span id="cb1-6"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">@app.cell</span></span>
<span id="cb1-7"><span class="kw" style="color: #003B4F;
background-color: null;
font-weight: bold;
font-style: inherit;">def</span> _():</span>
<span id="cb1-8">    <span class="im" style="color: #00769E;
background-color: null;
font-style: inherit;">import</span> marimo <span class="im" style="color: #00769E;
background-color: null;
font-style: inherit;">as</span> mo</span>
<span id="cb1-9"></span>
<span id="cb1-10">    rounds <span class="op" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> mo.ui.slider(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">100</span>, value<span class="op" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span><span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">10</span>, label<span class="op" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Rounds"</span>)</span>
<span id="cb1-11">    rounds</span>
<span id="cb1-12">    <span class="cf" style="color: #003B4F;
background-color: null;
font-weight: bold;
font-style: inherit;">return</span> mo, rounds</span>
<span id="cb1-13"></span>
<span id="cb1-14"></span>
<span id="cb1-15"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">@app.cell</span></span>
<span id="cb1-16"><span class="kw" style="color: #003B4F;
background-color: null;
font-weight: bold;
font-style: inherit;">def</span> _(rounds):</span>
<span id="cb1-17">    total <span class="op" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">=</span> rounds.value<span class="op" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">**</span><span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span></span>
<span id="cb1-18">    <span class="cf" style="color: #003B4F;
background-color: null;
font-weight: bold;
font-style: inherit;">return</span> (total,)</span>
<span id="cb1-19"></span>
<span id="cb1-20"></span>
<span id="cb1-21"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">@app.cell</span></span>
<span id="cb1-22"><span class="kw" style="color: #003B4F;
background-color: null;
font-weight: bold;
font-style: inherit;">def</span> _(mo, rounds, total):</span>
<span id="cb1-23">    mo.md(<span class="ss" style="color: #20794D;
background-color: null;
font-style: inherit;">f"The square of **</span><span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">{</span>rounds<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">.</span>value<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">}</span><span class="ss" style="color: #20794D;
background-color: null;
font-style: inherit;">** is **</span><span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">{</span>total<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">}</span><span class="ss" style="color: #20794D;
background-color: null;
font-style: inherit;">**."</span>)</span>
<span id="cb1-24"></span>
<span id="cb1-25"></span>
<span id="cb1-26"><span class="cf" style="color: #003B4F;
background-color: null;
font-weight: bold;
font-style: inherit;">if</span> <span class="va" style="color: #111111;
background-color: null;
font-style: inherit;">__name__</span> <span class="op" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"__main__"</span>:</span>
<span id="cb1-27">    app.run()</span></code></pre></div></div>
<p>Moving the slider to 36 changed the Quarto view to:</p>
<blockquote class="blockquote">
<p>The square of 36 is 1296.</p>
</blockquote>
<p>This small example tested the complete path rather than just checking that the editor opened.</p>
</section>
<section id="reproduce-this-setup" class="level2">
<h2 class="anchored" data-anchor-id="reproduce-this-setup">Reproduce this setup</h2>
<p>The original experiment required a local Studio source checkout and a frontend build. That was useful for understanding the missing browser assets, but it is no longer the recommended setup.</p>
<p>The current project uses a pinned Studio preview wheel that includes both the Quarto provider and the browser assets. The current setup instructions are in the repository <code>README.md</code>. They require only <code>uv</code> and Quarto in addition to Python.</p>
<p>The preview wheel is still not a stable release, so its version should be revisited when marimo Studio publishes the Quarto provider through its normal release channel.</p>
</section>
<section id="what-i-learned" class="level2">
<h2 class="anchored" data-anchor-id="what-i-learned">What I learned</h2>
<p>The difficult part was not Quarto itself. Quarto was already installed and could render the document. The friction came from using an unreleased Studio provider and therefore needing to build Studio’s browser assets locally.</p>
<p>The experiment also clarified the boundary between the tools:</p>
<ul>
<li><strong>marimo</strong> owns the notebook and its reactive computation.</li>
<li><strong>Studio</strong> connects notebook results to named views.</li>
<li><strong>Quarto</strong> supplies the document structure and presentation.</li>
</ul>
<p>This may become easier as marimo Studio matures. For now, I am treating the setup as an experiment rather than a final installation recipe. What mattered to me was seeing that a control in a marimo notebook could drive a polished Quarto view.</p>
</section>
<section id="next-steps" class="level2">
<h2 class="anchored" data-anchor-id="next-steps">Next steps</h2>
<p>The prototype is now committed in the site repository and uses a pinned, portable Studio preview wheel. The <a href="https://nasheqlbrm.github.io/blog">old blog</a> will remain as an archive. Future writing will happen here.</p>


</section>

 ]]></description>
  <category>marimo</category>
  <category>quarto</category>
  <category>publishing</category>
  <guid>https://kaushiksinha.com/posts/2026-10-17-marimo-studio-quarto/</guid>
  <pubDate>Sat, 17 Oct 2026 00:00:00 GMT</pubDate>
</item>
</channel>
</rss>
