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!
Consulting
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.
Related Posts
Formatting Big Numbers in JavaScript
When working with large numerical values in JavaScript, it can be challenging to display them in a way that's easy to read and understand. In this blog post, we'll explore techniques for formatting big numbers in JavaScript with built-in methods.
Changing Document Field Types with MongoDB
This article explains how to convert document field types during query execution and how to use MongoDB's built-in aggregation operators $convert. The article also provides practical examples and code snippets to demonstrate how to change field types in MongoDB.
How to use Chakra UI Button and Link components with NextJS Link
There is some glue to add to make Chakra UI and NextJS work together. The Chakra UI components do not generate the "a" tag by default for a link. Let's see how to use the Chakra button to generate links between pages.
Featured Posts
Introducing new blog on OAuth, OpenID Connect, and IAM Solutions
I'm excited to announce the launch of a new blog named CerberAuth, where I'll be exploring the world of OAuth, OpenID Connect, and IAM solutions for modern security.
MySQL Docker Image for Mac ARM M1
MySQL official Docker image is not available for Apple ARM-based M1 and M2 CPUs. But there is some options to use mysql image on Mac and more globally on ARMv8 microarchitecture.
How to deal with Docker Hub rate limit on AWS
Since 2020, DockerHub has been limited to only 200 container image pull requests per six hours. This article will help you to deal with this limitation on AWS.