DEV Community: Muzaffar Hossain

I Built CommitPress Because I Was Tired of Complex Blog SystemsStop fighting complex blog systems CommitPress = Git + MDX + AI formatting Perfect for: 🎯 Startups needing quick content 🎯 Developers who love simplicity 🎯 Teams tired of CMS overhead

Muzaffar Hossain — Tue, 08 Jul 2025 06:10:25 +0000

Muzaffar Hossain

Jul 4 '25

I Built CommitPress Because I Was Tired of Complex Blog Systems

#portfolio #opensource #webdev #programming

Comments

3 min read

I Built CommitPress Because I Was Tired of Complex Blog Systems

Muzaffar Hossain — Fri, 04 Jul 2025 04:31:24 +0000

The Problem

At TransilienceAI, we needed a blog for our marketing website. Simple requirement, right?

It wasn't.

Every option we looked at was complicated:

Set up a database
Learn a new CMS
Manage user accounts
Pay monthly fees
Train our team on another system

We're a cybersecurity startup. We move fast. This felt like way too much work just to publish blog posts.

All we wanted was simple: someone writes a post, adds an image, pushes code, and it's live.

My Realization

Then it hit me. Why do blogs need databases? We already have Git. We use it every day. It tracks changes, handles collaboration, and stores everything.

What if blog posts were just files? What if publishing was just a commit?

There were some .mdx solutions out there, but they weren't polished. I'd already built a good markdown renderer. And with Cursor AI rules, I could make the whole thing much easier to use.

So I built CommitPress.

How CommitPress Works

It's straightforward:

✅ Blog posts are .mdx files in your repo
✅ Writing means creating a file
✅ Publishing means git push
✅ Version control is built in
✅ Team collaboration works through pull requests

But here's the part that makes it useful.

AI Does the Formatting

Writing isn't the hard part. Formatting is. So I added Cursor AI rules that turn messy content into proper blog posts.

Here's what you do:

Create a .mdx file
Paste your content from anywhere
Tell Cursor AI: "Format this as a blog post" tagging blog-content rule
Get proper MDX with metadata and structure
Add banner Image
Commit and push

Done.

How We Use It at TransilienceAI

We built our marketing blog with CommitPress. Here's what happened:

No more database costs
Pages load instantly
Anyone on our team can publish
No maintenance headaches
SEO works automatically
Deploys anywhere

Most importantly: we stopped wasting time on blog infrastructure and got back to building our product.

It's Not Just for Developers

I made this for our dev team, but it works for everyone:

Startups that need a professional site without complexity
Consultants who want to share their expertise
Freelancers who need portfolio plus blog
Content creators who want to own their platform
Anyone who prefers simple over complicated

What You Actually Get

CommitPress is a complete system:

Clean portfolio pages
Database-free blog
AI formatting
Works on mobile
Fast loading
SEO ready

No database. No CMS. No monthly fees.

Why I'm Open Sourcing It

Because this should exist. Every team should have access to simple tools.

You get:

All the source code
AI rules for Cursor
Setup guides
Documentation
Real examples from our TransilienceAI site

The Technical Stuff

For developers who want details:

Next.js 15 with App Router
MDX for rich content
TypeScript throughout
Tailwind CSS + Shadcn/ui
Cursor AI rules for formatting
Static generation for speed

Try It

Want to see how it works?

git clone https://github.com/muzaffar640/commitpress.git
cd commitpress
npm install
npm run dev

To add your first post:

Create a .mdx file in src/app/content/
Paste some content and ask Cursor to format it
Commit and push
It's live

What I Think

Simple tools win. Complex tools create problems.

CommitPress isn't trying to do everything. It does one thing well: turns Git into a publishing platform.

And honestly? That's enough.

Get Started

Code: github.com/muzaffar640/commitpress
Demo: CommitPress
Issues: Open one if something breaks

What Will You Build?

Maybe you're a startup founder. Maybe you're a consultant. Maybe you just want a simple blog.

CommitPress works for all of that.

The question isn't whether you need a blog. It's whether you need all the complexity that usually comes with it.

Cursor's New "/Generate Cursor Rules" Feature: A Game-Changer for Development Team

Muzaffar Hossain — Fri, 02 May 2025 05:39:18 +0000

