---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio"
locale: en
meta:
  "og:title": "Academy Article"
---

[Go to home](https://academy.laioutr.com/en)

- [For developers](https://academy.laioutr.com/en/bereiche/for-developers)

- [Developer start](https://academy.laioutr.com/en/leitfaeden/developer-start)

- [Define custom Sections and Blocks for Studio](https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio)

# Define custom Sections and Blocks for Studio

Every Section and Block is a Vue file with an exported definition, created with defineSection or defineBlock. It sets the component name, Studio metadata, fields and slots, and Studio builds its picker and sidebar from it.

## Before you start

<dl>

<dt>Plan</dt>
<dd>Any plan, including Starter</dd>

<dt>Role</dt>
<dd>Developer with access to the app repository</dd>

<dt>Duration</dt>
<dd>15 min</dd></dl>

### Prerequisites

- Custom app based on the App Starter
- Running playground connected to Studio

Last reviewed on October 15, 2026

Sections are the large page areas such as a hero or product grid, Blocks are the smaller units inside their slots, such as a product card or an FAQ item. Both consist of a Vue component and a **definition** in the same file.

The platform reads the definition in three places: **Studio** builds the picker and sidebar from it, **Frontend Core** wires up data and props, and the Vue component derives its props with `definitionToProps`. Required are `component` (matching the file name, with the Section or Block prefix), `studio.label` and, for Sections, `slots`.

The `schema` groups fields into fieldsets that Studio shows as collapsible panels. Slots use `restrictTo`, `allow` and `prefer` to control which Blocks are allowed. An optional `ai` field provides facts for agents composing pages through the Laioutr MCP; normally it stays empty.

## Step by step

1. 1 ### Step 1: Create the file

   Create a file such as `SectionHeroBanner.vue` under `src/runtime/app/sections/`, Blocks go under `src/runtime/app/blocks/`. The file name is also the component name.
2. 2 ### Step 2: Export the definition

   In a regular `<script lang="ts">` block, create `export const definition = defineSection({ ... })` with `component`, `studio` (at least `label`), `slots` and `schema`.
3. 3 ### Step 3: Define fields and slots

   Create fieldsets in the `schema` with fields such as `text`, `richtext`, `media`, `link` or `select`. Define slots with `name: 'default'` and, if needed, `restrictTo` or `allow`; without Blocks use `slots: []`.
4. 4 ### Step 4: Derive props

   Call `defineProps(definitionToProps(definition))` in the `<script setup>` block. Props are never declared by hand, so they stay in sync with the schema.
5. 5 ### Step 5: Register the directory

   Register the folders in `src/module.ts` via `registerLaioutrApp({ sections: [...], blocks: [...] })`, unless the App Starter already does so.
6. 6 ### Step 6: Test in Studio

   Restart the playground, reload Studio and search the picker for the new Section by its label or tags. **Developer: Reload Client Context** loads field changes on existing components.

## Check the result

The Section appears in the Studio picker with its label, description and preview image, its fields are in the sidebar, and exactly the allowed Blocks can be placed in its slots.

## Frequently asked questions

When does isStandalone: false make sense?

When a Block only works inside a specific Section, such as a testimonial inside a testimonial carousel. It can then only be used in slots that list it in `allow`.

What is the ai field for?

For facts agents cannot derive from the description, fields and slots, such as the usual order of many Blocks in a product detail Section. Prescriptive rules such as "use only when" do not belong there, as they degrade the results.

How are preconfigured variants offered on insert?

Through `studio.propsWizard`. Studio then shows variants such as "Centered" or "Split" before placement and applies their props to the new Section.

## Related

- [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)7 min

  Sections are the large areas of a page in header, body or footer, and blocks are content units inside a section's slots. Both are added and arranged in the layers tree and edited in the properties panel.
- [Build and release a first custom app](https://academy.laioutr.com/en/artikel/build-and-release-a-first-custom-app)20 min

  A custom app starts from the App Starter: set the package name, register Sections, Blocks or Orchestr handlers with registerLaioutrApp and test them in the playground. npm publish and laioutr app release then bring the version to Cockpit, and an environment's next deployment rolls it out.
- [Find sections: library, Growth Kits, tags and search](https://academy.laioutr.com/en/artikel/find-sections-library-growth-kits-tags-search)4 min

  The add-section dialog groups all installed sections by package, filters by Growth Kit and tags, and offers a search so the right section is found quickly.
- [Connect Laioutr MCP to an AI assistant](https://academy.laioutr.com/en/artikel/connect-laioutr-mcp-to-an-ai-assistant)5 min

  Laioutr MCP connects Claude, ChatGPT, Cursor or another MCP client to Laioutr projects via OAuth. Once Laioutr has enabled it, signing in with the Laioutr account is enough; no API key is needed.

## Learn it in a lesson

- [Exam guide and practical task](https://academy.laioutr.com/en/lektionen/developer-exam-guide)10 min
- [Figma kit and handover to development](https://academy.laioutr.com/en/lektionen/ux-designer-figma-kit-and-handover)12 min
- [Understand sections, blocks and slots](https://academy.laioutr.com/en/lektionen/ux-designer-layout-system)12 min
- [Define custom sections and blocks](https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks)14 min

## [Developer start](https://academy.laioutr.com/en/leitfaeden/developer-start)

Search this guide

1. [Set up a local development environment](https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment)15 min
2. [The Laioutr CLI: commands and authentication](https://academy.laioutr.com/en/artikel/laioutr-cli-commands-and-authentication)6 min
3. [Build and release a first custom app](https://academy.laioutr.com/en/artikel/build-and-release-a-first-custom-app)20 min
4. [Define custom Sections and Blocks for Studio](https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio)15 min
5. [Orchestr: entities, queries, actions and resolvers](https://academy.laioutr.com/en/artikel/orchestr-entities-queries-actions-and-resolvers)8 min
6. [Declare content collections in code](https://academy.laioutr.com/en/artikel/declare-content-collections-in-code)15 min
7. [Performance and technical SEO in code](https://academy.laioutr.com/en/artikel/performance-and-technical-seo-in-code)10 min

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "en",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "translationOfWork": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "For developers",
          "item": "https://academy.laioutr.com/en/bereiche/for-developers",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Developer start",
          "item": "https://academy.laioutr.com/en/leitfaeden/developer-start",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Define custom Sections and Blocks for Studio",
          "item": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio#/schema/question/1",
      "@type": "Question",
      "inLanguage": "en",
      "name": "When does isStandalone: false make sense?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>When a Block only works inside a specific Section, such as a testimonial inside a testimonial carousel. It can then only be used in slots that list it in <code>allow</code>.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio#/schema/question/2",
      "@type": "Question",
      "inLanguage": "en",
      "name": "What is the ai field for?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>For facts agents cannot derive from the description, fields and slots, such as the usual order of many Blocks in a product detail Section. Prescriptive rules such as \"use only when\" do not belong there, as they degrade the results.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio#/schema/question/3",
      "@type": "Question",
      "inLanguage": "en",
      "name": "How are preconfigured variants offered on insert?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Through <code>studio.propsWizard</code>. Studio then shows variants such as \"Centered\" or \"Split\" before placement and applies their props to the new Section.</p>"
      }
    }
  ]
}
```