MDX UI Stress Test — Images, Video, Code & Embeds

MDX UI Stress Test#

This article tests how ServerSideStory renders different types of content. Check the layout on desktop, tablet, and mobile, including light and dark themes.

Test goals: readable typography, responsive media, code overflow handling, accessible links, consistent spacing, and no horizontal page overflow.

Testing note: This is a demo article. The media and code examples are for UI testing, not production instructions.

1. Typography and text formatting#

This paragraph tests normal body text, bold text, italic text, strikethrough, and inline code. Here is a link to Next.js documentation and another to the MDX documentation.

A third-level heading#

The article body should remain readable and have comfortable line height. Long paragraphs should wrap naturally without exceeding the article container.

A fourth-level heading#

Use this heading to check the spacing between nested sections and paragraphs.

2. Local image#

Place a real image at public/images/mdx-test-architecture.png before using this example.

Figure 1: Local image rendering and caption spacing.

Check the image's width, alignment, border radius, and behavior on small screens. If the file does not exist, a broken image is expected.

3. Remote CDN image#

Figure 2: Remote image loaded from an external image CDN.

Verify that the image loads, scales to the article width, and does not cause horizontal overflow. If you use Next.js Image for remote images, configure the permitted hostname in next.config.ts.

4. Animated GIF#

Figure 3: Animated GIF test.

Check whether the animation plays and whether its dimensions fit the article layout. If the external GIF URL is unavailable, replace it with a working GIF or use public/images/mdx-test.gif.

5. Video embed#

The following uses a standard JSX iframe. It should work only if your MDX pipeline permits intrinsic iframe elements and your browser's content security policy allows YouTube embeds.

Check the aspect ratio, mobile sizing, and spacing above and below the player. If your MDX component mapping replaces or blocks iframes, use a dedicated video component instead.

6. Code blocks#

TypeScript example#

type Subscription = {
  id: string;
  plan: "starter" | "pro" | "enterprise";
  active: boolean;
};

const subscription: Subscription = {
  id: "sub_demo_001",
  plan: "pro",
  active: true,
};

function isSubscriptionActive(value: Subscription): boolean {
  return value.active;
}

console.log(isSubscriptionActive(subscription));

JavaScript example#

async function fetchPosts() {
  const response = await fetch("/api/posts");

  if (!response.ok) {
    throw new Error(`Request failed: ${response.status}`);
  }

  return response.json();
}

Terminal example#

npm run dev
npm run lint
npm run build

Long-line overflow test#

const diagnosticMessage = "This deliberately long line checks whether the code block scrolls horizontally without forcing the entire article or page to become wider than the viewport.";

Check syntax highlighting, font size, line wrapping or horizontal scrolling, and your existing code-copy button if one is implemented.

7. Table rendering#

On mobile, ensure the table remains usable without widening the entire page.

8. Lists and nested content#

Unordered list#

• Authentication
• Database access
• Background jobs
  • Scheduled tasks
  • Retry handling
  • Failed-job monitoring

Ordered list#

1. Write the content.
2. Preview the page.
3. Check all media.
4. Verify mobile and dark mode.
5. Run a production build.

Task list#

• Article metadata added
• Markdown examples included
• Local test image added
• All remote media verified
• Desktop and mobile checked

9. Blockquote and inline links#

Good content presentation should make technical information easy to scan without distracting the reader.

Useful references:

• Next.js documentation
• MDX documentation
• React documentation

10. Long-content stress test#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, justo sed tincidunt tristique, neque lorem convallis risus, sit amet faucibus mauris nisl a neque. Integer euismod sem at metus volutpat, non ultrices purus sodales. Proin euismod, neque ac suscipit tempor, tellus enim bibendum erat, in sollicitudin massa sem sed turpis.

Repeat this section with a few paragraphs of real content to verify the reading width, vertical rhythm, paragraph spacing, and overall article length.

11. Final UI checklist#

• Headings have consistent typography and spacing.
• Body text is readable in light and dark themes.
• Images remain within the article container.
• GIF animation works.
• Video embed displays correctly.
• Code blocks support horizontal scrolling.
• Tables remain usable on mobile.
• Links have visible hover and keyboard-focus states.
• No unexpected horizontal overflow.
• No missing assets or console errors.