What are Astro components?

Astro com­po­nents are the basic build­ing blocks of Astro. Writ­ing com­po­nents should feel famil­iar to writ­ing HTML (or Twig) and the tran­si­tion to Astro com­po­nents will feel familiar.

There are two parts to an Astro component:

1. Com­po­nent Script — con­tained between the dashed lines of frontmatter.
2. Com­po­nent Tem­plate — the main part of the com­po­nent with your markup or any JavaScript expres­sions need­ed to build the page.

In the Com­po­nent Script, you can do any­thing you’d nor­mal­ly do in JavaScript or JavaScript frame­work code: import oth­er code, fetch data, import data, set vari­ables. It’s the place where you get the busi­ness of the com­po­nent done.

The Com­po­nent Tem­plate is where you write the markup that will ren­der your com­po­nent in the brows­er. You can write plain HTML and noth­ing else, and Astro will duti­ful­ly build your page using that com­po­nent. You can also use JavaScript expres­sions (like map­ping data you fetched in the Com­po­nent Script sec­tion). Or, you might need to use Astro direc­tives, like set:html to han­dle data in a spe­cial way.