---
title: "Studio Form Customisation"
description: "Studio forms are dynamically generated based on the collection schema defined in your content configuration file."
canonical_url: "https://content.nuxt.com/changelog/studio-customisation"
---
# Studio Form Customisation
> Studio forms are dynamically generated based on the collection schema defined in your content configuration file.
This article was published before v3.7, learn [this guide](https://github.com/nuxt/content/blob/main/CHANGELOG.md#370-2025-09-12) to migrate.
The [Studio](https://nuxt.studio) forms are dynamically generated based on the collection schema defined in your content configuration file. This behaviour applies whether you’re editing the [frontmatter](https://content.nuxt.com/docs/files/markdown#frontmatter) of a `Markdown` file or a `JSON` / `YAML` file.
## **Defining your form with** `zod` Schema
Nuxt Content leverages [zod](https://github.com/colinhacks/zod) to let you define a type-safe schema for your content. This schema not only validates your data but also powers the form generation in **Studio**.
### **Built-in zod Helpers**
You can define your Content schema by adding the `schema` property to your collection and by using a [zod](https://github.com/colinhacks/zod) schema.
`@nuxt/content` exposes a `z` object that contains a set of [Zod](https://content.nuxt.com/) utilities for common data types.
```ts [content.config.ts]
export default defineContentConfig({
collections: {
posts: defineCollection({
type: 'page',
source: 'blog/*.md',
schema: z.object({
draft: z.boolean().default(false),
category: z.enum(['Alps', 'Himalaya', 'Pyrenees']).optional(),
date: z.date(),
image: z.object({
src: z.string().editor({ input: 'media' }),
alt: z.string(),
}),
slug: z.string().editor({ hidden: true }),
icon: z.string().optional().editor({ input: 'icon' }),
authors: z.array(z.object({
slug: z.string(),
username: z.string(),
name: z.string(),
to: z.string(),
avatar: z.object({
src: z.string(),
alt: z.string(),
}),
})),
}),
}),
},
})
```
### **Native Inputs Mapping**
Primitive Zod types are automatically mapped to appropriate form inputs in **Studio**:
- **String** → Text input
- **Date** → Date picker
- **Number** → Number input (counter)
- **Boolean** → Toggle switch
- **Enum** → Select dropdown
- **Arrays of strings** → List of badge inputs
- **Arrays of objects** → Accordion of items with embedded form
### Custom Inputs Mapping
Content goes beyond primitive types. You can customise form fields using the `editor` method, which extends Zod types with metadata to empower editor interface.
This allows you to define custom inputs or hide fields.
#### Usage
```ts [content.config.ts]
mainScreen: z.string().editor({ input: 'media' })
```
#### Options
##### `input: 'media' | 'icon'`
You can set the editor input type. Currently both icon and media are available since there are handled in Studio editor.
Studio inputs are fully extensible. We can create as many input as we want based on our users needs.
##### `hidden: Boolean`
This option can be set to avoid the display of a field in the Studio editor.
##### `label: String`
You can set the editor input name in Studio editor.
##### `description: String`
You can set an extra text under the field name in Studio editor.
##### `tooltip: String`
Display an info-bubble next to the field name in Studio editor.
## Sitemap
See the full [sitemap](https://content.nuxt.com/sitemap.md) for all pages.