article Sandbox Magic: Turn Your Databricks Notebooks into Living Documents and Presentations in Technical Blog

Sandbox Magic: Turn Your Databricks Notebooks into Living Documents and Presentations

jeffreyaven — Thu, 02 Apr 2026 15:29:29 GMT

Stop switching between notebooks and slide decks. Sandbox Magic is an open-source collection of copy-paste-ready HTML/CSS/JS patterns that turn Databricks markdown cells into polished, interactive content - architecture diagrams, styled callouts, flip cards, and more. No cluster required.

Re: Sandbox Magic: Turn Your Databricks Notebooks into Living Documents and Presentations

tbence — Thu, 02 Apr 2026 19:13:54 GMT

This looks amazing, thank you for sharing! I particularly like the admonitions, they are really useful to highlight key ideas.

Re: Sandbox Magic: Turn Your Databricks Notebooks into Living Documents and Presentations

v2ai-joshpeak — Fri, 03 Apr 2026 10:30:51 GMT

Huge fan of Mermaid diagrams. 🙌

decoupling the semantics of a diagrams from the pixel pushing is always a win.

great post.

Re: Sandbox Magic: Turn Your Databricks Notebooks into Living Documents and Presentations

Benedek_Kiss — Wed, 08 Apr 2026 09:08:24 GMT

Thank you for sharing @jeffreyaven.

This gives a great improvement, especially when you'd like to explain something through notebooks. Good for training material or internal presentations.

Let's also call out that, given these examples, using AI-assisted code development, I think the possibilities are practically endless and easy to extend.

Re: Sandbox Magic: Turn Your Databricks Notebooks into Living Documents and Presentations

JohnOlds — Tue, 28 Apr 2026 16:21:49 GMT

I love this, but it is not dark mode friendly. I even tried to get Genie to find a workaround. Has anyone found a way to have it display correctly when this is enabled?

Summary of what we learned:

Databricks %md-sandbox in dark mode applies an automatic color transformation at a level external to the cell content. We tested 5 approaches and none could override it:

