Importing raw HTML from .html file to an Astro Component

[valid coral]

I want to display some raw HTML that I want unmodified.

Without astro classes etc.

[reef spade]

Hi @valid coral. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To import and display raw HTML from an .html file in an Astro component without Astro modifying it, you can use the is:raw directive. This directive instructs the Astro compiler to treat the content as raw text, ignoring any special Astro templating syntax. Here's how you can do it:

1. First, place your HTML file in the public/ directory of your Astro project. Files in this directory are copied directly to the build output without processing as mentioned in the Astro documentation (https://docs.astro.build/en/basics/project-structure/#public).

2. In your Astro component, you can then use the is:raw directive along with the set:html attribute to insert the raw HTML content. Here's an example:

---
const rawHtml = await fetch('/path-to-your-file.html').then(res => res.text());
---

<div is:raw set:html={rawHtml}></div>

The is:raw directive ensures that Astro doesn't process any content within the element as Astro syntax as explained in the Astro documentation (https://docs.astro.build/en/reference/directives-reference/#advanced-directives).

By using this approach, you can display your raw HTML without Astro adding any classes or modifying the content. The HTML will be inserted as-is into your Astro component.

Remember that when using is:raw, you're responsible for ensuring the safety and validity of the HTML content, as Astro won't process or sanitize it.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@valid coral Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[valid coral]

Any way to display the raw contents of another .astro file