> For the complete documentation index, see [llms.txt](https://kriskuiper74.gitbook.io/product-biografie-meesterproef/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kriskuiper74.gitbook.io/product-biografie-meesterproef/documentatie/creating-a-component-in-storyblok.md).

# Creating a component in Storyblok

Dit deel documentatie was eigenlijk iets dat Deanna bij haar documentatie-ticket getrokken had, maar aangezien we tegen het einde van het project prioriteiten moesten stellen betreft deliverables, heb ik dit deel overgenomen. Zo kon ik ook werken aan vaardigheden betreft handleidingen en teksten schrijven.

Het betreft het volgende 'stappenplan':

### The component overview

In the left sidebar, go to `components`. Here you'll find all schema's for components, including those of pages and other site components. The folder you want to create your component in is the `cmd-components` folder, so click that folder. You should see something like the following: ![Components view](https://github.com/kriskuiper/cmd-digital-playground/wiki/assets/components-overview.png)

### Defining your components' schema

You can define a schema\* for your component by clicking 'new' in the top-right corner. After that, a sidebar will open on the right where you can define a name for your component: ![Naming your component](https://github.com/kriskuiper/cmd-digital-playground/wiki/assets/naming_a_component.png)

\**A schema is the blueprint for your component, you define what fields your component should have and what type every field should be.*

**Note that your component should be nestable! Otherwise you can't use it in a page.**

### Adding fields to your component

Your component can't do anything useful if it doesn't have any fields, so let's add those. You can add a field by simply filling in a name and hit enter. The default type of a field is `text`, we can change that later. After you hit `enter` your view should look something like this: ![Adding a field](https://github.com/kriskuiper/cmd-digital-playground/wiki/assets/adding_a_field.png)

### Changing the field type

It might be that your field needs to be of another type than text, for instance if you want to be able to decide a margin of some kind, it should be of type number so you can run some calculations on it. You can change your field by clicking on it, after you click on it the first thing you see is Type. Click the dropdown and you can choose another type:

 ![Changing field type](https://github.com/kriskuiper/cmd-digital-playground/wiki/assets/changing_field_type.png)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kriskuiper74.gitbook.io/product-biografie-meesterproef/documentatie/creating-a-component-in-storyblok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.