# Instagram feed in Astro: widget, build-time JSON and an on-demand endpoint
**Status, checked 2026-09-18:** real Instagram posts reach an Astro site through the ElectricBlaze widget today. For Astro, `npx electricblaze add instagram-feed` writes demo JSON and types only; the JSON API with real data ships in 0.2.
> How to show Instagram posts on an Astro 5, 6 or 7 site deployed to Cloudflare or Netlify, what survives a fully static build, and where the Instagram token is allowed to live.
Canonical: https://electricblaze.com/developer/instagram-feed/astro.html
## At a glance
- **Use it when:** the site is built with Astro 5 or newer, deploys to Cloudflare, Netlify or any static host, and one section should list recent Instagram posts.
- **Do not use it when:** real posts must be baked into the prerendered HTML today. The widget draws in the browser and the CLI JSON is sample data, so before 0.2 only your own build-time code does that.
- **What the human does:** the site owner creates an Instagram Feed widget at [a.electricblaze.com](https://a.electricblaze.com/), connects the Instagram account there and sends you the widget id. No Meta developer app is involved.
- **Next step:** paste the widget component below if a widget id exists. Otherwise run `npx electricblaze@0.1.2 add instagram-feed --json` and build the grid from the demo JSON.
## Three options for Astro
Astro renders at two moments: during the build and, with an adapter, on each request. The widget adds a third moment, the visitor's browser. Each option below lives in one of them.
| Option | Posts | Runs at | Needs from the owner | Weak spot |
|---|---|---|---|---|
| ElectricBlaze widget | Real, today | Visitor's browser | A widget id from the dashboard | Posts are not in the static HTML; the Free plan includes 1000 views a month ([pricing](https://electricblaze.com/pricing.html)) |
| CLI demo JSON | Sample data until 0.2 | Build | Nothing | Twelve fixed posts from a fictional coffee roaster |
| Your own Graph API code | Real, today | Build or request | A Meta app, a professional account, a token | The token lasts 60 days and `media_url` links expire |
Pick the widget when the owner wants real posts soon and nobody will look after a Meta app. Pick the demo JSON when the layout comes first and the account can wait. Pick your own code when posts have to exist in the HTML at build time.
## The widget as an Astro component
The owner copies a two-line embed from the dashboard:
```html
```
Wrap it in a component and mark the script `is:inline`. Astro processes and bundles `
```
Drop `` into any page or layout. The grid appears once the page has loaded. Columns, rows, captions and the choice between gallery and slider are chosen in the dashboard, so the component takes no layout props.
The loader reads the id from the first class only. Your own classes may follow it, never precede it.
## View Transitions with ClientRouter
With `` from `astro:transitions` in the layout, Astro fetches the next page and replaces the whole `` instead of doing a full load. We read `widget.js` 0.0.2 on 2026-09-18 to check how it copes:
- It scans the document when the DOM is ready, then watches it with a MutationObserver (childList, subtree). The observer sits on `document` itself, so a swapped-in `` that carries a widget container is noticed and mounted.
- Astro may execute an inline script again when a visitor comes back to a page. That costs nothing: the loader checks for `window.electricblaze` first and a second copy exits.
You therefore need neither `data-astro-rerun` nor `transition:persist` for the widget. Moving the `