Inject HTML content into an Astro component

Emmanuel Gautier / August 16, 2023

1 min read

The Challenge putting script tag content with Astro

While working on a project within the Astro framework, I encountered a scenario where I needed to fill HTML content within a <script> tag. However, the moment I implemented this, the smooth functioning of my web application turned into a jittery experience. It was clear that the <script> content was not playing well with the rest of the page.

<script type="application/ld+json">{JSON.stringify(schema)}</script>

But the render was not the one expected:

<script type="application/ld+json">{JSON.stringify(schema)}</script>

How to inject HTML into an Astro element

After some investigation, I discovered that Astro web framework has his own way to inject HTML string into an element, the directive set:html.

For the developer more familiar with the React ecosystem, it is similar to the React dangerouslySetInnerHTML

Here is the final solution after reading the documentation:

<script type="application/ld+json" set:html={JSON.stringify(schema)} />

Hope that can help other developers!


If you're seeking solutions to a problem or need expert advice, I'm here to help! Don't hesitate to book a call with me for a consulting session. Let's discuss your situation and find the best solution together.

Share this post
Follow the RSS feed

Subscribe to the newsletter

Get the latest news about tech new articles and projects.