Home
February 2026

Embedding JSON in HTML <template> Tags

Head's up

Probably you shouldn't do this. Just put stuff in a script tag. But, still it's intersting to poke at.

Update

Got a great pointer from this response that points to using <script> tags as data blocks. Very cool.

Ok. Hear me out.

We embed pre-baked JSON in <template> tags.

Something like:

HTML

<template id="myStuff" data-type="json">
  {
    "items": ["alfa", "bravo", "charlie"]
  }
</template>

<template id="myThings" data-type="json">
  {
    "items": ["delta", "echo", "foxtrot"]
  }
</template>

<p>template tags don't output by default.</p>

Output

template tags don't output by default.

Doing Stuff and Things

Data can be pulled in by querying for data-type="json". Parsing values is done by running the .innerHTML through .toString().

Putting it all together, we get this:

JavaScript

const data = {};

function loadData() {
  document.querySelectorAll("[data-type=json]")
    .forEach((el) => {
      try {
        data[el.id] = 
          JSON.parse(el.innerHTML.toString());
      } catch(error) {
        console.error(error);
      }
    });
}

function renderData(query, key) {
  document.querySelector(query)
    .innerHTML = data[key].items.join(" - ");
}

loadData();
renderData(".stuff", "myStuff");
renderData(".things", "myThings");

HTML

<div class="stuff"></div>
<div class="things"></div>

Output

Less (Net)work

I like it this a lot. Perfect for times when I've got static JSON (e.g. configs for more functionality on the page). It feels nicer to embed than fetching it with a network call.

-a

end of line

Endnotes

Again, maybe probably don't do this. Just throw stuff into a script tag unless you've got a good reason not to.

This idea hit me while working on the next version of bitty. I was setting it up to pull in templates automatically. I realized we can do the same thing with data.

If you know of reasons this might go off the rails, please let me know.

See also this response which suggest using <script> tags as data blocks.

References

A bunch of functionality to support vanilla javascript development. All bundled in a single file.