Cursor recently released a powerful new feature with their 0.49 update: the ability to generate Cursor Rules directly from conversation using the /Generate Cursor Rules command. As someone who uses Cursor extensively in daily development, I was eager to test this feature and share my experience.

Why Cursor Rules Matter

At Transilience AI, where I serve as the only front-end developer, maintaining consistent coding standards is crucial. We're building multiple cybersecurity solutions, and I need to create templates that allow backend engineers to clone repositories and start development without requiring my constant assistance. Cursor Rules play a vital role in establishing this ecosystem.

Previous Methods vs. The New Approach

Previously, developers had several options for generating Cursor Rules:

Cursor Rule Maker
Awesome-cursorrules
Template repositories

While these tools were helpful, they provided generic rules that required significant customization to match specific coding standards.

The new /Generate Cursor Rules command eliminates this hassle. Simply use the command in Agent mode, and Cursor will analyze your codebase to generate tailored rules.

Testing the Feature

When testing with the gemini-2.5-pro model, results were somewhat disappointing. However, switching to Claude 3.7's thinking model produced excellent results. In just three prompts, I received customized rules perfectly suited to our Transilience AI marketing website codebase.

Prompt-1:

Article content and this is the summary of result

It was still not perfect, though. But giving some prompts to generate the rest of the rules completed the job. Still, it will miss some custom needs. You add those, and it is done.

Prompt-2:
this is good can you see if you there is a scope for more rules. I can see for front end development we can set a rule, for icon it should look for iconify package and follow the existing use cases. Please see if there are any additional rules we can include.

and this is the result

I remove animation-pattern.mdc, form-handling.mdc, seo-practices.mdc, as I didn't need this.

The rules are very important. There are multiple ways to integrate iconify icons in the NextJs application. After trying all of them, I chose one to go with. These rules set the standard for future contributors. Here is the icon-usage.mdc

At last, I figured that it missed the Shadcn implementation while creating a new reusable low-level component, so I passed one last prompt.

Prompt-3:
In the coding-standards.mdc, specify that if a new reusable component needs to be created, shadcn should be used.

And result

The Value of Custom Rules

These custom rules provide significant benefits:

They help new contributors follow established standards
They enable non-front-end developers to add features while maintaining consistency
They reduce the need for constant oversight and feedback

Just remember to update your rules as your codebase evolves.

This is our Transilience AI marketing website codebase, which is kind of simple, nothing complicated.

Conclusion

Cursor's /Generate Cursor Rules feature is a remarkable addition that simplifies maintaining coding standards across development teams. By generating contextually relevant rules through conversation, it significantly reduces the effort required to establish and enforce coding guidelines. For teams like ours at Transilience AI, where different specialists need to collaborate seamlessly, this feature is invaluable.

The Evolution of Frontend Development: A Shift from Component Libraries to AI-Driven Custom Solutions

Muzaffar Hossain — Fri, 27 Dec 2024 17:39:46 +0000

Frontend development is experiencing a fascinating transformation, much like a chef evolving from pre-made ingredients to crafting dishes from scratch with better tools. As a frontend engineer, I've watched our development practices shift from relying heavily on traditional UI component libraries – those convenient but often inflexible solutions – toward something more refined: AI-assisted, custom-tailored approaches that combine the efficiency we need with the flexibility we've always wanted. This shift represents more than just a change in tools; it's a deeper understanding of how to build web applications that are both performant and maintainable.

With the help of AI tools, we are able to create complex custom UI components based on Figma designs and deliver them fast. Speed is the most significant factor here. Because modifying a component from a traditional library to match a Figma design was a time-consuming process. But with the help of AI, this becomes very fast.

The Traditional Approach: The Hidden Cost of Convenience

When I started my career, installing Material UI or Bootstrap was almost a reflex action when setting up a new project. These comprehensive UI libraries promised rapid development and consistent design. However, after years of building and maintaining large-scale applications, I've come to recognize the significant drawbacks of this approach.

Let's look at some numbers that might surprise you:

A typical Material UI installation adds approximately 300KB to your bundle size (after minification and gzipping). While this might seem negligible, consider that Google's research shows a 1-second delay in mobile load times can impact conversion rates by up to 20%.