@media (prefers-color-scheme: dark) — doesn't fire
light-dark() CSS function — not supported
JavaScript DOM manipulation — <script> tags appear stripped/non-functional
CSS filter property — blocked on inline styles
Pre-compensated color math — no effect (confirming scripts don't execute)

Re: Sandbox Magic: Turn Your Databricks Notebooks into Living Documents and Presentations

jeffreyaven — Tue, 28 Apr 2026 21:18:39 GMT

Thanks for the feedback and reply!

Good news: there's a workaround, but first the why.

Each %md-sandbox cell renders inside a cross-origin iframe (databricksusercontent.com ) it is deliberately isolated from the workspace DOM for safety. The dark mode "transformation" you're seeing isn't styling - it is a filter applied to the iframe element itself by the parent workspace, via a --invert-filter CSS variable the iframe can't read.

This is based upon the Light/Dark Mode Toggle Example in https://github.com/stackql-labs/sandbox-magic/blob/main/04 - Codeblocks.ipynb

%md-sandbox <div class="admonition" data-type="info" data-title="Information" data-body="This is an informational message..."> </div> <script> (function() { var palettes = { info: { light: { border:'#1976d2', bg:'#e3f2fd', title:'#0d47a1', body:'#333', icon:'#1976d2' }, dark: { border:'#e6892d', bg:'#1c0d02', title:'#f2b85e', body:'#ccc', icon:'#e6892d' } } }; document.querySelectorAll('.admonition').forEach(function(block) { if (block.dataset.processed) return; block.dataset.processed = '1'; var type = block.dataset.type, title = block.dataset.title, body = block.dataset.body; var mode = 'light'; function render() { var p = palettes[type][mode]; block.innerHTML = '<div style="position:relative; border-left:4px solid '+p.border+ '; background:'+p.bg+'; padding:16px 20px; padding-right:80px;'+ ' border-radius:4px; margin:16px 0; font-family:sans-serif;">'+ '<button class="adm-toggle" style="position:absolute; top:8px; right:8px;'+ ' padding:4px 10px; font-size:11px; background:#7f7f7f; color:#fff;'+ ' border:1px solid #7f7f7f; border-radius:4px; cursor:pointer;">'+ (mode==='light' ? '🌙 Dark' : '☀ Light')+'</button>'+ '<div style="display:flex; gap:12px;">'+ '<span style="font-size:22px; font-weight:bold; color:'+p.icon+';">i</span>'+ '<div>'+ '<strong style="color:'+p.title+'; font-size:1.1em;">'+title+'</strong>'+ '<p style="margin:8px 0 0 0; color:'+p.body+';">'+body+'</p>'+ '</div>'+ '</div>'+ '</div>'; block.querySelector('.adm-toggle').onclick = function() { mode = (mode==='light') ? 'dark' : 'light'; render(); }; } render(); }); })(); </script>

Not perfect (still manual), but at least it's deterministic.

Re: Sandbox Magic: Turn Your Databricks Notebooks into Living Documents and Presentations

JohnOlds — Wed, 29 Apr 2026 14:09:08 GMT

Interesting and thank you for this. Hopefully this prompts a change in the md-sandbox to handle the light/dark transition automatically. There are a LOT of us that use the dark mode. 😁

Re: Sandbox Magic: Turn Your Databricks Notebooks into Living Documents and Presentations

JohnOlds — Wed, 06 May 2026 20:19:35 GMT

I took what you shared and made a modification for a single script to create any of the boxes. There was a bit of Genie interaction, but the result is pretty nice. Maybe it will be helpful to someone else. I may look into find a way to make it a shared js to utilize.

%md-sandbox ## All 8 Types (single cell, single script) <div class="admonition" data-type="info" data-title="Information" data-body="Use for general information, tips, or additional context."></div> <div class="admonition" data-type="note" data-title="Note" data-body="Use for notes or remarks that should stand out."></div> <div class="admonition" data-type="warning" data-title="Warning" data-body="Use for warnings or important cautions."></div> <div class="admonition" data-type="error" data-title="Error" data-body="Use for errors, critical issues, or things to avoid."></div> <div class="admonition" data-type="success" data-title="Success" data-body="Use for confirmations, best practices, or things working correctly."></div> <div class="admonition" data-type="tip" data-title="Tip" data-body="Use for helpful suggestions or pro-tips."></div> <div class="admonition" data-type="config" data-title="Configuration" data-body="Use for technical settings or system requirements."></div> <div class="admonition" data-type="goal" data-title="Goal" data-body="Use for objectives, targets, or key outcomes."></div> <script> (function() { var palettes = { info: { light:{border:'#1976d2',bg:'#e3f2fd',title:'#0d47a1',body:'#333',icon:'#1976d2'}, dark:{border:'#e6892d',bg:'#1c0d02',title:'#f2b85e',body:'#ccc',icon:'#e6892d'} }, note: { light:{border:'#7b1fa2',bg:'#f3e5f5',title:'#4a148c',body:'#333',icon:'#7b1fa2'}, dark:{border:'#84e05d',bg:'#0c1a0a',title:'#b5eb73',body:'#ccc',icon:'#84e05d'} }, warning: { light:{border:'#ff9800',bg:'#fff3e0',title:'#e65100',body:'#333',icon:'#ff9800'}, dark:{border:'#0067ff',bg:'#000c1f',title:'#19aeff',body:'#ccc',icon:'#0067ff'} }, error: { light:{border:'#f44336',bg:'#ffebee',title:'#c62828',body:'#333',icon:'#f44336'}, dark:{border:'#0bbcc9',bg:'#001411',title:'#39d7d7',body:'#ccc',icon:'#0bbcc9'} }, success: { light:{border:'#4caf50',bg:'#e8f5e9',title:'#2e7d32',body:'#333',icon:'#4caf50'}, dark:{border:'#b350af',bg:'#170a16',title:'#d182cd',body:'#ccc',icon:'#b350af'} }, tip: { light:{border:'#009688',bg:'#e0f2f1',title:'#00695c',body:'#333',icon:'#009688'}, dark:{border:'#ff6977',bg:'#1f0d0e',title:'#ff96a3',body:'#ccc',icon:'#ff6977'} }, config: { light:{border:'#607d8b',bg:'#eceff1',title:'#37474f',body:'#333',icon:'#607d8b'}, dark:{border:'#9f8274',bg:'#13100e',title:'#c8b8b0',body:'#ccc',icon:'#9f8274'} }, goal: { light:{border:'#ffc107',bg:'#fffde7',title:'#ff8f00',body:'#333',icon:'#ffc107'}, dark:{border:'#003ef8',bg:'#000218',title:'#0070ff',body:'#ccc',icon:'#003ef8'} } }; var icons = { info:'i', note:'\u270E', warning:'\u26A0', error:'\u2716', success:'\u2714', tip:'\u2731', config:'\u2699', goal:'\u25CE' }; document.querySelectorAll('.admonition').forEach(function(block) { if (block.dataset.processed) return; block.dataset.processed = '1'; var type = block.dataset.type, title = block.dataset.title, body = block.dataset.body; var mode = 'light'; function render() { var p = palettes[type][mode]; block.innerHTML = '<div style="position:relative; border-left:4px solid '+p.border+ '; background:'+p.bg+'; padding:16px 20px; padding-right:80px;'+ ' border-radius:4px; margin:16px 0; font-family:sans-serif;">'+ '<button class="adm-toggle" style="position:absolute; top:8px; right:8px;'+ ' padding:4px 10px; font-size:11px; background:#7f7f7f; color:#fff;'+ ' border:1px solid #7f7f7f; border-radius:4px; cursor:pointer;">'+ (mode==='light' ? '\ud83c\udf19 Dark' : '\u2600 Light')+'</button>'+ '<div style="display:flex; gap:12px;">'+ '<span style="font-size:22px; font-weight:bold; color:'+p.icon+';">'+icons[type]+'</span>'+ '<div>'+ '<strong style="color:'+p.title+'; font-size:1.1em;">'+title+'</strong>'+ '<p style="margin:8px 0 0 0; color:'+p.body+';">'+body+'</p>'+ '</div>'+ '</div>'+ '</div>'; block.querySelector('.adm-toggle').onclick = function() { mode = (mode==='light') ? 'dark' : 'light'; render(); }; } render(); }); })(); </script>

Re: Sandbox Magic: Turn Your Databricks Notebooks into Living Documents and Presentations

jeffreyaven — Wed, 06 May 2026 21:10:51 GMT

Nice! good idea about a shared scripts location, this could be done with any CDN, Cloudflare, Cloudfront etc, simplifies the code in each cell, which could have to be repeated multiple times in a given notebook, this would need to be community driven as Databricks wouldn't be able to certify all of the content