Tutorial: a blog with content collections

In this tutorial you give your site a blog the structured way: a posts content type with a field schema, three entries created from it, a round of bulk editing in Grid mode, and a Blog page that lists every post from live data. Add a fourth post next month and the page updates itself.

About 20 minutes. Before you start:

• Have a project open in Jx Studio. Your first project gets you there.

• Knowing your way around the canvas and panels helps; Tutorial: your first interactive component is the gentlest way in, but isn't required.

1. Create the posts content type

A content type is your CMS schema: where a collection's entries live, and what fields each one carries.

1. Open the Settings menu in the Command Bar and pick Open Project Settings › Content Types . ( ⌘K and Open Project Settings gets you to the same place.)

2. Click New content type at the bottom of the type list.

3. Type Posts and click Create .

You should see the new type selected, named posts , with a matching source folder ( content/posts/ ) and an empty field schema ready to fill.

2. Give it fields

Add three fields. For each one, click Add Field , type the name, pick its type, and click Add :

1. title , type string , with the Required switch on.

2. date , type string , format date , so entries get a proper date field.

3. description , type string .

You should now see three field rows in the schema. These become the form every post fills in. Leave Source and Format as they are, and close Settings. Everything else the builder can do, from nested fields to references between types, is in Content types .

3. Create your first post

1. Press ⌘N to open Add new (in a browser, ⌘⌥N ).

2. Choose Entry in the list on the left. It appears now that your project has a content type, and Posts is already picked as its collection.

3. Type Hello World and click Create entry .

Studio creates content/posts/hello-world.md with every schema field pre-filled (the title with the name you typed, the rest with a sensible blank) and opens it in the Content workspace , where Posts is now listed in the Collections panel on the left.

4. Fill it in

The post opens on the canvas, inside your site's template: the banner above it says the text is yours to write and the layout is locked. Its fields are on the right, in the Inspector's Entry tab:

1. Check that title says Hello World .

2. Pick today in the date field.

3. Give description a sentence: The first post on my brand-new blog.

Then click into the page below and write a paragraph or two of body text.

You should see the fields filled in and your words on the page. See Write an entry for the rest of the Entry tab.

5. Add two more posts

Repeat step 3 twice, naming them Grid mode rocks and Hello again (or anything you like). This time skip the other fields on purpose; you'll fill them in bulk next.

You should now have three entries under Posts in the Collections panel, two of them with nothing but a title.

6. Open the collection as a grid

Editing entries one file at a time doesn't scale, so Studio can open the whole collection as a spreadsheet:

1. Click Posts in the Collections panel, then click Edit in grid in the toolbar above the list. (The same action is on the right-click menu of the content/posts folder in the Files panel, as Edit Collection in Grid .)

2. The grid opens in the Content workspace, beside your posts. A view you save there is listed under Posts in the Collections panel next time.

You should see one row per post and one column per schema field, with the Path column pinned at the left, and your two blank rows plain to see.

7. Fill in the blanks and save

1. Double-click each empty title cell and type one. Cells are typed, so date cells give you a date field.

2. Fill in the date and description cells the same way. Edited cells are highlighted, and nothing touches your files yet.

3. Click Save , which counts your pending changes, or press ⌘S (macOS) or Ctrl+S (Windows/Linux).

Studio writes every change in one batch and reports what saved. Ranges, fill-down, and find & replace are covered in Grid mode .

8. Create the Blog page

1. Press ⌘N to open Add new again (in a browser, ⌘⌥N ), keep Page , type Blog and click Create page . Studio writes the page and opens it at your site's /blog address.

2. In the View control on the pane's context bar, click Design .

You should see the empty page on the design canvas, once per breakpoint.

9. Design one post card

Design a single card, which the repeater will copy per post:

1. Press ⌘K and run Show Insert . With nothing selected, click the article card.

2. With the article selected, click the h3 card, then the p card twice. Each new element lands inside the selection.

3. Select each of the three in turn and give it placeholder text via Text Content in the Inspector's Content tab: Post title , A line about the post. , and 2026-01-01 .

You should see one plausible-looking post card on the canvas. Style it as much or as little as you like; Design mode covers the tools.

10. Query the collection from state

The page needs the posts as data it can render:

1. Click Data on the Navigator rail to open the Data panel, then click the + Add… picker.

2. Pick ContentCollection , listed with the sources your project's imports and extensions provide.

3. Rename the new entry to posts (type the name and press Enter ).

4. Set contentType to posts , and add a sort rule on the date field with order desc , so the newest post lists first.

Open the Data panel and you should see posts worth Array(3) , which is your three entries, live. Filters, limits, and the other sources are covered in Data sources .

11. Repeat the card for every post

1. Right-click the article, on the canvas or in Outline , and choose Repeat… .

2. In the dialog, set Items source to posts .

3. Click Create Repeater .

Your card is now the repeater's template , marked ↻ in Outline. On the design canvas it still renders once, which is the template view. Everything about repeaters lives in Repeaters .

12. Bind the card to each post's fields

Inside the template, each post's data is in scope:

1. Double-click the heading, select the placeholder text, and delete it.

2. Click Insert data on the floating toolbar and pick item.data.title . A live placeholder lands in the text.

3. Do the same for the two paragraphs: item.data.description and item.data.date .

Each text now holds a placeholder that fills itself from the current post. (A collection entry's schema fields live under item.data ; item and index are there too.)

13. Preview and save

Pick Preview in the View control on the context bar.

You should see the single card expand into three, newest first, each filled in from its own post. Switch the View control back to Design , then save your open documents with ⌘S / Ctrl+S . When you're ready, publish the lot from the Publish workspace's Review changes ( ⌘5 ). See Source control .

Give each post its own page

The listing links nowhere yet, and that's deliberate: one page per post is the job of a dynamic page , a single page file with a parameter in its name (like [slug] ) that the build expands into one page per entry of the collection. That wiring lives in the page's own format rather than a Studio panel today; Routing shows the exact file, and Content collections covers looking up "the entry this URL names". Once a dynamic page exists, Studio meets you halfway: opening it puts a picker per URL parameter in the context bar's resolving with popover, so the canvas previews a real post instead of a placeholder.

What you built

A complete content pipeline, end to end:

• A content type ( posts ) gives you schema-backed entries with one-click creation from New post in the Content workspace.

• Three entries , edited both one at a time (the Inspector's Entry tab) and in bulk ( Grid mode ).

• A ContentCollection state entry is the collection as live, sorted data on a page.

• A repeater whose template binds item.data fields is one designed card, rendered per post.

Next steps

• Turn the post card into a reusable component with Working with components .

• Add an author type and point posts at it with a reference field: Content types and Relationships .

• Give posts their own pages with a dynamic route, described in Routing .

• Publish it, following Publish .