Pages, layouts, and components

Everything you build in Studio is one of a few kinds of file. Knowing which is which, and when to reach for each, is most of what there is to learn about structuring a Jx site.

Pages

A page is one address on your site. Each file in your project's pages/ folder becomes one URL: the file named index is your home page, about becomes /about , and a file inside a blog/ subfolder becomes /blog/… . Add a page and you've added a place visitors can go; delete it and the address is gone.

Routing details (dynamic addresses, catch-alls) live in Site architecture .

Layouts

A layout is the shared frame around your pages: the header, footer, and everything else that repeats on every page of a section. Layouts live in the layouts/ folder, and each page picks the layout that wraps it, so changing the header in one layout changes it on every page that uses it.

Reach for a layout when you catch yourself rebuilding the same surroundings on a second page.

A layout can sit inside another one: a post layout that adds a byline can itself be wrapped in the base layout that carries the site's navigation and footer. The canvas draws the whole chain, the way the built site does.

Components

A component is a reusable building block: a card, a hero section, a testimonial, a navigation bar. Components live in the components/ folder and can be placed on any page or layout, as many times as you like. Edit the component once and every place it appears updates.

Reach for a component when the same element shows up more than once, or when a page is getting big enough that you want to name its parts. The underlying idea is documented in Components .

Create one

All three, and collections and uploads too, come from one dialog: Add new . Open it with ⌘N , the + at the top of the Site panel , New page in the Content workspace , or Add New… in the command palette. In a browser, which keeps ⌘N for a new window, press ⌘⌥N instead.

1. Pick what to make from the list on the left: Page , Collection , Template (what this page calls a layout), Component or Media . Once your project has a content collection, Entry is there too.

2. Type a name. It is the only thing the dialog requires, and the cursor is already in the field.

3. Adjust the options for that kind, if you want to (below), and click the button, which says what it makes: Create page , Create template , and so on. Enter does the same, and Escape closes the dialog.

The line above the buttons says what will be written before you write it: Saved as pages/pricing.json · opens at /pricing . You never type a file name or an extension; Studio derives them from the name. A name the folder already holds is refused under the field, so nothing is ever overwritten.

In a multilingual project , Page has a Language picker that starts on the site's default language. Choosing another one moves the file into that language's folder, and the line above the buttons shows the new path and URL before you create anything. Until you pick a template yourself, the page starts in its language's own template when your project has one named for the language ( layouts/fr-ca.json for a French page), and in your default template otherwise.

A new page, template or component opens in a tab, ready to edit, and a new component is in the Site panel's Components and the Insert palette straight away. An upload opens the Media workspace with the first file selected. Collections and entries are covered in Content types .

Where is it used?

Once a component is placed on a few pages, the useful question stops being "what does this do?" and becomes "what depends on it?" Select any component instance on the canvas and the inspector answers, right under its settings: Used on 3 pages and 1 other file . Expand it for the list, and click any row to open that file.

The same answer is reachable by name: Find Usages in the command palette, or in the right-click menu on a component.

Before you delete, rename or convert

Every delete, rename and convert confirmation carries that same count, so you can see what an action breaks before you take it, not after.

• Deleting a file tells you how many references stop resolving, and that the files holding them stay exactly where they are. Only the references break.

• Renaming a file tells you how many references will be updated automatically . Studio rewrites them across the project, in pages, layouts, components, project.json , and the front matter of content entries. For a component it renames the element tag to match the new filename too.

Renaming a folder counts too. If a content collection's source points at the folder you are moving, project.json follows it, and so does a file named by project.json 's copy map, which lists the extra files a build copies into the output. The copy map's destinations are paths inside the built site, so those are left alone: moving a file in your project does not move where the build puts it.

• Converting a file to another format tells you the same, in its own words: those references are repaired, but the file itself is not the file it was, so the rename's "nothing else changes" would be untrue. It adds what the file is becoming, and whether it will read back identically.

If Studio cannot count (a backend without project search), the confirmation says so rather than showing a zero. "We could not check" and "nothing uses this" are never displayed as the same thing.

Which one do I want?

• A destination people should be able to visit → a page .

• The frame that repeats around many pages → a layout .

• An element that repeats within pages → a component .

When in doubt, start with a page. You can always select part of it later and grow that part into a component once it earns reuse.

Next

• Design mode : style what you just created on the live canvas

• Edit mode : write content inline

• Site architecture : the folder-by-folder anatomy underneath