Data Sources

A data source is content your pages show: posts from your CMS, a collection of entries you edit in PhantomStudio, or a file such as a team list. You connect or create a source once, then show it on any page with the Builder.

Kinds of data sources

Pages can also hold their own small lists, such as three features or four prices. You make those in the Builder with + List. See Design Mode and the Builder.

The Data panel

Open it from the activity bar (Data, ⌥3 in Design mode) or with Site ▾ › Data.

At the top, Connections lists each connected CMS with a status dot, a settings button and a link to its admin. A CMS that isn't connected yet has a Connect WordPress or Connect Sanity button.

Below, your sources are grouped by kind: Connected content, Content collections, Data files and APIs. Each row says how many pages use it, or "Not used on a page". Click a row to see:

• Its Fields (and Custom fields, for WordPress ACF fields).
• Used on: the pages that show it. Click one to open it.
• Actions: Add to the page you're on, Edit entries (collections), Edit in WordPress ↗ or Edit in Sanity ↗, Open file (data files) or See the code (APIs).
• Under More…: Page for each entry, Make list page and Edit fields for collections; Connection settings for a CMS, and Browse items for WordPress content.

The + button opens the catalog of sources you can add. The refresh button reads your pages again to update where each source is used.

Connect WordPress

Click + in the Data panel and choose WordPress, or open Site ▾ › WordPress. Connecting is covered in Connecting WordPress.

Once connected, the Data panel lists Posts, Pages and each custom post type with its number of items, its built-in fields and its ACF fields. It also tells you when ACF fields are hidden from the REST API. In the Builder, an ACF repeater is a list you can repeat, and a group's fields read as Venue › City.

Connect Sanity

Click + in the Data panel and choose Sanity. Fill in:

PhantomStudio reads your published documents and finds their fields from recent documents. Sanity content is read-only here: edit it in Sanity Studio.

WooCommerce

WooCommerce projects get Products and Product categories as data sources, with the store's fields (price, sale price, stock, images, categories…). Setup is covered in WooCommerce Setup.

Content collections

A content collection is a list of entries with the same fields, such as events, team members, recipes or FAQs. Entries are files in src/content/<collection>/, so they're part of your project and go live when you publish.

Create a collection

1. Click + in the Data panel and choose Content collection.
2. Enter a Name (Events) and what One item is a (Event).
3. Add Fields, each with a type: Text, Long text, Number, Yes / no, Date, Image URL, List of text, List of items or Group.
4. Click Create collection.

List of items holds several items with their own fields, such as an event's agenda. Group holds a few related fields, such as a venue's name and city. To change fields later, use More… › Edit fields. Entries keep their values when you rename or remove a field.

Edit entries

Edit entries opens a form built from the collection's fields. Add, edit, delete and reorder entries there; pages show them in the order you set. The Content field holds the entry's text and accepts Markdown. Save with ⌘S.

You can also double-click an entry's text in the preview to change it in place.

Data files

Click + in the Data panel and choose Data file, then pick a JSON or CSV file (a spreadsheet saved as CSV works). The file goes in src/data/. Keep data files under 5 MB: they ship with every page that imports them.

Show content on a page

Add to page

The quickest way to show a source is a list of cards, each bound to one item:

1. Open the page, then click Add to page name on a source in the Data panel. You can also use List from data in the Add panel, or the Data group at the top of the Builder tree.
2. In the Add to page dialog, pick what to Show, How many, the Order (Newest first, Oldest first, Title A–Z) and the Layout (Grid of cards or List).
3. Click Add to page.

The cards are ordinary elements: restyle them like anything else. New items show up on their own.

Bind content yourself

You can also wire data into any element:

• Repeat for each… shows an element once per item of a list.
• Show if… shows an element only when a condition is true.
• In text fields and component props, type / or use From data to insert a field. It shows as a chip such as event › title.

All three are described in Design Mode and the Builder.

To check what's bound to what, turn on X-ray in the preview toolbar. It outlines everything that shows data, colored by where it comes from.

Template pages

A template page is one page design that makes a page for each entry, such as src/pages/events/[slug].astro for /events/summer-party, /events/workshop and so on.

A page for each collection entry

1. In the Data panel, open the collection and choose More… › Page for each entry.
2. Set the Address, such as /events/<entry>.
3. Optionally check Also a page listing them all (at /events) and Point links to the built-in page … at the new pages.
4. Click Make the page.

PhantomStudio writes the template page in your site's layout, already bound to the entry's fields. Design it in the Builder like any page. New entries get their page when the site is published. Once the page exists, the same menu item reads Open entry page.

Each collection also has built-in pages at /collections/<name>.

Previewing a template page

When you open a template page, the preview shows one of its entries. The preview toolbar gets a pager: previous, next, or pick an entry by its title. It works for collection entries and for template pages that show WordPress posts, pages or a custom post type.

When content changes go live

To redeploy static pages when content changes in your CMS, use a deploy hook.

Next steps

• Page Rendering: Static, Dynamic and Dynamic, cached
• Design Mode and the Builder: Repeat, Show if and data in text
• Browsing WordPress Data: explore your WordPress content