Val

https://val.build/docs
Admin
Val is a fully-fledged CMS where you write content as code in TypeScript or JavaScript files,...
Tokens:26,957
Snippets:274
Trust Score:6
Update:7 months ago
Show doc for...
Tokens:
Raw
### Prettier Configuration File Example

Source: https://val.build/docs/formatting

An example of a `.prettierrc.json` file used to define Prettier's formatting rules. This file should be placed in the project's root directory.

```json
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": false,
  "printWidth": 80,
  "tabWidth": 2
}
```

--------------------------------

### Install Prettier with npm or pnpm

Source: https://val.build/docs/formatting

Installs Prettier as a regular dependency using either npm or pnpm. It's crucial to install it as a regular dependency, not a devDependency, for production environments.

```bash
npm install prettier
# or
pnpm add prettier
```

--------------------------------

### Install Val Packages (npm/pnpm)

Source: https://val.build/docs/init

Installs the core and Next.js integration packages for Val Build using npm or pnpm. Ensure you have Node.js and a package manager installed.

```bash
npm install @valbuild/core@latest @valbuild/next@latest
# pnpm i @valbuild/core@latest @valbuild/next@latest
```

--------------------------------

### String Schema Code Editor Render Examples

Source: https://val.build/docs/api/schema/string

Shows how to define an object schema with string fields rendered as code editors using the 'code' render option, specifying the language for syntax highlighting.

```typescript
const schema = s.object({
  jsonConfig: s.string().render({ as: "code", language: "json" }),
  tsCode: s.string().render({ as: "code", language: "typescript" }),
  cssStyles: s.string().render({ as: "code", language: "css" }),
});
```

--------------------------------

### Display Val Package Versions with CLI

Source: https://val.build/docs/cli

Displays the installed versions of `@valbuild/core` and `@valbuild/next` packages within your project. This command is useful for debugging and ensuring version compatibility.

```Bash
npx -p @valbuild/cli val versions
```

--------------------------------

### Define Val Module Schema and Content (TypeScript)

Source: https://val.build/docs/workflow

Defines a content schema using `s` (schema builder) and creates a content module with a unique path, schema, and initial content using `c.define()`. Ensures content matches the schema.

```typescript
// app/page.val.ts
import { s, c } from "@/val.config";

// Define your content schema
const schema = s.object({
  text: s.string(),
});

// Create the module with a unique path, schema, and initial content
export default c.define("/app/page.val.ts", schema, {
  text: "My first Val content",
});
```

--------------------------------

### Install ESLint Plugin (npm/pnpm)

Source: https://val.build/docs/init

Installs the Val ESLint plugin as a development dependency using npm or pnpm. This plugin provides feedback on .val file configurations.

```bash
npm install -D @valbuild/eslint-plugin@latest
# pnpm i -D @valbuild/eslint-plugin@latest
```

--------------------------------

### Monorepo Configuration with Valbuild (TypeScript)

Source: https://val.build/docs/monorepo

This configuration snippet demonstrates how to set up Valbuild for a project located in a subdirectory of a monorepo. It utilizes the `root` property in `val.config.ts` to define the project's relative path. This setup is crucial for correctly referencing project files and assets when Valbuild operates within a monorepo structure.

```typescript
import { initVal } from '@valbuild/next';

const { s, c, val, config, nextAppRouter } = initVal({
  root: '/web', // <- add this for monorepo
  project: 'valbuild/example',
  gitBranch: process.env.VERCEL_GIT_COMMIT_REF,
  gitCommit: process.env.VERCEL_GIT_COMMIT_SHA,
  defaultTheme: 'dark',
});

export type { t } from '@valbuild/next';
export { s, c, val, config, nextAppRouter };
```

--------------------------------

### String Schema Textarea Render Example

Source: https://val.build/docs/api/schema/string

Illustrates how to define an object schema where a 'description' field uses the s.string() schema rendered as a textarea for multi-line input.

```typescript
const schema = s.object({
  description: s.string().render({ as: "textarea" }),
});
```

--------------------------------

### Set up Val.js Page Router with Next.js

Source: https://val.build/docs/page-router

This snippet demonstrates the basic setup for Val's page router in a Next.js application. It uses `s.router(nextAppRouter, schema)` to automatically generate pages for each entry in a content record, mapping keys to URL paths.

