# Astro recipes

> Short, focused how-to guides.

See guided examples of adding features to your Astro project.

## Official Recipes

[Section titled “Official Recipes”](#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](/en/recipes/add-yaml-support/)

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

* ### [Analyze bundle size](/en/recipes/analyze-bundle-size/)

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

* ### [Build a custom image component](/en/recipes/build-custom-img-component/)

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

* ### [Build forms with API routes](/en/recipes/build-forms-api/)

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

* ### [Build HTML forms in Astro pages](/en/recipes/build-forms/)

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

* ### [Use Bun with Astro](/en/recipes/bun/)

  Learn how to use Bun with your Astro site.

* ### [Call endpoints from the server](/en/recipes/call-endpoints/)

  Learn how to call endpoints from the server in Astro.

* ### [Verify a Captcha](/en/recipes/captcha/)

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

* ### [Customize file names in the build output](/en/recipes/customizing-output-filenames/)

  Learn how to change the default naming pattern for your built assets like JavaScript, CSS, and images in Astro using Vite's Rollup options.

* ### [Build your Astro site with Docker](/en/recipes/docker/)

  Learn how to build your Astro site using Docker.

* ### [Dynamically import images](/en/recipes/dynamically-importing-images/)

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

* ### [Add icons to external links](/en/recipes/external-links/)

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

* ### [Add i18n features](/en/recipes/i18n/)

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

* ### [Create a dev toolbar app](/en/recipes/making-toolbar-apps/)

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

* ### [Add last modified time](/en/recipes/modified-time/)

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

* ### [Add reading time](/en/recipes/reading-time/)

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

* ### [Add an RSS feed](/en/recipes/rss/)

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

* ### [Share state between islands](/en/recipes/sharing-state-islands/)

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

* ### [Share state between Astro components](/en/recipes/sharing-state/)

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

* ### [Using streaming to improve page performance](/en/recipes/streaming-improve-page-performance/)

  Learn how to use streaming to improve page performance.

* ### [Style rendered Markdown with Tailwind Typography](/en/recipes/tailwind-rendered-markdown/)

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

## Community Resources

[Section titled “Community Resources”](#community-resources)

Find more recipes written and submitted by the community at [Astro Tips](https://astro-tips.dev).