Is the Astro playground free?

Yes. The Astro playground is completely free with no sign-up — write, run and share Astro code in your browser.

Which Astro features work in the browser preview?

The browser preview supports Astro frontmatter, props, scoped styles, local .astro imports and client scripts. Framework islands, integrations and server APIs require the downloaded Astro project.

Do I need to install anything to run Astro online?

No. The live preview compiles and runs in your browser. After downloading the project, install its dependencies before running it locally.

Can I share or export my Astro code?

Yes. Share creates a link to your project. Download exports an Astro project ZIP with .astro source files and configuration.

Does the editor support autocomplete and live preview?

It does — a Monaco-powered editor with autocomplete and formatting, a live preview that updates as you type, and a console for logs and errors.

Astro Playground - Online .astro Editor with Live Preview

6 files

Browser preview

Astro 7ReadyASTROLn 1Ln 1, Col 1

About the Astro playground

Online Astro playground with real .astro components, frontmatter, scoped styles, local imports, client scripts, and live browser preview.

v7.1.6Astro runtime

src/pages/index.astroentry file

projectworkspace

livebrowser preview

How it works

Write

Choose a source file from the explorer and edit it with Monaco.

Dependencies

Edit package.json to add browser-compatible npm packages or change versions. Preview packages load from esm.sh. Successful previews save resolved versions for ranges and tags with your draft and shares; change the range to resolve again. Scripts and build plugins run only in downloaded projects.

Preview

Auto-run updates the browser preview as you type. Turn it off to run your changes manually.

Inspect

Use the console for browser logs and errors, or evaluate a command against the preview.

Share or download

Share creates a snapshot link. Download exports the source so you can continue locally.

src/pages/index.astro

---
import CounterCard from '../components/CounterCard.astro'
import '../styles/global.css'

const features = ['Real .astro syntax', 'Scoped styles', 'Local components']
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta
      name="description"
      content="A real Astro page compiled in the browser."
    />
    <title>Astro Playground</title>
  </head>
  <body>
    <main class="app-shell">
      <p class="eyebrow">Astro 7 · Browser preview</p>
      <h1>Build content-first pages</h1>
      <p class="intro">
        Edit Astro components, import local files, and use client scripts for
        focused interaction.
      </p>

      <ul class="feature-list">
        {features.map((feature) => <li>{feature}</li>)}
      </ul>

      <CounterCard start={2} />
    </main>
  </body>
</html>

AstroAstro Playground

Write

Dependencies

Preview

Inspect

Share or download

src/pages/index.astro

How to use the Astro playground

Features

Running and inspecting code

Browser playground limits

Which Astro features work in the browser preview?

Run

Editing

Navigation

Selection

Console shortcuts