This page is: ${slug}
\n `\n})\n```\n\n### Interactivity\n\nEven though the framework allows for having any library and tool for creating client-side behavior, it's recommended to use lightweight libraries such as:\n\n- [Datastar](https://data-star.dev/) (used internally by the Studio)\n- [Alpine.js](https://alpinejs.dev/)\n\n## Quickstart Example Project\n\nThis example shows how to define a simple **page schema** and render it on the frontend.\n\n### 1. Define the CMS Schema (`./index.ts`)\n\n```ts\nimport {\n createStudio,\n defineBlock,\n defineField,\n defineStructure,\n} from '@alstar/studio'\n\nconst page = defineBlock({\n label: 'Page',\n type: 'page',\n fields: {\n title: defineField({\n label: 'Title',\n type: 'text',\n }),\n slug: defineField({\n label: 'Slug',\n type: 'slug',\n }),\n body: defineField({\n label: 'Body',\n type: 'markdown',\n }),\n },\n})\n\nconst structure = defineStructure({\n page,\n})\n\nawait createStudio(structure)\n```\n\n### 2. Create a Frontend Route (`/pages/[slug].ts`)\n\n```ts\nimport { defineEntry, html, query } from '@alstar/studio'\n\nexport default defineEntry(c) => {\n const slug = c.req.param('slug')\n const page = query.root({ type: 'slug', value: slug })\n\n if (!page) return c.notFound()\n\n return html`\n