```typescript
// app/(main)/docs/[[...slug]]/page.val.ts
import { c, nextAppRouter, s } from "@/val.config";
import { docsSchema } from "./docsSchema.val";

export default c.define(
  "/app/(main)/docs/[[...slug]]/page.val.ts",
  s.router(nextAppRouter, docsSchema),
  {
    "/docs": {
      title: "Overview",
      sections: [/* ... */],
    },
    "/docs/init": {
      title: "Installation",
      sections: [/* ... */],
    },
    "/docs/getting-started": {
      title: "Getting started",
      sections: [/* ... */],
    },
    // ... more routes
  },
);

```

--------------------------------

### Fetch Route Content in Server Components

Source: https://val.build/docs/page-router

This example shows how to fetch route content in a Next.js Server Component using `fetchValRoute`. It takes the Val module and URL parameters, returning the content for the matching route or `null` if no match is found.

```typescript
// app/(main)/privacy/page.tsx - Server Component
import { fetchValRoute } from "@/val/val.rsc";
import pageVal from "./page.val";
import { notFound } from "next/navigation";

export default async function PrivacyPage({ params }: { params: unknown }) {
  const page = await fetchValRoute(pageVal, params);
  if (!page) {
    return notFound();
  }
  return (
    <div>
      <h1>{page.title}</h1>
      {/* Render your content */}
    </div>
  );
}

```

--------------------------------

### Router Schema Shorthand Explanation - Val.config

Source: https://val.build/docs/api/schema/router

This snippet explains that `s.router(nextAppRouter, schema)` is a shorthand for a more verbose configuration. It is equivalent to using `s.record(schema).router(nextAppRouter)`, providing a more concise way to achieve the same routing setup.

```javascript
// s.router(nextAppRouter, schema) is shorthand for:
s.record(schema).router(nextAppRouter)
```

--------------------------------

### Register Val Module (TypeScript)

Source: https://val.build/docs/workflow

Registers a Val module in `val.modules.ts` so Val can recognize it. It uses dynamic imports for code splitting and better performance. Ensure the `def` property correctly points to your module.

```typescript
import { modules } from "@valbuild/next";
import { config } from "./val.config";

export default modules(config, [
  // Add your module here
  { def: () => import("./app/page.val") },
  // You can add more modules as your project grows
]);
```

--------------------------------

### Use Val Content in Server Component (React/TypeScript)

Source: https://val.build/docs/workflow

Employs the `fetchVal` function to retrieve Val module content server-side, ideal for Server Components to enhance performance. The fetched content is then rendered as HTML.

```typescript
import { fetchVal } from "@/val/val.rsc";
import pageVal from "./page.val";

export default async function Page() {
  // fetchVal is async and fetches content server-side
  const { text } = await fetchVal(pageVal);
  
  return (
    <div>
      <h1>{text}</h1>
    </div>
  );
}
```

--------------------------------

### String Schema Basic Validation

Source: https://val.build/docs/api/schema/string

Provides an example of basic string validation using the .maxLength() method to enforce a maximum character limit.

```typescript
s.string().maxLength(100)
```

--------------------------------

### Define a Public Remote File URL in Val Build

Source: https://val.build/docs/remote

Example of how to define a public remote file URL. The filename part of the URL (after '/p/public/val/') can be customized as long as the file extension remains the same.

```javascript
// Example of a public remote file
// You can change the filename snurrebart to whatever you want
c.remote("https://remote.val.build/file/p/ce803e0/b/v08/v/0.84.1/h/637c/f/c89d27d4be02/p/public/val/snurrebart.png")
```

--------------------------------

### Marking Files as Remote in Val Build

Source: https://val.build/docs/remote

Code examples demonstrating how to designate an image or file as a remote file using the `.remote()` method in Val Build. This method is used to indicate that the file is stored remotely.

```javascript
s.image().remote() // or
s.file().remote()
```

--------------------------------

### Define Array Schema with String Elements - Val Build

Source: https://val.build/docs/api/schema/array

This example demonstrates how to define an array schema where all elements must be strings using the s.array() and s.string() functions. It's a fundamental way to ensure data integrity for array inputs.

```javascript
s.array(s.string())
```

--------------------------------

### Date Range and Custom Validation with s.date() (TypeScript)

Source: https://val.build/docs/api/schema/date

This example illustrates advanced validation using s.date(). It shows how to set minimum and maximum date constraints using .from() and .to(), and how to implement custom validation logic, such as ensuring a date is in the future.

