A Tiny Upgrade With Outsized Impact: Add FormattedContent to MarbleCMS

A drop-in content renderer that turns raw HTML into beautiful, theme-aware blog posts using the SDK you already have.

TL;DR

• Add a pre-styled FormattedContent component to the official SDK.

• No breaking changes; works with existing getPosts and getSinglePost.

• Minimal dependencies; immediate developer value; faster adoption.

The Problem

1. No Content Formatting Component

Problem: Developers must build custom 240+ line components to properly format blog content with:

• Syntax highlighting

• Responsive typography

• Theme support (dark/light)

• Enhanced styling for code blocks, lists, tables

Current Solution: Manual dangerouslySetInnerHTML with no styling

2. Repetitive API Setup

Problem: Every developer writes the same boilerplate:

export async function getPosts() {
  const raw = await fetch(`${url}/${key}/posts`);
  return await raw.json();
}

The Proposal

1. Official @marblecms/nextjs Package

Core Components:

import { FormattedContent, getPosts, getSinglePost } from '@marblecms/nextjs';

// Server Component
export default async function BlogPage() {
  const { posts } = await getPosts();
  return (
    <div>
      {posts.map(post => (
        <Link key={post.id} href={`/blog/${post.slug}`}>
          {post.title}
        </Link>
      ))}
    </div>
  );
}

// Post Page
export default async function PostPage({ params }) {
  const { post } = await getSinglePost(params.slug);
  return (
    <div>
      <h1>{post.title}</h1>
      <FormattedContent content={post.content} />
    </div>
  );
}

Package Features:

• Pre-styled FormattedContent component

• Built-in syntax highlighting

• Theme-aware styling

• TypeScript support

• App Router optimized utilities

• ISR integration helpers

How FormattedContent Works

The component processes raw HTML content through a simple pipeline:

1. Content Sanitization - Cleans HTML entities and malformed links

2. Code Block Extraction - Finds and processes <pre><code> blocks for syntax highlighting

3. Style Enhancement - Adds responsive Tailwind classes to all elements

4. Theme-Aware Rendering - Applies light/dark mode syntax highlighting

Key Features:

• Integrates with next-themes for automatic theme switching

• Uses react-syntax-highlighter for code blocks

• Mobile-first responsive design with Tailwind CSS

• Performance optimized with caching and lazy loading

Why this improves developer experience

What's Missing from Current Docs:

• Interactive examples

• Content formatting guidance

• Performance optimization tips

• Error handling patterns

Implementation Priority

Easy Implementation with Existing Code: The FormattedContent component can be implemented as a simple addition to MarbleCMS's existing SDK without requiring major updates. It leverages the current getPosts and getSinglePost functions that developers are already using.

1. FormattedContent Component (High Impact)

   • Eliminates 200+ lines of custom code per project

   • Consistent styling across MarbleCMS implementations

2. Next.js Utilities (Medium Impact)

   • Pre-built API functions with error handling

   • TypeScript definitions

   • Caching strategies

3. Documentation Updates (Low Effort, High Value)

   • Add FormattedContent usage examples

   • Performance best practices

   • Troubleshooting guide

Business Impact

For Developers:

• Reduce integration time from days to hours

• Eliminate custom formatting component development

• Better performance with optimized components

For MarbleCMS:

• Faster developer adoption

• Reduced support tickets

• Competitive advantage over other headless CMS

Implementation Strategy

Easy Integration: Works with existing getPosts and getSinglePost functions - no breaking changes needed.

// Current usage (unchanged)
const { post } = await getSinglePost(slug);

// Enhanced with FormattedContent (simple addition)
<FormattedContent content={post.content} />

Minimal Dependencies: Only adds react-syntax-highlighter and next-themes with tree-shakeable imports for optimal bundle size.

Technical Specs

Package Structure:

@marblecms/nextjs/
├── components/     # FormattedContent, etc.
├── utils/          # getPosts, getSinglePost (enhanced versions)
├── types/          # TypeScript definitions
└── hooks/          # React hooks for client components

Compatibility:

• Next.js 14+

• React 19+

• TypeScript 5+

Call to action

• Ship FormattedContent as part of @marblecms/nextjs v1.

• Document usage with getPosts and getSinglePost.

• Provide a theme-aware code sample and quick-start snippet.

• Keep bundle size lean by tree-shaking languages and lazy-loading highlighters.

Contact: Based on Mantlz integration experience (August 2025) Reference: Custom FormattedContent component with 240+ lines of processing logic