Build Astro sites visually

Lay out pages, adjust styles, manage collections and set up components, on your machine, writing your files.

Download See how it works

Nothing to learn from scratch
Works with the site you have
Free and open source

StackiHomelocalhost:4321main

Navigator

BodySectionContainerEyebrowHeadingParagraphButtonImage

Body/Container/Eyebrow

Field StudioEyebrow

The wild, scanneddown to the spore

Request a scanThe library

Field Studio

The wild, scanneddown to the spore3248

Request a scanThe library

Desktop · 1440

Field StudioThe wild, scanned

Tablet · 768

Field StudioThe wild, scanned

Phone · 375

Field StudioThe wild, scanned

main3 changes

src/pages/index.astro

src/components/Hero.astro

src/styles/global.css

Styled the hero

Commit and push

StyleSettings

Button

labelRequest a scan

href/request

variantprimary

sizemd

newTabFalse

Settings2

Pull data from any source

A collection in your project, a JSON file, or any API. Bind any element to any part of it, and the query is written for you.

NASA Image Libraryimages-api.nasa.gov/searchThe Met Collectioncollectionapi.metmuseum.org/public/collection/v1TheMealDBthemealdb.com/api/json/v1/1/lookup.php

asset.data.titlebound to the card's title

Set the design system

Variables and classes are all easy to read and update. Style your site visually.

Edit Astro's Content Collections

JSON data, frontmatter arrays, project configs, and more get added to CMS fields you can easily edit.

titlestringcenterstringdatestringnasa_idstring

titlestringartiststringyearnumbermediumstring

namestringcategorystringcuisinestringidnumber

Conditional Component Props

Pick a variant and the panel offers exactly the props that variant takes. It's all read from TypeScript, so your agents have the same constraints.

variant

plaincoverstacked

theme

image

AssetURL

as08-14-2383~medium.jpg1280 x 1280px65 KB

DP-42549-001.jpg599 x 477px216 KB

wvpsxx1468256321.jpg700 x 700px122 KB

https://images-assets.nasa.gov/image/as08-14-2383/as08-14-2383~medium.jpghttps://images.metmuseum.org/CRDImages/ep/web-large/DP-42549-001.jpghttps://www.themealdb.com/images/media/meals/wvpsxx1468256321.jpg

Apollo 8 Mission image, Earth over the horizon of the moon