```typescript
const schema = s.object({
  // Date must be between Jan 1, 2024 and Dec 31, 2024
  eventDate: s.date().from("2024-01-01").to("2024-12-31"),
  
  // Date must be after today
  futureDate: s.date().validate((date) => {
    const eventDate = new Date(date);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    if (eventDate < today) {
      return { success: false, message: "Date must be in the future" };
    }
    return { success: true };
  }),
});
```

--------------------------------

### Fetch and Display Date from Val Schema (React Server Component)

Source: https://val.build/docs/api/schema/date

This React Server Component example shows how to fetch date data defined by a Val schema using fetchVal and then parse and format the date for display. It highlights the integration of Val schemas within a React application.

```typescript
import { fetchVal } from "@/val/val.rsc";
import articleVal from "./article.val";

export default async function Article() {
  const { publishedAt } = await fetchVal(articleVal);
  
  // Parse and format the date
  const date = new Date(publishedAt);
  const formatted = date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
  
  return <time dateTime={publishedAt}>{formatted}</time>;
}
```

--------------------------------

### Handle Recursive Schemas with Getter Syntax for s.keyOf()

Source: https://val.build/docs/keyof

This example illustrates how to manage mutually recursive schemas when using s.keyOf(). By employing the 'getter syntax' for schema properties, TypeScript can correctly infer types, preventing issues with recursive definitions.

```typescript
import { s } from "@/val.config";
import { Schema, t } from "@valbuild/next";
import blogsPageVal from "./blogs/[slug]/page.val";
import supportArticlePageVal from "./support/[slug]/page.val";

export const linkButtonSchema = s.object({
  label: s.string(),
  link: s.union(
    "type",
    s.object({
      type: s.literal("support-article"),
      get href(): Schema<string> {
        return s.keyOf(supportArticlePageVal);
      },
    }),
    s.object({
      type: s.literal("blog"),
      get href(): Schema<string> {
        return s.keyOf(blogsPageVal);
      },
    }),
  ),
});

export type LinkButton = t.DecodeVal<t.inferSchema<typeof linkButtonSchema>>;

```

--------------------------------

### Run Val Initialization Script

Source: https://val.build/docs/init

Executes the Val initialization script using npx or pnpm to set up the project for Val Build. This script configures the project based on Val's requirements.

```bash
npx @valbuild/init@latest
# pnpm @valbuild/init@latest
```

--------------------------------

### Import Val Helper from Configuration

Source: https://val.build/docs/api/val-helper

Demonstrates how to import the `val` helper object from your Val configuration file. This is the initial step to utilize Val's utility methods.

```javascript
import { val } from "@/val.config";
```

--------------------------------

### Use Val Content in Client Component (React/TypeScript)

Source: https://val.build/docs/workflow

Utilizes the `useVal` hook to fetch and display content from a Val module in a React Client Component. This is suitable for interactive components requiring client-side state.

```typescript
"use client";
import { useVal } from "@/val/val.client";
import pageVal from "./page.val";

export default function Page() {
  // useVal returns the content from your Val module
  const { text } = useVal(pageVal);
  
  return (
    <div>
      <h1>{text}</h1>
    </div>
  );
}
```

--------------------------------

### Connect Project to Val Build with CLI

Source: https://val.build/docs/cli

Connects your project to Val Build, enabling non-technical users to edit content. Refer to the 'Connect to Val Build' documentation for detailed instructions.

```Bash
npx -p @valbuild/cli val connect
```

--------------------------------

### Configure Prettier in val.server.ts

Source: https://val.build/docs/formatting

Demonstrates how to integrate Prettier for code formatting within the Val server initialization. It involves importing Prettier and its configuration, then passing a formatter function to `initValServer`.

```typescript
import prettier from "prettier";
import prettierOptions from "../.prettierrc.json";

const { valNextAppRouter } = initValServer(
  valModules,
  { ...config },
  {
    draftMode,
    // Add formatter option here
    formatter: (code: string, filePath: string) => {
      return prettier.format(code, {
        filepath: filePath,
        ...prettierOptions,
      } as prettier.Options);
    },
  },
);
```

--------------------------------

### Login to Val Build Service with CLI

Source: https://val.build/docs/cli

Logs into admin.val.build and generates a Personal Access Token for authenticating your local project with the Val Build service.

```Bash
npx -p @valbuild/cli val login
```

--------------------------------

### Connect to Val Build CLI

Source: https://val.build/docs/init

Connects the local project to Val Build using the Val CLI. This enables features like live editing and commit creation directly from editors.

```bash
npx -p @valbuild/cli@latest connect
```

--------------------------------

### c.file() - Define File Content

Source: https://val.build/docs/api/content

The `c.file()` function defines generic file content (videos, PDFs, etc.). Files must be in the `public/val` folder, and metadata like `mimeType` is required.

```APIDOC
## c.file()

### Description
Used to define generic file content (e.g., videos, PDFs) in Val files. Files must be stored in the `public/val` folder. Requires a path and metadata including `mimeType`.

### Method
`c.file(path: string, metadata: FileMetadata)`

### Parameters
- **`path`** (string) - Required - The file path to the file, relative to the project root (must be in `/public/val`).
- **`metadata`** (object) - Required - Metadata about the file. Contains:
    - **`mimeType`** (string) - The MIME type of the file (e.g., `video/mp4`, `application/pdf`).

### Example with video
```typescript
import { c, s } from "@/val.config";

const schema = s.object({
  title: s.string(),
  video: s.file({ accept: "video/*" }),
});

export default c.define("/content/video.val.ts", schema, {
  title: "Product Demo",
  video: c.file("/public/val/demo.mp4", {
    mimeType: "video/mp4"
  }),
});
```

### Important Notes
- All files must be stored in the `/public/val` folder.
- The `accept` parameter in `s.file()` should match the MIME type of the file.
- Wildcards like `video/*` can be used to accept multiple file types.
```

--------------------------------

### String Schema Rendering Options

Source: https://val.build/docs/api/schema/string

Demonstrates how to use the .render() method of the s.string() schema to change how strings are displayed in the UI. Supports 'textarea' for multi-line input and 'code' for syntax-highlighted code editing.

```typescript
s.string().render({ as: "textarea" })
s.string().render({ as: "code", language: "typescript" })
```

--------------------------------

### Disable Stega Encoding for Schema Fields

Source: https://val.build/docs/stega

This example shows how to define a schema using Val's schema builder. By appending `.raw()` to a string field definition, you prevent stega encoding for that specific field, ensuring it retains its original value.

```typescript
const schema = s.object({
  // This field will have stega encoding
  title: s.string(),
  // This field will NOT have stega encoding
  apiKey: s.string().raw()
});
```

--------------------------------

### Render Record Schema as List (JavaScript)

Source: https://val.build/docs/api/schema/record

Demonstrates how to define a record schema with object properties and render it as a list using the .render method. It specifies the output format and selects specific fields for display.

```javascript
s.record(s.object({
  name: s.string(),
  age: s.number(),
})).render({ as: "list", select: ({ key, val }) => ({ title: val.name, subtitle: val.age }) })
```

--------------------------------

### Define File Schema and Content with Val Studio

Source: https://val.build/docs/api/schema/file

This snippet demonstrates how to define a file schema using 's.file()' with an 'accept' option for video files and then integrate the file content using 'c.file()'. It highlights the requirement for files to be placed in the 'public/val' folder.

```typescript
const schema = s.file({ accept: "video/*" });
export default c.define("/content/file.val.ts", schema, 
  c.file("/public/val/video.mp4") // NOTE: the actual files must be in the public/val folder
)
```

--------------------------------

### Use Files in React Components (Basic)

Source: https://val.build/docs/files

Demonstrates basic usage of files fetched from Val within a React Server Component. It shows how to access the file URL using the `.url` property and render them as HTML elements like `<video>`, `<a>`, and `<audio>`.

```typescript
import { fetchVal } from "@/val/val.rsc";
import mediaVal from "./media.val";

export default async function MediaPage() {
  const { video, document, audio } = await fetchVal(mediaVal);
  
  return (
    <div>
      <video src={video.url} controls className="w-full" />
      
      <a href={document.url} download className="btn">
        Download PDF
      </a>
      
      <audio src={audio.url} controls />
    </div>
  );
}
```

--------------------------------

### Inferring Schema with Val Type Helpers

Source: https://val.build/docs/api/types

Demonstrates how to use Val's schema definition and type inference utilities to create a schema and derive its corresponding TypeScript type. This is essential for validating and working with structured data within the Val ecosystem.

```typescript
import { s, t } from "@/val.config"

const schema = s.object({ example: s.string() })
const SchemaType = t.inferSchema<typeof schema>
```

--------------------------------

### Define Next.js App Router with Schema - Val.config

Source: https://val.build/docs/api/schema/router

This example demonstrates the basic usage of `s.router` to define page routes for a Next.js App Router. It takes a router configuration (`nextAppRouter`) and a schema (`pageSchema`) to validate the content of each route. The function returns a configuration object where keys are URL paths and values are the route data.

```typescript
import { s, c, nextAppRouter } from "@/val.config";

const pageSchema = s.object({
  title: s.string(),
  content: s.richtext()
});

export default c.define(
  "/app/(main)/docs/[[...slug]]/page.val.ts",
  s.router(nextAppRouter, pageSchema),
  {
    "/docs": {
      title: "Overview",
      content: [/* ... */],
    },
    "/docs/getting-started": {
      title: "Getting Started",
      content: [/* ... */],
    },
  }
);
```

--------------------------------

### Opting out of Visual Editing with .raw() in Val Schema

Source: https://val.build/docs/visual-editing

Demonstrates how to disable visual editing for specific string fields within a Val schema definition using the `.raw()` method. This is useful for fields like URLs or timestamps where steganography might interfere with parsing or functionality. The example shows a schema with a regular editable 'title' field and non-editable 'url' and 'timestamp' fields.

```typescript
const schema = s.object({
  // Regular string - visual editing enabled
  title: s.string(),
  
  // Raw string - visual editing disabled
  url: s.string().raw(),
  timestamp: s.string().raw()
});
```

--------------------------------

### Generate Pages from Record Schema using Router (JavaScript)

Source: https://val.build/docs/api/schema/record

Illustrates the use of the .router method with a record schema to automatically generate pages for each entry within the record. This simplifies the process of creating dynamic content based on record data.

```javascript
s.record(s.object({
  name: s.string(),
  age: s.number(),
}))
```

--------------------------------

### Use List View for Records of Objects

Source: https://val.build/docs/render

Display records of objects as a visually appealing list with thumbnails and key information. The `select()` function customizes the title, subtitle, and image displayed for each item, improving navigation and editing of collections.

```typescript
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"),
  },
});
```

--------------------------------

### Define Image Schema and Content - TypeScript

Source: https://val.build/docs/api/schema/image

Demonstrates how to define an image schema using s.image() and then use c.image() to define the content, including local file paths, dimensions, and alt text. The 'accept' option can be used to specify allowed image types.

```typescript
const schema = s.image();
export default c.define("/content/image.val.ts", schema, 
  c.image("/public/val/hero.jpg", { //  NOTE: the actual files must be in the public/val folder
    width: 1200,
    height: 800,
    alt: "Hero image"
  }
)
```

--------------------------------

### Render Basic Video

Source: https://val.build/docs/videos

Renders a video using the `.url` property obtained from fetched Val data. It uses a standard HTML5 `<video>` element with the `src` attribute set to the video URL and includes basic controls. The `fetchVal` function is used to retrieve the video data.

```typescript
import { fetchVal } from "@/val/val.rsc";
import pageVal from "./page.val";

export default async function Page() {
  const { heroVideo } = await fetchVal(pageVal);
  
  return (
    <video 
      src={heroVideo.url} 
      controls 
      className="w-full"
    >
      Your browser does not support the video tag.
    </video>
  );
}
```

--------------------------------

### Add Local Video Content

Source: https://val.build/docs/videos

Adds local video content to your Val project. Videos should be stored in the `/public/val` folder and referenced using `c.file()`. This function takes the file path and an optional object for metadata like `mimeType`.

```typescript
export default c.define("/content/page.val.ts", pageSchema, {
  heroVideo: c.file("/public/val/hero.mp4", {
    mimeType: "video/mp4"
  }),
  tutorialVideo: c.file("/public/val/tutorial.webm", {
    mimeType: "video/webm"
  }),
});
```

--------------------------------

### Image Schema Options - TypeScript

Source: https://val.build/docs/api/schema/image

Shows how to configure the s.image() schema with the 'accept' option to restrict allowed image file types. This helps in validating uploaded or referenced images.

```typescript
s.image({ accept: "image/webp" })
```

--------------------------------

### s.route() Combining Include and Exclude Patterns

Source: https://val.build/docs/api/schema/route

Demonstrates how to combine .include() and .exclude() methods with s.route() to define a more specific set of valid routes, such as external API routes excluding internal ones.

```typescript
// API routes except internal ones
const externalApiLinkSchema = s.object({
  label: s.string(),
  href: s.route()
    .include(/^\/api\//)
    .exclude(/^\/api\/internal\//),
});
```

--------------------------------

### Content API Overview

Source: https://val.build/docs/api/content

The Content API in Val provides helper functions for defining various types of content within your `.val.ts` files. The `c` object, exported from `val.config`, includes functions like `c.define()`, `c.image()`, `c.file()`, and `c.remote()`.

```APIDOC
## Content API Overview

### Description
The content API in Val provides helpers for defining content in your `.val.ts` files. The `c` object exported from your `val.config` contains the following main functions: `c.define()`, `c.image()`, `c.file()`, and `c.remote()`.

### Functions
- **`c.define(modulePath, schema, content)`**: Exports content from Val module files.
- **`c.image(path, metadata)`**: Defines image content.
- **`c.file(path, metadata)`**: Defines generic file content.
- **`c.remote(url, metadata)`**: References remote files or images.
```

--------------------------------

### Set up ValProvider in Root Layout (React)

Source: https://val.build/docs/api/react-components

The ValProvider component is a React context provider essential for enabling Val functionality across your application. It should be set up once in your root layout, typically during initial project configuration.

```javascript
import { ValProvider } from "@valbuild/next/client";
import { config } from "@/val.config";

export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ValProvider config={config}>
          {children}
        </ValProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Rendering Rich Text with ValRichText

Source: https://val.build/docs/richtext

Demonstrates how to use the `ValRichText` component in React to render rich text content fetched from Val, with optional theming for custom styling.

```APIDOC
## Rendering Rich Text with ValRichText

### Description
Use the `ValRichText` component to render rich text in your React components. You can provide a `theme` object to apply custom CSS classes for styling.

### Method
Client-side Component Rendering

### Endpoint
N/A

### Parameters
#### Props
- **content** (Array<object>) - Required - The rich text data array.
- **theme** (object) - Optional - An object mapping rich text features (e.g., `bold`, `h1`, `p`) to CSS class names.

### Request Example
```jsx
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
        content={content}
        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",
        }}
      />
    </article>
  );
}
```

### Response
#### Success Response (200)
N/A (This is a component usage example)

#### Response Example
N/A
```

--------------------------------

### Define Video Schema

Source: https://val.build/docs/videos

Defines a schema for video fields using `s.file({ accept: 'video/*' })`. This allows Val Studio to render a video preview and provides type-safe handling for local and remote videos. The `nullable()` modifier can be used to make the video field optional.

```typescript
const pageSchema = s.object({
  heroVideo: s.file({ accept: "video/*" }),
  tutorialVideo: s.file({ accept: "video/*" }).nullable(),
});
```

--------------------------------

### Create Boolean Schema - Val Build

Source: https://val.build/docs/api/schema/boolean

Demonstrates the basic creation of a boolean schema using the s.boolean() method in Val Build. This is the foundational step for defining boolean types within your schema.

```javascript
s.boolean()
```

--------------------------------

### Define and Use Remote Video Schema and Reference

Source: https://val.build/docs/api/content

This snippet defines a schema that accepts a remote video file and then references a specific remote video using its URL and MIME type. It requires the `.remote()` modifier on the schema definition and the `c.remote()` function for referencing.

```typescript
const schema = s.object({
  video: s.file({ accept: "video/*" }).remote(),
});

export default c.define("/content/video.val.ts", schema, {
  video: c.remote(
    "https://remote.val.build/file/p/.../video.mp4",
    { mimeType: "video/mp4" }
  ),
});
```

--------------------------------

### c.define() - Define Content

Source: https://val.build/docs/api/content

The `c.define()` function is used to export content from Val module files. It requires the module path, a schema definition, and the content data that matches the schema.

```APIDOC
## c.define()

### Description
Used to export content from Val module files. It takes the module path, a schema definition, and the content data matching the schema.

### Method
`c.define(modulePath, schema, content)`

### Parameters
- **`modulePath`** (string) - Required - The file path of the module, relative to the project root (e.g., `/app/(main)/page.val.ts`).
- **`schema`** (object) - Required - The schema definition.
- **`content`** (object) - Required - The actual content data that matches the schema.

### Basic Example
```typescript
import { c, s } from "@/val.config";

const schema = s.object({
  title: s.string(),
  description: s.string(),
  published: s.boolean(),
});

export default c.define("/app/blog/page.val.ts", schema, {
  title: "My First Blog Post",
  description: "This is a great introduction to Val",
  published: true,
});
```
```

--------------------------------

### c.image() - Define Image Content

Source: https://val.build/docs/api/content

The `c.image()` function defines image content. Images must be in the `/public/val` folder, and metadata (width, height, mimeType) is required, often generated via extensions or CLI.

```APIDOC
## c.image()

### Description
Used to define image content in Val files. Images must be stored in the `/public/val` folder. Requires a path and metadata including width, height, and mimeType.

### Method
`c.image(path: string, metadata: ImageMetadata)`

### Parameters
- **`path`** (string) - Required - The file path to the image, relative to the project root (must be in `/public/val`).
- **`metadata`** (object) - Required - Metadata about the image. Contains:
    - **`width`** (number) - The width of the image in pixels.
    - **`height`** (number) - The height of the image in pixels.
    - **`mimeType`** (string) - The MIME type of the image (e.g., `image/jpeg`, `image/png`).

### Example
```typescript
import { c, s } from "@/val.config";

const schema = s.object({
  title: s.string(),
  hero: s.image(),
});

export default c.define("/content/page.val.ts", schema, {
  title: "Welcome",
  hero: c.image("/public/val/hero.jpg", {
    width: 1920,
    height: 1080,
    mimeType: "image/jpeg",
  }),
});
```

### Important Notes
- All images must be stored in the `/public/val` folder.
- Use CLI or VS Code extension to generate metadata.
- Width and height should match actual image dimensions.
- MIME type should accurately reflect the image format.
```

--------------------------------

### Use Code Editor for Code and Config Strings

Source: https://val.build/docs/render

Render string inputs as code editors with syntax highlighting for technical content like JSON, TypeScript, or CSS. This significantly improves the editing experience for structured data and code snippets.

```typescript
const configSchema = s.object({
  title: s.string(),
  // JSON configuration with syntax highlighting
  apiConfig: s.string().render({ as: "code", language: "json" }),
  // TypeScript code snippet
  customHook: s.string().render({ as: "code", language: "typescript" }),
  // CSS styles
  customStyles: s.string().render({ as: "code", language: "css" }),
});

export default c.define("/content/config.val.ts", configSchema, {
  title: "API Configuration",
  apiConfig: JSON.stringify({
    endpoint: "https://api.example.com",
    timeout: 5000,
    retries: 3
  }, null, 2),
  customHook: `export function useCustomHook() {
  const [state, setState] = useState();
  return state;
}`,
  customStyles: `.custom-class {
  color: blue;
  font-size: 16px;
}`,
});
```

--------------------------------

### Image Schema - s.image()

Source: https://val.build/docs/api/schema/image

Defines an image schema. Use s.image() for schema definition and c.image() for content. The .remote() method can be used to enable remote images.

```APIDOC
## POST /websites/val_build/content/image.val.ts

### Description
Defines an image schema for content validation and rendering. Supports local and remote images with various configuration options.

### Method
POST

### Endpoint
/websites/val_build/content/image.val.ts

### Parameters
#### Query Parameters
- **accept** (string) - Optional - The accept value is a comma-separated list of one or more image types, or unique file type specifiers, describing which file types to allow. Example: `image/webp`

#### Request Body
- **schema** (object) - Required - The image schema definition, typically created using `s.image()`.
- **content** (object) - Required - The content definition for the image, typically using `c.image()` with path and options.

### Request Example
```json
{
  "schema": "s.image()",
  "content": "c.image('/public/val/hero.jpg', { width: 1200, height: 800, alt: 'Hero image' })"
}
```

### Response
#### Success Response (200)
- **message** (string) - A success message indicating the image content has been processed.

#### Response Example
```json
{
  "message": "Image content processed successfully."
}
```

### Methods
#### `.validate`
- **Description**: Custom validation function for the image schema.
- **Usage**: `s.image({ validate: (value) => { /* custom validation logic */ } })

#### `.remote`
- **Description**: Enables the use of remote images.
- **Usage**: `s.image().remote()

### See Also
- `/docs/images`
- `/docs/remote`
```

--------------------------------

### Upload Remote Files using Val Build CLI

Source: https://val.build/docs/remote

Command to automatically upload all remote files using the Val Build CLI. This command validates the project and uploads any identified remote files.

```bash
npx -p @valbuild/cli val validation --fix
```

--------------------------------

### Use Textarea for Multiline Strings

Source: https://val.build/docs/render

Customize string inputs to render as multi-line textareas for easier editing of longer text content like descriptions. This is useful for content that is not rich text but requires multiple lines.

```typescript
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 and Remove Unused Files with CLI

Source: https://val.build/docs/cli

EXPERIMENTAL: Lists files in the `/public/val` folder that are not referenced by any Val module. This helps in cleaning up unused assets. The output can be piped to `xargs rm` to remove all identified unused files.

```Bash
npx -p @valbuild/cli val list-unused-files | xargs rm # removes all unused files
```

--------------------------------

### Define Remote Video Schema and Content

Source: https://val.build/docs/videos

Defines a schema for a remote video field by adding `.remote()` to `s.file()`. It also shows how to reference remote video content using `c.remote()`, providing the URL and metadata like `mimeType` for proper handling.

```typescript
const pageSchema = s.object({
  heroVideo: s.file({ accept: "video/*" }).remote(),
});

export default c.define("/content/page.val.ts", pageSchema, {
  heroVideo: c.remote(
    "https://remote.val.build/file/p/.../video.mp4",
    { mimeType: "video/mp4" }
  ),
});
```

--------------------------------

### Define App Router with Recursive LinkButton Schema

Source: https://val.build/docs/keyof

This snippet shows how to integrate the recursively defined linkButtonSchema into an App Router definition. It uses the getter syntax to ensure the schema can be correctly referenced within the blog schema, enabling navigation between different content types.

```typescript
import { s, c, nextAppRouter } from "@/val.config";
import { LinkButton, linkButtonSchema } from "../../linkButton.val";
import { Schema } from "@valbuild/next";

const blogSchema = s.object({
  // ...
  get cta(): Schema<LinkButton> {
    return linkButtonSchema;
  },
});

export default c.define(
  "/app/(main)/blogs/[slug]/page.val.ts",
  s.router(nextAppRouter, blogSchema),
  {
    "/blogs/my-blog": {
      cta: {
        label: "My blog",
        link: {
          type: "blog",
          href: "/blogs/my-blog",
        },
      },
    },
  },
);

```

--------------------------------

### Define Referenceable Content with s.record()

Source: https://val.build/docs/keyof

This snippet demonstrates how to define a Val module using s.record() to hold content that can be referenced by other schemas. It sets up a schema for authors, where each author is identified by an email key.

```typescript
// authors.val.ts
const authorsSchema = s.record(
  s.object({
    name: s.string(),
  })
);

export default c.define("/content/authors.val.ts", authorsSchema, {
  "freekh@val.build": { name: "Freddy" },
  "theo@val.build": { name: "Theddy"  },
});

```

--------------------------------

### Basic s.route() Usage in Val Build

Source: https://val.build/docs/api/schema/route

Demonstrates the basic usage of s.route() within a Val Build schema to validate 'href' properties against application routes. This schema is defined for navigation links.

```typescript
import { s, c } from "@/val.config";

const navigationSchema = s.object({
  links: s.array(
    s.object({
      label: s.string(),
      href: s.route(), // Validated against all router modules
    })
  ),
});

export default c.define(
  "/content/navigation.val.ts",
  navigationSchema,
  {
    links: [
      { label: "Home", href: "/" },
      { label: "Docs", href: "/docs" },
      { label: "Pricing", href: "/pricing" },
    ],
  }
);
```

--------------------------------

### s.route() with Include Pattern Validation

Source: https://val.build/docs/api/schema/route

Shows how to use the .include() method with s.route() to restrict valid routes to only those matching a specific regular expression pattern, such as API routes.

```typescript
// Only allow API routes
const apiLinkSchema = s.object({
  label: s.string(),
  href: s.route().include(/^\/api\//),
});
```

--------------------------------

### Define Val Content with c.define() in TypeScript

Source: https://val.build/docs/module-files

This snippet demonstrates how to define Val content using the `c.define()` function in a `.val.ts` file. It includes importing necessary functions, defining a schema using `s.object`, and exporting the content with a module path, schema, and data. Ensure the first argument to `c.define()` matches the file path.

```typescript
import { s, c } from "@/val.config";

const schema = s.object({
  title: s.string(),
  description: s.string(),
});

export default c.define("/app/page.val.ts", schema, {
  title: "Welcome",
  description: "My first Val content",
});
```
Tokens:
Raw