Astro for Docs

Shipping Zero JavaScript with Astro

Astro is an all-in-one web framework designed for building content-focused websites. With this approach in mind, it delivers an incredible developer experience to build server-first, intuitive to use, flexible and fully-featured websites. Anyone who knows a little bit of HTML and CSS all the way up to seasoned developers can leverage Astro’s opt-in complexity framework to build for the web.

Astro’s biggest perks

Let’s see what are the basics that Astro brings to the table, Astro is…

  • easy to use and by design less complex than any other UI framework or language (any valid HTML is a valid Astro component, see Why Astro - Easy to Use),
  • fast by default shipping ZERO Javascript out of the box, it takes an MPA approach loading on average 90% less JavaScript (see MPAs vs SPAs),
  • incredibly featured, flexible and UI-agnostic supporting several frameworks (supporting React, Preact, Svelte, Vue and more), an easier JSX, scoped CSS, file-based routing, data-fetching, and a lot more (see Integrations).

We’ve built a sample project called Astro for Docs (see source code: GH: Astro for Docs) to showcase how straight-forward and flexible it is to use Astro for Beginners.

What’s in the menu for today?

After playing around with this project, it turns out you CAN REALLY build a content-focused website with ZERO JavaScript using Astro. Based on what we’ve learned, here’s what we’d like to show you:

  1. Writing in “Astro” as a language to write Astro Components
  2. Use Markdown files as pages with Astro’s MDX and TailwindCSS integrations.
  3. Design nested layouts for better developer experience.
  4. Leverage Astro’s Runtime APIs to build components.

We ran npm create astro@latest with TypeScript and a blank, empty project.

Noticed something wrong? Edit this page 🙏🏼