Back to articles
I Built a Drag-and-Drop GitHub Profile README Builder with Next.js 16 & React 19

I Built a Drag-and-Drop GitHub Profile README Builder with Next.js 16 & React 19

via Dev.to ReactZntb

A deep-dive into building a fully visual, self-hosted README builder — covering architecture decisions, the self-hosted stats API, drag-and-drop with dnd-kit, and how the block system works. Your GitHub profile README is often the first thing a recruiter, collaborator, or open-source maintainer sees. It's prime real estate — yet most developers either leave it blank or spend an afternoon wrestling with raw Markdown, hunting for widget URLs, and tweaking layouts by trial and error. I wanted to fix that. So I built GitHub Profile README Builder : a fully visual, drag-and-drop editor where you configure your profile in a live preview canvas and export a production-ready README.md in one click. 🔗 Live Demo ⭐ GitHub Repo What It Does Drag-and-drop canvas — reorder blocks effortlessly with smooth dnd-kit animations 25+ block types — headings, paragraphs, skill icons, social badges, typing animations, collapsibles, code blocks, GitHub stats cards, activity graphs, trophies, visitor counters,

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
1 views

Related Articles