Rural Peds
Blog
← Back to Blog

Embedding Clinical Tools Directly in Articles

Timothy Hartzog, MD||6 min readMDX
mdxcomponentsshowcaseauthoring
Save offline
Part 2 of 2
Series: Building the Blog Platform
View series →

Why Embed?

The blog platform now supports inline embedding of the platform's clinical tools. Instead of linking out and breaking the reader's flow, you can drop a full decision tree or calculator directly into the article.

*Tip

Every component on this page is rendered inline. Reading progress, table of contents, and related-article suggestions are wired up automatically.

Charts Without a JS Library

Lightweight bar and line charts render as static SVG — no Chart.js, no Plotly, no client-side JavaScript at all. Pass data as a JSON string via the dataJson prop:

Pediatric ED Visits by Acuity Level (per 1000)010220430640851012L148L2340L3510L490L5Acuity LevelVisits
Sample Trend Line09.418.828.237.647JanFebMarAprMayJunMonthCases

Math Without KaTeX

For simple formulas, the MathBlock component renders readable equations using semantic HTML — no MathJax bundle:

Rate (mL/hr) = 4 · kg(first 10) + 2 · kg(next 10) + 1 · kg(over 20)

(Fluid maintenance, 4-2-1 rule)

CI = CO / BSA = HR · SV / BSA

(Cardiac index)

Inline Decision Tree

Embed an existing decision tree from the platform — readers can interact with it right inside the article:

Decision Tree

Neonatal Hyperbilirubinemia (AAP 2022)

Phototherapy and exchange-transfusion thresholds for ≥35-week newborns.

Open tree →

Inline Calculator

Same for calculators — reference patient context flows through naturally:

Clinical Calculator

Drug Dosing

Weight-based pediatric resuscitation drug dosing (NRP / PALS).

Open calculator →

When to Use Each Format

📝

MDX articles

Use for posts with prose, code samples, callouts, and inline embeds. Get TOC, reading progress, and SEO metadata automatically.

🎨

HTML articles

Use for posts that need full custom JavaScript visualizations, complex interactive widgets, or D3-style data exploration. Runs in a sandboxed iframe.

📊

Charts component

Use for static summary data inside MDX. Renders as SVG — zero client JS, works in RSS readers and email previews.

🧮

DataPlayground

Use when readers should explore their own data. WASM-powered descriptive stats, histograms, and normalization run locally.

Try the Playground

Reader Engagement Playground

Drop in any numeric data to see live WASM-powered analysis.

Rust WASM

Enter data and click a computation button to see results.

Author Tools

# Scaffold a new post (HTML or MDX)
npm run blog:new

# Validate all posts before commit
npm run blog:validate

# Preview locally
npm run dev
+Note

The blog:validate script checks slug formatting, required metadata fields, date format, broken internal links, and content file presence. Run it in CI to prevent bad commits.

ShareXBlueskyMastodonLinkedInEmail

Get new articles by email.

Powered by mailto. Your address is never sold or shared.

Discussion

Comments are powered by Giscus via GitHub Discussions. Set NEXT_PUBLIC_GISCUS_* environment variables to enable them.