In one of my recent projects, we analyzed our dependency usage and found that we were only utilizing about 15% of the components from our UI library, yet carrying 100% of the bundle weight. This inefficiency becomes even more apparent when you consider that modern web applications often integrate multiple specialized libraries.

The Rise of Utility-First CSS and Atomic Design

The growing popularity of Tailwind CSS marked the beginning of a paradigm shift. Instead of importing pre-built components, developers started embracing utility-first CSS. This approach provided granular control while maintaining consistency through design tokens.

Enter shadcn/ui: A Game-Changing Approach

What makes shadcn/ui different? Instead of installing a library, you copy the components you need directly into your project. This approach offers several advantages:

Bundle Size Optimization: You only include what you use, resulting in significantly smaller bundle sizes.
Complete Customization Control: Since components live in your codebase, you can modify them without fighting against library constraints.
Type Safety: Full TypeScript support without dependency version conflicts.

The AI Revolution in Component Development

Here's where things get really interesting. The integration of AI in frontend development is transforming how we create custom components. Let me share a recent experience where I needed to create a button component with a sophisticated shiny effect.

Instead of reaching for a UI library that would bloat our bundle size, I used AI to help craft a custom button component that perfectly matched our needs. Here's the elegant solution we implemented:

First, we defined our button variants and animations in our Tailwind configuration:

