How to add HTML in JSON file

This article is going to assume that you’re trying to insert HTML directly inside the JSON file.

The problem with HTML inside JSON is that HTML elements have properties that must use double quotes.

But as soon as you insert double quotes it’s going to cause syntax error because JSON can only do double quotes.

{
  "content": "
Header with ID property
"
}

If you’re interested why this breaks, here’s an article to explain why, “Types – String“.

Okay solution: Using HTML entities

You can use HTML entities to escape that syntax error.

{
  "content": "
Header with ID property
"
}

But it sometimes causes weird HTML side-effects.

Like adding double quotes around the double quotes. Or making link elements not work.

Best solution: Escape strings

The best solution to implement HTML with properties is to escape strings.

{
  "content": "
Header with ID property
"
}

Just add the backslash (\) symbol before the beginning of a double quote and the before the end of a double quote.

I like to tweet about JSON and post helpful code snippets. Follow me there if you would like some too!