HTML in json file

I'm following this guide, and getting the data to show up no worries. What I'm struggling with however, is if I want some HTML in my json file, for example, if I want to add a class to part of a string. Is the only way to do this using dangerouslySetInnerHTML?

Hi, Shane! Welcome to the Vercel Community 😄

You could structure your JSON data with explicit fields, like so:

1{2  "text": "Hello World",3  "className": "text-blue-500"4}

Then create React components that accept the structured data as props, render the content with appropriate HTML elements and apply classes or styles as needed.

Then when it comes to parsing and rendering the content, it'd look like:

1// Read JSON normally2const data = await readJsonFile()34// Render through your component5<StyledText content={data} />

This would make sure that:

✅ Type-safe and secure
✅ No raw HTML injection
✅ Full React component control
✅ Easy to maintain and extend

This is safer than using dangerouslySetInnerHTML while still achieving styled, structured content from your JSON files.

Thanks Pauline! Turned out the problem was with what I was putting in my JSON file so got this working now. Thanks though!

Great to hear this works now! Thanks for coming back to share your solution 😄