// tailwind.config.ts
const config = {
  theme: {
    extend: {
      keyframes: {
        shine: {
          "0%": { transform: "translateX(-100%)" },
          "100%": { transform: "translateX(100%)" },
        },
      },
      animation: {
        shine: "shine 2s ease-in-out infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

Then, we created our button component with multiple variants and a beautiful shine effect:

// Custom Button Component with AI-enhanced styling
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "bg-gradient-to-r from-[#6941C6] to-[#4C318A] text-white border-transparent",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border-2 border-[#6941C6] bg-transparent text-[#6941C6] hover:bg-[#6941C6]/10 transition-all duration-300",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);

Button.displayName = "Button";

export { Button, buttonVariants };

This approach demonstrates the power of AI-assisted component development:

Minimal Bundle Size: Our entire button implementation, including animations and variants, weighs just 3.8KB compared to approximately 45KB from a typical UI component library
Complete Design Control: The component seamlessly integrates with our design system, offering multiple variants (default, outline, destructive, etc.) and sizes
Type-Safe: Full TypeScript support with proper type inference for variants and props
Optimized Performance: Custom animations using Tailwind's built-in animation system avoid heavy animation libraries
Maintainable Code: Clean, well-structured code that's easy to modify and extend

The shine animation effect is achieved purely through CSS animations and Tailwind's utility classes, making it incredibly performant and customizable. This is a perfect example of how AI can help us craft precise, efficient solutions without the overhead of traditional component libraries.

The Future of Frontend Development

This shift represents more than just a trend—it's a fundamental change in how we approach frontend development. By combining utility-first CSS frameworks like Tailwind, component collection approaches like shadcn/ui, and AI-assisted development, we're entering an era of more efficient, maintainable, and performant web applications. And have your own design system inplace.

The numbers speak for themselves. In a recent project migration from Material UI to this new approach, we saw:

Initial bundle size decreased by 27%
Time to Interactive improved by 18%
Build times improved by 15%

Conclusion

As we move forward, I expect this trend to accelerate. The future of frontend development lies not in massive, one-size-fits-all libraries, but in customizable, efficient solutions powered by AI and modern development practices.

Remember, the best tool is often the one you craft yourself, especially when you have AI as your pair programmer. The key is finding the right balance between development speed and application performance.

What are your thoughts on this shift? Have you experimented with AI-assisted component development? I'd love to hear about your experiences in the comments below.

See Ya,

Muzaffar Hossain

LinkedIn | Twitter | GitHub | Dev.to | Medium

Why I Can't Stop Talking About Arc Browser: A Developer's Story

Muzaffar Hossain — Mon, 16 Dec 2024 04:50:06 +0000

Why I Can't Stop Talking About Arc Browser: A Developer's Story

The Backstory

Last week, I was brainstorming with Garima, our lead designer at Transilience AI. While walking her through some UI components, she noticed my unconventional browser setup. "What do you think about Arc Browser?" she asked, pointing at my neatly organized workspace. She knew about Arc from our team meetings but hadn't given it a try, even though I'd been using it for months.

As a startup, we keep experimenting with new tech. If we like it, awesome; if we don't, we move on. What followed was a passionate 10-minute monologue about Arc browser that had her completely hooked. This wasn't the first time – I'd had similar conversations when explaining Arc to friends. That's when I realized I should probably write this down. If my friends and colleagues found these insights valuable, perhaps others would too.

This Isn't Your Typical Tutorial

Before we dive in, let me be clear: this isn't another "How to Get Started with Arc" guide with flashy images and videos. There are already excellent resources out there for that:

Instead, I want to share why Arc has become an indispensable part of my daily workflow, both as a Software Engineer and as someone obsessed with productivity.

The Friction in My Browser Workflow

As a Mac M3 user, I've never faced Chrome's notorious memory issues. Over the years, I've experimented with Firefox, Edge, Tor, and Brave for different use cases, but I always found myself gravitating back to Chrome. Don't get me wrong - Chrome is an excellent browser that runs like a bull, especially on Apple silicon.

While Chrome reliably gets the job done, it felt more like a tool I tolerated than one I loved. Enter Arc: a browser that reimagines what working online can feel like. It didn’t just meet my needs, it surprised me by solving problems I hadn’t even noticed before.

Then Arc came along and showed me what I'd been missing. It solved problems I didn't even realize were problems until I experienced a better way. It's like switching from a regular text editor to VS Code - you don't realize how much friction existed in your workflow until it's gone. And the best part? It has all the good things of Chrome and some more good stuff that makes you wonder why nobody thought of this before.

How Arc Transformed My Workflow

1. Command Bar: The Developer's New Best Friend

As a developer, the command bar is like having a senior engineer's brain at your fingertips. ⌘+T isn't just for new tabs anymore – it's your command center. Need that React hooks documentation you had open yesterday? It's there. Looking for that GitHub issue from last week? Just type a few characters. The time saved from not hunting through tabs adds up significantly. It feels like an extension of the Finder feature in MacOS.

But here's the real game-changer: it learns from your habits. After a few days, Arc understands your workflow better than any browser I've used. It's like having a really efficient personal assistant who knows exactly what you're looking for.

2. Spaces: Context-Switching Without the Mental Overhead

Remember the last time you had to switch between multiple projects? In traditional browsers, this means either:

Having multiple windows with dozens of tabs each
Constantly opening and closing tabs
Using bookmarks (let's be honest, who maintains those?)

Arc's Spaces changed this completely. Think of Spaces as different rooms in your browser house, each perfectly arranged for its purpose. The game-changer? You can have multiple spaces under one profile, all accessible from the same place. No more logging in and out or switching between browser profiles.

Here's how I've organized my digital life:

Development for Office work under the Work profile
My personal study and development under the Personal profile
Personal regular stuff different household utility portals, shopping, etc under the Personal profile.
Side project that I am working on under Hustle

Switching projects in Arc feels less like juggling tabs and more like stepping into a different workspace, tailored to the task at hand. Each space is its own ecosystem, waiting for you exactly as you left it – no tab chaos or reorganizing necessary.

3. Split View & Little Arc: Your New Pair Programming Partner

Every developer knows the dance: documentation on one monitor, code on another, and Stack Overflow somewhere in between. Arc's split view is like having an extra monitor within your browser. I regularly have:

The articles that I added to the reading list
Documentation paired with my code sandbox
Developing screens alongside my Figma design
API responses next to my test cases

But here's what makes it truly powerful: these splits persist within your spaces. When I return to a project, my setup is exactly how I left it – no more recreating my workspace every morning.

Since I have an ultra-wide monitor, I sometimes open four split screens.

4. Little Arcs: Your Digital Scratch Pad

Think of Little Arcs as disposable browsers for quick tasks. Need to check something quickly without cluttering your workspace? Little Arc. Want to test how your site looks in a fresh session? Little Arc. They're like sticky notes for your browsing – use them and lose them.

The real magic happens when you're deep in development. Instead of opening a new tab and losing focus on your main work, Little Arcs lets you jump in, solve a problem, and jump right back out without losing the context of what you were working on.

Little Arcs keeps your main workspace pristine while you handle those essential side quests.

5. Mobile Sync: Take Your Workflow Anywhere

One of the biggest surprises of Arc came when I installed it on my phone. Unlike traditional browsers where mobile sync means just bookmarks and passwords, Arc takes your entire workspace on the go. Each space, with its specific arrangement of pinned tabs and organization, syncs seamlessly to your mobile device.

What makes this particularly powerful is how it maintains context. When I'm coding at my desk and need to step away, I can pick up my phone and continue reading that crucial documentation or checking those API responses right where I left off. My workspace stays separate from my personal browsing, just like on my desktop.

The other day, I had to run to meet someone in the middle of work. After reaching there, I had to wait for almost half an hour. I just opened the computer version of the Arc browser and continued reading.

The mobile experience doesn't feel like a watered-down version of the desktop app - it's thoughtfully designed to complement it. You can access all your spaces, your pinned tabs, and even your recent browsing history, making the transition between devices feel natural and productive.

6. Boosts: Custom JavaScript and UI for Power Users

As a developer, this feature is pure gold. Imagine having custom JavaScript snippets ready to enhance any website. I've created boosts to:

Convert light-themed websites that I frequently visit to dark mode when they don't offer it natively. You can do this in about 30 seconds. I've already transformed EdX, LinkedIn (👆 that bright Banner image 👆), idratherbewriting.com, and several other sites I spend time on
Use community boosts like No YouTube Shorts Plz that hide all shorts from YouTube - something I've wanted forever
Add keyboard shortcuts to frequently used web apps

The real power comes when you encounter a website with a UI that doesn't match your preferences - just change it in 30 seconds. It's that simple.

Other Features Worth Mentioning

Built-in ad blocking that actually works
Focus mode that helps you stay on task
Easels for visual organization
Command palette that feels like VS Code
Theme customization that doesn't feel hacky
The preview window of a website on hovering over the link.

More Than Just a Browser

Arc isn't just another Chrome alternative – it's a reflection of how modern developers and professionals actually work. It's not about having a prettier browser; it's about having a smarter one. One that understands that your browser is your workspace, your research tool, your communication hub, and your development environment are all rolled into one.

I love what The Browser Company is doing with Arc browser. I loved it when the founder said, it is not just another impressive startup that gonna bought by other big company.

Want to give it a try? Start with the resources I mentioned above, but don't just follow tutorials. Experiment. Find your own workflow. Because that's what Arc does best – it adapts to you, not the other way around.

If you're ready to boost your productivity, give Arc Browser a try.

Happy Building,

See Ya,

Muzaffar Hossain

LinkedIn | Twitter | GitHub

TypeScript and ReactMarkdown: A Tale of Types, Tears, and Triumph

Muzaffar Hossain — Wed, 04 Dec 2024 18:12:42 +0000

Quick disclaimer: What you're about to read covers only about 20% of the type errors I encountered. Initially, I hadn't planned to write this blog post - I was just trying to get my markdown renderer working. But after the fifth cup of coffee and the twentieth type error, I thought, "Someone else needs to benefit from this suffering." So here we are.

Good news: At the end of this post, I'm sharing four production-ready template files that you can use as a starting point for your own implementation. These templates have saved my team countless hours, and hopefully, they'll do the same for you.

Why This Implementation Matters: The AI Landscape Context

Let me provide some context about why this implementation became crucial for our team. We're building Transilience AI, an AI applications in cybersecurity solutions, which means handling streaming responses is a fundamental requirement. Our architecture involves custom agents and modal streaming endpoints that stream responses, necessitating a frontend application capable of handling and styling each HTML component according to our specific needs.

Here's what makes this particularly challenging: the AI landscape is evolving at a breakneck pace. What worked yesterday might need refactoring tomorrow, and documentation often struggles to keep up with this rapid evolution. While building our streaming interface, I found myself navigating through outdated docs and contradicting solutions.

I want to be transparent here - this blog post represents our current, working solution. Given the pace of change in AI development, some aspects might need adaptation in a few months. However, the core concepts and type-safety patterns we've discovered should remain valuable, even as the ecosystem evolves.

The solutions presented here were born from real-world requirements:

Handling streaming markdown responses from AI models
Ensuring type safety across our entire application
Creating maintainable, customizable components that could evolve with our needs
Building a foundation that could scale as our AI applications grew more complex

The Beginning: Understanding the Type System Maze

When I first started implementing ReactMarkdown with TypeScript, I thought I had a solid grasp of both technologies. The ReactMarkdown documentation made it look straightforward:

<ReactMarkdown
  components={{
    code: ({ node, ...props }) => <SomeComponent {...props} />,
  }}
/>

But TypeScript had other plans. The moment I tried this "simple" approach, I was greeted with the cryptic error: "Property 'inline' does not exist on type '{}'". And thus began my journey through the type system maze.

The Evolution of Solutions

Let me walk you through the progression of attempts that led to our final solution. Each one taught me something valuable about TypeScript's type system.

First, I started with what seemed logical - using React's built-in type definitions:

type CodeProps = React.ComponentProps<"code">;
const CodeComponent = ({ inline, className, children }: CodeProps) => {
  // Implementation that was doomed from the start
};

This approach failed because React's native types don't include ReactMarkdown-specific properties. A rookie mistake, but one that taught me to look deeper into library-specific type definitions.

Next, I tried using ReactMarkdownOptions:

import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
const CodeComponent: ReactMarkdownOptions["components"]["code"] = ({
  inline,
  className,
  children,
}) => {
  // Getting closer, but still not quite there
};

Finally, after much research and experimentation, I found the solution that worked:

import { Components } from "react-markdown/lib/ast-to-react";

const CodeComponent: Components["code"] = ({
  className,
  children,
  ...props
}) => {
  const match = /language-(\w+)/.exec(className || "");
  const lang = match && match[1];
  return <CodeBlock lang={lang || "text"} codeChildren={String(children)} />;
};

The Display Name and Circular Reference Challenges

Just when I thought I had everything under control, ESLint started complaining about missing display names. Here's how we solved it while maintaining type safety:

export const components: Partial<Components> = {
  code: Object.assign(CodeComponent, { displayName: "CodeComponent" }),
  // ... other components
};

The circular reference crisis we encountered led to this type-safe solution:

const extractTextContent = (node: React.ReactNode): string => {
  if (typeof node === "string") return node;
  if (typeof node === "number") return String(node);
  if (Array.isArray(node)) return node.map(extractTextContent).join("");
  if (React.isValidElement(node)) {
    return extractTextContent(node.props.children);
  }
  return "";
};

Best Practices We Learned the Hard Way

Through this journey, we discovered several crucial best practices:

Always use the Components type from react-markdown/lib/ast-to-react for custom components - it provides the most complete type definitions for all ReactMarkdown component properties.
Be extremely careful with import paths - using the wrong import path can lead to incomplete type definitions. Always import from react-markdown/lib/ast-to-react when working with custom components.
When using React.memo with ReactMarkdown components, apply the type definition before memoization. This ensures proper type inference and prevents hard-to-debug type errors later.
Never use @types/react-markdown directly - let the types come from the react-markdown package itself. The DefinitelyTyped types can sometimes be outdated or incomplete.
Always provide explicit display names for your components, even though it might seem redundant. This becomes crucial for debugging and React DevTools usage.
When dealing with children props, always implement proper type-safe content extraction. This prevents runtime errors from circular references.

Production-Ready Templates and Implementation

As promised, I'm sharing our battle-tested templates: Github: Markdown Renderer

MarkdownRenderer.tsx: The main component that handles markdown rendering
components.tsx: Custom components with proper typing
CodeBlock.tsx: A reusable code block component with syntax highlighting
codeLanguageSubset.ts: Supported language configurations

These files have been refined through countless type errors and edge cases. They handle everything from basic markdown to complex mathematical equations and code syntax highlighting. You can add more html attributes to component.tsx like image and all.

Looking Forward

What started as a "simple task" turned into a deep dive into TypeScript's type system and React's component model. The lessons learned have made me a better developer, and the solutions we discovered have saved countless hours for our team.

I'm currently working on extending this setup to handle real-time collaborative markdown editing. If you're interested in that or have questions about the implementation details shared here, feel free to reach out.

Remember: TypeScript errors are like that friend who always points out the spinach in your teeth. Annoying? Yes. But they're looking out for you! 😄

Found this helpful? Let's continue the conversation! I'm always excited to hear about your experiences and challenges with TypeScript and React.

See ya,

Muzaffar Hossain

LinkedIn | Twitter | GitHub