Collections

A blog's posts, a team's members, open jobs, and FAQs are collections of records. Each record is a Markdown file with its fields at the top, and the studio shows them as a table and each one as a form. A page lists them, and a page per record shows each one.

Declare a collection#

A collection is declared once, in a component file, with the fields its records have:

import { collection } from "mockly"; export const posts = collection(  "blog",  {    title: { type: "text", required: true },    published: { type: "date", required: true },    topic: { type: "choice", options: ["Product", "Statistics"] },    tags: "list",  },  { sort: "-published" },);

Its name, blog, is its folder: its records are the Markdown files in content/blog/.

Write a record#

Each record is a file, its fields between --- lines at the top, and its text under them:

---title: Hello, worldpublished: 2026-10-30topic: Producttags:  - news---Our first post, in **Markdown**.

The file's name is the record's slug, part of its page's address: lowercase letters, digits, and dashes.

Pages from records#

posts is a list of the records, newest first, as sort says. A page lists them like any list:

import { For, Page } from "mockly";import { posts } from "../../components/blog"; export default function Blog() {  return (    <Page title="Blog">      <ul>        <For each={posts}>          {(post) => (            <li>              <a href={`/blog/${post.slug}`}>{post.title}</a> · {post.published}            </li>          )}        </For>      </ul>    </Page>  );}

And a page with a [slug] makes a page per record, with <Markdown of={post} /> showing its text:

import { Markdown, Page } from "mockly";import { posts } from "../../components/blog"; export const paths = posts.map((post) => post.slug); export default function Post({ slug }: { slug: string }) {  const post = posts.find((p) => p.slug === slug);  return (    <Page title={post?.title ?? "Post"}>      <h1>{post?.title}</h1>      <p>{Math.max(1, Math.round((post?.words ?? 0) / 230))} min read</p>      <article class="prose">        <Markdown of={post} />      </article>    </Page>  );}

Each record has its fields, null for one that isn't required and isn't there, and its own slug, collection, and words, how many words its text has.

Fields#

A field written as its type, tags: "list", isn't required. Written out, it can be, and can have a label for the studio's form: { type: "text", required: true, label: "Headline" }.

sort puts records in order of a field, with - first for newest or largest first; records without it come last. Without sort, they're in order of slug.

In the studio#

Collections, in the editor's sidebar, lists each collection's records, newest first. New makes one from its title: its file is named after it, and today's date goes in the dates it needs. A record opens as a form of its fields, above its text, with the Markdown toolbar. Show shows its page in the preview. Its menu deletes it, asking first.

Content editors can make, write, and delete records too. A record reaches visitors when the site is published, as every file does, and History keeps each version.

Rules#

Records are checked against their collection's fields when the site is checked, each problem where it's written.