docs(studio): form generation with zod (#3165)

Author: larbish

docs/content/docs/8.studio/3.content.md

@@ -1,7 +1,7 @@
 ---
 title: Edit your content
 navigation:
-  title: Content editors
+  title: Content Editors
 description: Discover and select your favorite way to manage your content
   between the visual or the code editor.
 seo:
@@ -38,7 +38,11 @@ You want to know how we've built this editor and how it works under the hood? Ch
 
 Based on the user [collection and schema](/docs/collections/define) provided, a form is generated to edit this metadata from the editor.
 
-:video{autoplay controls loop poster="/home/videos/HomeNotionLikePoster.webp" src="https://res.cloudinary.com/nuxt/video/upload/v1729157955/frontmatterform2_rmh58v.mp4"}
+:video{autoplay controls loop poster="/home/videos/HomeNotionLikePoster.webp" src="https://res.cloudinary.com/nuxt/video/upload/v1739982761/frontmatterform_yjafgt.mp4"}
+
+::prose-note{to="#form-editor-yaml-and-json-files"}
+Check this section to learn more about form generation based on schema.
+::
 
 ### Toolbar
 
@@ -61,7 +65,6 @@ One of this editor standout features is its ability to integrate and customize a
 A developer can create any kind of visually complex components and editors will be able to use them and focus on the content. An editor can also play with the component properties, styles, and behaviour to fit its specific requirements as long as the developer made it customisable.
 
 ::steps{level="4"}
-
 #### Create your component
 
 You can create Vue components and integrate them into Markdown. They just need to be located in the `/components/content` folder to be available.
@@ -140,13 +143,95 @@ export default defineNuxtConfig({
 })
 ```
 
-## Form editor (`YAML` and `JSON` files)
+## Form editor
+
+![YAML and JSON edition with auto generated form](/blog/frontmatters.png)
+
+This editor is used whether you’re editing the [frontmatter]() of a `Markdown` file or a `JSON` / `YAML` file.
+
+It eliminates the need to interact directly with complex file syntax. Instead, a form is automatically generated based on the provided user [collection schema](/docs/collections/define).
+
+### **Defining your form with** `zod` Schema
+
+::prose-note{to="/docs/collections/define"}
+Learn more about schema collection definition in the dedicated section.
+::
+
+Once the `schema` property has been defined in your collection, this will automatically generate the corresponding form on Studio interface.
+
+::prose-code-group
+```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(),
+          }),
+        })),
+      }),
+    }),
+  },
+})    
+```
+
+  :::preview-card{icon="i-lucide-eye" label="Generated Form"}
+  ![Form preview](/blog/generated-form.png)
+  :::
+::
+
+### **Native Inputs Mapping**
+
+Primitive Zod types are automatically mapped to appropriate form inputs in:
+
+- **String** → Text input
+- **Date** → Date picker
+- **Number** → Number input (counter)
+- **Boolean** → Toggle switch
+- **Enum** → Select dropdown
+
+### Custom Inputs Mapping
+
+Studio 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
 
-![YAML and JSON edition with auto generated form](/docs/studio/json-yml-forms.png)
+##### `input: 'media' | 'icon'`
 
-This editor removes the need for users to interact directly with complex file syntax such as `YAML` or `JSON`.
+You can set the editor input type. Currently `icon` and `media` are available.
 
-Based on the user [collection and schema](/docs/collections/define) provided, a form is generated for both `YAML` and `JSON` files.
+##### `hidden: Boolean`
+
+This option can be set to avoid the display of a field in the Studio editor.
+
+::prose-tip
+Studio inputs are fully extensible. We can create as many input as we want based on our users needs.
+::
 
 ::warning
 Arrays are not yet handled but should be generated soon thanks to collections and user-defined schemas.