Dynamic routes

Editing a page that renders many entries, and choosing which one the canvas shows.

A page like src/pages/blog/[...id].astro is one template that renders many pages. Stacki opens the template, and renders it against one entry.

The entry picker

When the open page’s route contains […], a picker appears in the title bar listing the entries the route produces. Choosing one re-renders the canvas against that entry’s data.

You are always editing the template. The entry only changes the data it is drawn with, which is the point: you are checking a layout against real content, not against one lucky post.

The URL field shows the address of the entry being previewed, not the pattern, so opening it in a browser goes somewhere real.

Data in scope

getStaticPaths has already run in the dev server, so its props are exactly what Astro.props holds. The data picker reads from that, which is why the values it lists are the real ones.

Arrows in the picker step through entries from inside the field, moving the canvas and the sample values together.

When a route produces nothing

A route whose getStaticPaths returns an empty list has no entry to render. Stacki says so rather than showing the site’s 404 and leaving you to work out why the page looks wrong.