Astro 5.16: Boosting DX with SVG Optimization, Enhanced CLI, and Type-Safe Actions

Astro 5.16 has been released, introducing a suite of enhancements focused on developer experience (DX), including experimental SVG optimization, interactive command-line interface (CLI) improvements, and more. This update aims to streamline workflows and boost performance for Astro projects.

To upgrade an existing project, use the automated @astrojs/upgrade CLI tool. Alternatively, you can upgrade manually by running the appropriate 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 now features experimental support for automatic SVG optimization, powered by SVGO. This powerful tool significantly reduces SVG file sizes without compromising visual quality by removing unnecessary metadata, simplifying paths, and eliminating redundant attributes. Integrating SVGO directly into Astro’s asset pipeline means your SVGs are automatically optimized during the build process, leading to reduced bandwidth usage and faster page load times.

To enable this experimental SVG optimization, set the flag in your Astro configuration:

// astro.config.mjs
import { defineConfig } from 'astro/config';

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

By default, SVGO operates with its recommended settings. You can further customize the optimization behavior by providing SVGO configuration options:

// astro.config.mjs
export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        'preset-default',
        {
          name: 'removeViewBox',
          active: false
        }
      ]
    }
  }
});

Further details on configuration options and SVGO plugins are available in the SVG optimization documentation.

Interactive Shortcuts for astro preview

The astro preview command now offers interactive keyboard shortcuts, mirroring the user experience of astro dev. Developers can now use hotkeys directly within the terminal where the preview server is running:

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

These enhancements remove the need to manually open the site in a browser or terminate the process with Ctrl+C, making the preview workflow more intuitive and consistent with the development server experience.

Better Agent Support with astro add --yes

As AI and coding agents become increasingly integral to development workflows, Astro is enhancing its support for automated tooling. The astro add command now includes a helpful hint about using the --yes flag to bypass human-friendly interactive prompts. This ensures agents can automate Astro integrations seamlessly without getting stuck on confirmation requests.

With this update, AI agents and automation tools can effortlessly run commands like:

astro add react --yes

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

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

This empowers agents, whether utilizing Claude Code, Cursor, Copilot, or other AI-assisted tools, to autonomously configure Astro projects. The elimination of interactive confirmations allows for fully automated Astro setups.

ActionInputSchema Utility Type for Type-Safe Actions

Astro Actions now feature the ActionInputSchema utility type, simplifying the extraction and utilization of input schemas from your action definitions. This is particularly valuable for building robust abstractions and creating reusable action handlers.

With ActionInputSchema, you can obtain 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 utility is especially valuable when you are:

• 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 achieve proper type inference without manually duplicating schema definitions.

Other Improvements

• 82 MB Dependency Reduction for Netlify Adapter: The @netlify/functions package has been updated to v5, leading to the removal of 310 transitive dependencies. This significant change reduces the Netlify adapter's dependency tree by 82 MB, considerably decreasing bundle size for users deploying Astro projects with Netlify. (Refer to #14716 for more details).

Bug Fixes

Ongoing efforts have focused on addressing issues since the 5.15 release. A comprehensive list of all fixes can be found in the changelog.