Val

Changing how content is rendered

Render methods

The render method allows you to customize how content is displayed and edited in Val Studio. By changing the render configuration, you can provide a better editing experience for content editors.

Textarea for strings

Sometimes you want something that is not richtext but still multiple lines. Simple descriptions or even code blocks for example. Use render({ as: "textarea" }) to change the input to a multi-line textarea, making it easier to edit longer text content.

const articleSchema = s.object({
  title: s.string(),
  // Multi-line textarea for longer descriptions
  description: s.string().render({ as: "textarea" }),
  body: s.richtext(),
});

export default c.define("/content/article.val.ts", articleSchema, {
  title: "My Article",
  description: "This is a longer description that benefits from a textarea input.\nIt can span multiple lines.",
  body: s.richtext([
    { tag: "p", children: ["Article content..."] },
  ]),
});

List view for records

When working with records of objects, you can use render({ as: "list" }) to display items as a nice looking list with thumbnails. This makes it much easier for editors to navigate and edit collections of content.

Basic list view

The select() function determines what information is displayed in the list view. You can show a title, subtitle, and image for each item.

const teamSchema = s.record(
  s.object({
    name: s.string(),
    position: s.string(),
    bio: s.string().render({ as: "textarea" }),
    image: s.image(),
  })
).render({
  as: "list",
  select({ val }) {
    return {
      title: val.name,
      subtitle: val.position,
      image: val.image,
    };
  },
});

export default c.define("/content/team.val.ts", teamSchema, {
  "john-doe": {
    name: "John Doe",
    position: "Software Engineer",
    bio: "John has been building web applications for over 10 years.",
    image: c.image("/public/team/john.jpg"),
  },
  "jane-smith": {
    name: "Jane Smith",
    position: "Product Designer",
    bio: "Jane specializes in user experience and interface design.",
    image: c.image("/public/team/jane.jpg"),
  },
});

List view benefits

Using list view makes it significantly easier for editors to browse and manage collections. Instead of navigating through a tree of items, editors see a visual list with thumbnails and key information at a glance.

Customizing list display