Astro 5.16 | Astro

Astro 5.16 brings experimental SVG optimization, interactive CLI improvements, and a collection of DX enhancements.

Explore what’s new in this release:

SVG optimization with SVGO
Interactive shortcuts for astro preview
Better agent support with astro add --yes
ActionInputSchema utility type for type-safe actions

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 optimization with SVGO

Astro 5.16 adds experimental support for automatic SVG optimization using SVGO, a powerful tool that reduces SVG file size without compromising quality.

SVG files can often be optimized significantly—removing unnecessary metadata, simplifying paths, and eliminating redundant attributes. By integrating SVGO into Astro’s asset pipeline, your SVGs are now automatically optimized during the build process, reducing bandwidth and improving page load times.

Enable the experimental SVG optimization flag in your Astro config:

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    svgo: true,
  },
});

By default, SVGO runs with its recommended settings. You can customize the optimization behavior by passing SVGO configuration options:

export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        'preset-default',
        {
          name: 'removeViewBox',
          active: false
        }
      ]
    }
  }
})

See the SVG optimization documentation for more details on configuration options and SVGO plugins.

Interactive shortcuts for `astro preview`

The astro preview command now supports keyboard shortcuts, making it easier to control the preview server. Similar to astro dev, you can now use the following hotkeys in the terminal where the server is running:

> Local:     http://localhost:4321/
- press o + enter to open in browser
- press q + enter to quit

These DX improvements eliminate the need to manually navigate to your site in a browser or terminate the process with Ctrl+C, making the preview experience more intuitive and consistent with the development server workflow.

Better agent support with `astro add --yes`

As coding agents and AI tools become more prevalent in development workflows, Astro is making it easier to work with them. The astro add command now displays a helpful hint about skipping human-friendly prompts with the --yes flag, making it clear how agents can automate Astro integrations without getting stuck on interactive prompts.

With this update, AI agents and automation tools can seamlessly run:

astro add react --yes

When you run astro add interactively, you’ll see a helpful hint on the first interactive prompt:

astro add react
# Output:
#   To run this command without prompts, pass the --yes flag

This empowers agents to configure Astro projects autonomously, whether you’re using Claude Code, Cursor, Copilot, or any other AI-assisted development tool. No more getting stuck waiting for interactive confirmations—agents can now fully automate your Astro setup.

`ActionInputSchema` utility type for type-safe actions

Astro Actions now include the ActionInputSchema utility type, making it easier to extract and work with the input schema from your action definitions. This is particularly useful when building abstractions or creating reusable action handlers.

With ActionInputSchema, you can get the exact type of your action’s input schema:

import { type ActionInputSchema, defineAction } from 'astro:actions';
import { z } from 'astro/zod';

const contactAction = defineAction({
  accept: 'form',
  input: z.object({
    email: z.string().email(),
    message: z.string(),
  }),
  handler: ({ email, message }) => {
    // Handle the contact form
    return { success: true };
  },
});

// Extract the schema type
type ContactSchema = ActionInputSchema<typeof contactAction>;

// Get the actual input type
type ContactInput = z.input<ContactSchema>;
// Result: { email: string; message: string }

This is especially valuable when you’re:

Creating wrapper functions around actions.
Building form submission abstractions.
Sharing action types across your codebase.

ActionInputSchema makes it possible for developers less fluent in advanced TypeScript patterns to still get proper type inference without manually duplicating your schema definitions.

Other improvements

82 MB dependency reduction for Netlify adapter – Updated @netlify/functions to v5, removing 310 transitive dependencies and shaving 82 MB from the Netlify adapter’s dependency tree. This significantly reduces bundle size for users deploying with Netlify. (#14716)