Astro supports most static assets with zero configuration required. You can use the
@import is also supported inside of CSS &
Supported File TypesSection titled Supported File Types
The following file types are supported out-of-the-box by Astro:
- Astro Components (
- Markdown (
- TypeScript (
- NPM Packages
- JSON (
- JSX (
- CSS (
- CSS Modules (
- Images & Assets (
If you don’t see the asset type that you’re looking for, check out our Integrations Library. You can extend Astro to add support for different file types, like Svelte and Vue components.
This guide details how different types of assets are built by Astro, and how to import them successfully.
Remember that you can also place any static asset in the
public/ directory of your project, and Astro will copy them directly into your final build.
public/ files are not built or bundled by Astro, which means that any type of file is supported. You can reference a
public/ file by a URL path directly in your HTML templates.
export syntax. This works as expected, based on default Node.js and browser behavior.
TypeScriptSection titled TypeScript
Astro includes built-in support for TypeScript. You can import
.tsx files directly in your Astro project, and even write TypeScript code directly inside your Astro component script and any hoisted script tags.
Astro doesn’t perform any type checking itself. Type checking should be taken care of outside of Astro, either by your IDE or through a separate script. For type checking Astro files, the
astro check command is provided.
📚 Read more about TypeScript support in Astro.
JSX / TSXSection titled JSX / TSX
Astro includes built-in support for JSX (
While Astro understands JSX syntax out-of-the-box, you will need to include a framework integration to properly render frameworks like React, Preact and Solid. Check out our Using Integrations guide to learn more.
NPM PackagesSection titled NPM Packages
Astro lets you import npm packages directly in the browser. Even if a package was published using a legacy format, Astro will up-convert the package to ESM before serving it to the browser.
Astro supports importing JSON files directly into your application. Imported files return the full JSON object in the default import.
Astro supports importing CSS files directly into your application. Imported styles expose no exports, but importing one will automatically add those styles to the page. This works for all CSS files by default, and can support compile-to-CSS languages like Sass & Less via plugins.
CSS ModulesSection titled CSS Modules
Astro supports CSS Modules using the
[name].module.css naming convention. Like any CSS file, importing one will automatically apply that CSS to the page. However, CSS Modules export a special default
styles object that maps your original classnames to unique identifiers.
CSS Modules help you enforce component scoping & isolation on the frontend with uniquely-generated class names for your stylesheets.
Other AssetsSection titled Other Assets
All other assets not explicitly mentioned above can be imported via ESM
import and will return a URL reference to the final built asset. This can be useful for referencing non-JS assets by URL, like creating an image element with a
src attribute pointing to that image.
It can also be useful to place images in the
public/ folder as explained on the project-structure page.
Astro supports loading WASM files directly into your application using the browser’s
Node BuiltinsSection titled Node Builtins
We encourage Astro users to avoid Node.js builtins (
Our aim is to provide Astro alternatives to common Node.js builtins. However, no such alternatives exist today. So, if you really need to use these builtin modules we don’t want to stop you. Astro supports Node.js builtins using Node’s newer
node: prefix. If you want to read a file, for example, you can do so like this: