Val

Rich Text Guide

Working with Rich Text

Rich Text in Val

Val's rich text is based on semantic HTML5 and provides a structured way to define formatted content. Unlike other CMS solutions, Val represents rich text as plain TypeScript objects, making it easy to understand, transform, and render.

Defining Rich Text Schema

Use `s.richtext()` to define a rich text field with configurable formatting options:

const articleSchema = s.object({
  content: s.richtext({
    style: {
      bold: true,
      italic: true,
      lineThrough: true,
    },
    block: {
      p: true,
      h1: true,
      h2: true,
      h3: true,
      ul: true,
      ol: true,
      blockquote: true,
    },
    inline: {
      a: true,
      img: true,
    },
  }),
});

Rich Text Structure

Rich text is represented as an array of block elements, where each element has a tag and children:

export default c.define("/content/article.val.ts", articleSchema, {
  content: [
    {
      tag: "h1",
      children: ["Getting Started with Val"],
    },
    {
      tag: "p",
      children: [
        "Val is a ",
        { tag: "span", styles: ["bold"], children: ["type-safe"] },
        " CMS that stores content as code.",
      ],
    },
    {
      tag: "ul",
      children: [
        {
          tag: "li",
          children: [{ tag: "p", children: ["Local-first development"] }],
        },
        {
          tag: "li",
          children: [{ tag: "p", children: ["No database required"] }],
        },
      ],
    },
  ],
});

Rendering Rich Text

Use the `ValRichText` component to render rich text in your React components:

import { ValRichText } from "@valbuild/next/client";
import { fetchVal } from "@/val/val.rsc";
import articleVal from "./article.val";

export default async function ArticlePage() {
  const { content } = await fetchVal(articleVal);
  
  return (
    <article>
      <ValRichText
        theme={{
          bold: "font-bold",
          italic: "italic",
          lineThrough: "line-through",
          h1: "text-4xl font-bold mb-4",
          h2: "text-3xl font-bold mb-3",
          p: "mb-4",
          ul: "list-disc pl-6 mb-4",
          ol: "list-decimal pl-6 mb-4",
        }}
      >
        {content}
      </ValRichText>
    </article>
  );
}

Available Options

Rich text supports three categories of formatting: