A Gentle Start to Writing in MDX

Writing in MDX is just like writing in regular Markdown, but with the ability to drop in React components or richer UI elements whenever I need to. Here’s a quick tour of how I plan and publish a post.

Structuring the Story

• Start with a clear headline and an optional intro paragraph.
• Use short sections with meaningful sub-headings.
• Sprinkle in lists, quotes, and tables to keep the flow interesting.

Highlighting Ideas

“Good writing is clear thinking made visible.”

— William Zinsser

This blockquote uses the style we defined in mdx-components.tsx, so it inherits the warm indentation and italic tone automatically.

Sharing Experiments

Inline code like const mood = "warm" fits naturally in a sentence, and longer snippets can go inside a fenced block:

type StudioNote = {
  mood: "warm" | "cool";
  idea: string;
};

const notes: StudioNote[] = [
  { mood: "warm", idea: "Pair handwriting-inspired headings with Inter body text." },
  { mood: "cool", idea: "Use gradients sparingly—focus on typography first." },
];

export function summarize(notes: StudioNote[]) {
  return notes.map((note) => `• (${note.mood}) ${note.idea}`).join("\n");
}

Referencing Resources

• Anchors like jumping to the top remain consistent.

Capturing Research Quickly

Over time i learned to caputre information quickly in different notes apps and tools, to gather ideas for future blog posts. While experimenting with different tools, i found that apple notes serves me the best, since it natively supports markdown exports.

Here is an example of a table in mdx:

Tool	Usage	Notes
Apple Notes	Quick notes & research	Native markdown export
Obsidian	Long-form research	Syncs nicely with markdown

Wrapping Up

MDX lets me write in a friendly, human voice while still embedding code, references, and structured data. The styles we configured do the heavy lifting: I just focus on words. When I’m ready for more posts, I duplicate this folder, adjust the frontmatter, and hit deploy. 🧡