Working observation / Web Craft

MDX Lets a Blog Post Become a Workshop

The reason we use MDX is simple: a post can explain, demonstrate, calculate, and teach without sending the reader elsewhere.

May 28, 20261 min readBy theProject.

Markdown is great for essays. MDX is better when the essay needs to teach by letting the reader touch the idea.

A repeatable MDX post structure

Live code belongs where it clarifies

Live field demoreact-ts

import * as React from 'react'

export default function CareWindow() {
const [hours, setHours] = React.useState(6)
return <main style={{fontFamily:'system-ui', padding:24}}> <h2>Monthly care window</h2><input aria-label='hours' type='range' min='1' max='20' value={hours} onChange={(event) => setHours(Number(event.target.value))} style={{width:'100%'}} /><p>{hours} protected hours for updates, checks, and small improvements.</p></main>
}

Open Sandbox

Component call

example.mdx

text

<SwatchBoard title="Post palette" items="Ink|#111113|Body copy and code surfaces;Signal|#e20074|Primary action and emphasis;Mint|#05f2af|Live demos and success states" />

A strong post should leave the reader with a working mental model, not just a paragraph they liked.

Rendering note...

Continue through the notebook

All Field Notes →

May 25, 2026

Design Systems for Tiny Teams

A tiny team does not need a 90-page design system. It needs repeatable decisions that keep every new page from starting over.

Jun 16, 2026

The One-Page Website That Still Works at 10pm

A focused small-business site should make the phone number, hours, and next action easy to use on a phone — including after everyone has gone home.

May 26, 2026

Local SEO Is Mostly Being Clear About Who You Help

For Hellertown, Bethlehem, Allentown, Easton, and the Lehigh Valley, useful local SEO starts with specific service language and proof.