Astro 6.2 | Astro

Astro 6.2 is here! This release brings an experimental custom logger with built-in JSON output, perfect for structured logging and coding agents. It also includes a new SVG optimizer API, a font file URL helper, and more.

Explore what’s new in this release:

SVG optimizer
Experimental Logger
Experimental: getFontFileURL()
Astro v7 alpha
allowedHosts for preview servers
"jsx" option for compressHTML

To upgrade an existing project, use the automated @astrojs/upgrade CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:

# Recommended:
npx @astrojs/upgrade

# Manual:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

SVG optimizer

Astro’s experimental SVG optimization has been redesigned with a new svgOptimizer option that replaces the previous svgo flag. Instead of being tied directly to SVGO, the new API introduces an SvgOptimizer interface that any optimization library can implement. Astro ships with a built-in svgoOptimizer() based on SVGO, but you can now swap in alternatives like OxVG.

import { defineConfig, svgoOptimizer } from "astro/config";

export default defineConfig({
  experimental: {
    svgOptimizer: svgoOptimizer()
  }
});

When enabled, all imported SVG files used as components are optimized at build time for smaller file sizes and better performance. You can pass a SVGO configuration object to customize the optimization:

import { defineConfig, svgoOptimizer } from "astro/config";

export default defineConfig({
  experimental: {
    svgOptimizer: svgoOptimizer({
      plugins: ["preset-default", { name: "removeViewBox" }]
    })
  }
});

If you were previously using experimental.svgo, update your config to use the new svgOptimizer option instead.

For more information, see the experimental SVG optimization docs.

Experimental Logger

It’s now possible to control the Astro logger with custom loggers. As part of the experimental feature, Astro ships with built-in loggers, such as a JSON logger. If you use coding agents to work with Astro, structured logs will definitely help your workflow.

JSON logger

You can enable JSON logging via configuration using experimental.logger, or via CLI using the flag --experimentalJson:

import { defineConfig, logHandlers } from "astro/config";

export default defineConfig({
  experimental: {
    logger: logHandlers.json()
  }
})

astro dev --experimentalJson
astro sync --experimentalJson
astro build --experimentalJson

Custom logger

You can also create your own custom logger by implementing the correct interface:

import { defineConfig } from "astro/config";

export default defineConfig({
  experimental: {
    logger: {
      entrypoint: "@org/custom-logger"
    }
  }
})

import type { AstroLoggerDestination, AstroLoggerMessage } from "astro";
import { matchesLevel } from "astro/logger";

function customLogger(level = 'info'): AstroLoggerDestination {
  return {
    write(message: AstroLoggerMessage) {
      if (matchesLevel(message.level, level)) {
        // write message somewhere
      }
    }
  }
}

export default customLogger;

For more information on enabling and using this feature in your project, see the Experimental Logger docs.

For a complete overview and to give feedback on this experimental API, see the Custom logger RFC.

Experimental: `getFontFileURL()`

You can now load font file data during prerendering using the new experimental_getFontFileURL() helper exported from astro:assets. This makes it possible to use Astro-managed fonts with tools like Satori for generating Open Graph images at build time, something that previously required workarounds with undocumented internal paths.

import type { APIRoute } from "astro";
import { fontData, experimental_getFontFileURL } from "astro:assets";
import satori from "satori";
import { html } from "satori-html";
import sharp from "sharp";

export const GET: APIRoute = async (context) => {
  const fontPath = fontData["--font-roboto"][0]?.src[0]?.url;

  if (fontPath === undefined) {
    throw new Error("Cannot find the font path.");
  }

  const url = experimental_getFontFileURL(fontPath, context.url);
  const data = await fetch(url).then((res) => res.arrayBuffer());

  const svg = await satori(
    html`<div style="color: black;">hello, world</div>`,
    {
      width: 600,
      height: 400,
      fonts: [
        {
          name: "Roboto",
          data,
          weight: 400,
          style: "normal",
        },
      ],
    },
  );

  const pngBuffer = await sharp(Buffer.from(svg))
    .resize(600, 400)
    .png()
    .toBuffer();

  return new Response(new Uint8Array(pngBuffer), {
    headers: { "Content-Type": "image/png" },
  });
};

For more information, see the Fonts API documentation.

Astro v7 alpha

Work on the next major version of Astro has begun. The first Astro 7 alpha includes two big changes:

Vite 8 support

Astro 7 upgrades to Vite 8, the latest major version of the build tool that powers Astro. This is a breaking change for Astro integrations and plugins that depend on Vite internals, but most Astro users should be able to upgrade without any changes to their project code.

Stable Rust compiler

The Rust-based Astro compiler, previously available as an experimental flag (experimental.rustCompiler), is now the default and only compiler in Astro 7. The Rust compiler delivers significantly faster build times compared to the previous Go-based compiler. The experimental.rustCompiler flag is no longer needed and can be removed from your config.

Try it out

The Astro 7 alpha is available for early testing:

npm install astro@alpha

We’d love to hear your feedback! Please report any issues you encounter on GitHub.

Other improvements

allowedHosts for preview servers: Astro’s server.allowedHosts option is now passed down to adapter preview servers, letting you control which hostnames are accepted when running astro preview behind a reverse proxy or with custom local domains. If you’re an adapter author, allowedHosts is now available on the options object passed to your preview entrypoint. See the adapter reference for details.
"jsx" option for compressHTML: The compressHTML option now accepts a "jsx" value that strips whitespace using JSX rules, so whitespace behaves the same way across .astro and .tsx files. Multi-line indented text is collapsed into a single line with spaces between words, while whitespace inside <pre> tags is preserved.