Online Astro playground with real .astro components, frontmatter, scoped styles, local imports, client scripts, and live browser preview.
About Astro
Online Astro playground with real .astro components, frontmatter, scoped styles, local imports, client scripts, and live browser preview.
Runtime: v7.1.6
Features
Astro 7 project export
Official Astro WASM compiler
Astro Frontmatter and Props
Scoped Component Styles
Local .astro Imports
Client Script Interactions
Browser playground limits
• Code runs in a sandboxed browser preview, without Node.js, a backend, or private environment variables.
• The Console prompt can inspect browser globals and the rendered DOM, but not variables scoped inside ES modules or component state.
• Download the project when you need build plugins, server APIs, native modules, or a production dependency workflow.
The browser preview supports Astro components, frontmatter, props, scoped styles, local imports and client scripts. Download the project to use framework islands, integrations or server APIs with Astro's development server.
How to use the Astro playground
Edit a source file from the project explorer — the live preview recompiles automatically.
Add, rename, duplicate or delete project files as needed. Update affected imports after renaming or moving a file.
Use the console for logs and errors, and Format to tidy the active file.
Share the complete project or download an Astro project ZIP with .astro source files and configuration.
Execution
Run code
Ctrl / ⌘+Enter
Save & run
Ctrl / ⌘+S
Editing
Undo
Ctrl / ⌘+Z
Redo
Ctrl / ⌘+Shift+Z
Select next occurrence
Ctrl / ⌘+D
Delete line
Ctrl / ⌘+Shift+K
Move line up / down
Alt+↑ / ↓
Copy line up / down
Alt+Shift+↑ / ↓
Toggle comment
Ctrl / ⌘+/
Indent line
Ctrl / ⌘+]
Outdent line
Ctrl / ⌘+[
Navigation
Find
Ctrl / ⌘+F
Find & replace
Ctrl / ⌘+H
Go to line
Ctrl / ⌘+G
Go to symbol
Ctrl / ⌘+Shift+O
Selection
Select all
Ctrl / ⌘+A
Select line
Ctrl / ⌘+L
Select all occurrences
Ctrl / ⌘+Shift+L
Terminal
Interrupt / kill process
Ctrl+C
Send EOF (close stdin)
Ctrl+D
Console shortcuts
Press Enter to evaluate, ↑ and ↓ to browse command history, and Ctrl/⌘ + L to clear the console.
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>
Frequently asked questions
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.