Data-Driven UI with Just JSON

This one came from laziness, honestly. I didn’t want to hardcode sections, copy-paste props, or touch JSX just to add a new card. So I asked: what if the whole UI was driven by a JSON config?

Setup

• Defined a sections.json with titles, text, and types.
• Wrote a renderer that mapped over it into cards.
• Added optional fields for icons, links, etc.

Now adding a section is literally editing JSON. Want a new feature card? Add an object. No rebuild needed.

Challenges

The hardest part wasn’t code — it was deciding how flexible the JSON should be. Too rigid, and I’d still need JSX tweaks. Too flexible, and it’s basically a CMS. I aimed for “enough” — just enough keys to cover 80% of my needs.

Takeaways

This pattern makes your code feel like Lego. It’s modular, fast to iterate, and surprisingly powerful for demos.