Quickstart Example Project

This example shows how to define a simple page schema and render it on the frontend.

1. Define the CMS Schema

// ./index.ts
import { createStudio, defineBlock, defineField, defineStructure } from '@alstar/studio'

const page = defineBlock({
  label: 'Page',
  type: 'page',
  fields: {
    title: defineField({
      label: 'Title',
      type: 'text',
    }),
    slug: defineField({
      label: 'Slug',
      type: 'slug',
    }),
    body: defineField({
      label: 'Body',
      type: 'markdown',
    }),
  },
})

const structure = defineStructure({
  page,
})

await createStudio(structure)

2. Create a Frontend Route

// ./pages/[slug].ts
import { defineEntry, html, query } from '@alstar/studio'

export default defineEntry(c) => {
  const slug = c.req.param('slug')
  const page = query.root({ type: 'slug', value: slug })

  if (!page) return c.notFound()

  return html`
    <main>
      <h1>${page.fields.title.value}</h1>
      <article>${page.fields.body.value}</article>
    </main>
  `
}

3. Run the Project

pnpm run dev

Visit:

• CMS admin: http://localhost:3000/studio
• Frontend page: http://localhost:3000/my-first-page

Create a new page in the CMS, set its slug field to my-first-page, and the frontend will render it automatically.