More Recipes

See guided examples of adding features to your Astro project.

Official Recipes

Section titled Official Recipes

• Share state between Islands

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

• Add an RSS feed

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

• Installing a Vite or Rollup plugin

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

• Build a custom image component

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

• 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.

• Use Bun with Astro

  Learn how to use Bun with your Astro site.

• Call endpoints from the server

  Learn how to call endpoints from the server in Astro.

• Verify a Captcha

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

• 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.

• Add last modified time

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

• 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.

Community Resources

Section titled Community Resources

Add your own here! See our recipes contributing guide for more info.

• Use a dynamic filename when importing images
• Add animated page transitions with Swup
• Use UnoCSS in Astro
• Build a table of contents from Astro’s Markdown headings
• Create a Remark plugin to remove runts from your Markdown files
• Add searching to your site with Pagefind
• Add searching to your site with Fuse.js
• Get VSCode, ESLint & Prettier working with Astro
• Enhance your Astro builds: modify HTML files post-build
• Add dark mode to Astro with Tailwind CSS
• Generate localized sitemaps for your Astro and Storyblok project
• Integrate Prettier with Astro and Tailwind CSS
• Add an RSS feed to Astro using Storyblok’s stories
• Using tRPC in Astro
• How to make your Astro website multilingual with Crowdin: Astro localization guide
• Add blog post images to your Astro RSS Feed
• Setting up micro-frontends with Astro
• Add username and password authentication with Lucia
• Add Github OAuth with Lucia
• Integrating Sentry with Astro
• Set Up Draft Pages Effectively in Astro with Config-Driven Content Authoring
• How to Send Any Data to Your RSS Feed? A Guide with Astro + RSS