Astro recipes

See guided examples of adding features to your Astro project.

Official Recipes

Section titled Official Recipes

Astro’s official recipes are short, focused how-to guides that walk a reader through completing a working example of a specific task. Recipes are a great way to add new features or behavior to your Astro project by following step-by-step instructions!

• Installing a Vite or Rollup plugin

  Learn how you can import YAML data by adding a Rollup plugin to your project.

• Analyze bundle size

  Learn how to analyze the bundle generated by Astro using `rollup-plugin-visualizer`.

• Build forms with API routes

  Learn how to use JavaScript to send form submissions to an API Route.

• Build HTML forms in Astro pages

  Learn how to build HTML forms and handle submissions in your frontmatter.

• Build a custom image component

  Learn how to build a custom image component that supports media queries using the getImage function.

• Use Bun with Astro

  Learn how to use Bun with your Astro site.

• Verify a Captcha

  Learn how to create an API route and fetch it from the client.

• Call endpoints from the server

  Learn how to call endpoints from the server in Astro.

• Build your Astro site with Docker

  Learn how to build your Astro site using Docker.

• Dynamically import images

  Learn how to dynamically import images using Vite's import.meta.glob function.

• Add icons to external links

  Learn how to install a rehype plugin to add icons to external links in your Markdown files.

• Add i18n features

  Use dynamic routing and content collections to add internationalization support to your Astro site.

• Create a dev toolbar app

  Learn how to create a dev toolbar app for your site.

• Add last modified time

  Build a remark plugin to add the last modified time to your Markdown and MDX.

• Add an RSS feed

  Add an RSS feed to your Astro site to let users subscribe to your content.

• Add reading time

  Build a remark plugin to add reading time to your Markdown or MDX files.

• Share state between Astro components

  Learn how to share state across Astro components with Nano Stores.

• Using streaming to improve page performance

  Learn how to use streaming to improve page performance.

• Style rendered Markdown with Tailwind Typography

  Learn how to use @tailwind/typography to style your rendered Markdown.

• Share state between islands

  Learn how to share state across framework components with Nano Stores.

Community Resources

Section titled Community Resources

Find more recipes written and submitted by the community at Astro Tips.