Val

Val Helper

The val helper object provides utility methods for working with Val content.

Import the val helper from your config:

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

Methods

val.raw()

Removes steganography encoding from Val content. Use this when you need the clean value without any metadata for visual editing.

This is particularly useful for values that will be used in contexts where steganography might cause issues, such as URLs, API calls, or data processing.

Parameters:

value: T

The value to strip steganography from. Can be a string, object, array, or any Val content type.

Returns:

T (decoded)

Examples:

Removing stega from a string

import { val } from "@/val.config";
import { fetchVal } from "@/val/val.rsc";
import contentVal from "./content.val";

export default async function Page() {
  const content = await fetchVal(contentVal);
  
  // Use raw value for URL
  const cleanUrl = val.raw(content.url);
  
  return <a href={cleanUrl}>Link</a>;
}

Removing stega from objects

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

// Clean entire object for API calls
const apiData = val.raw(content);
await fetch('/api/endpoint', {
  method: 'POST',
  body: JSON.stringify(apiData)
});

Combining with val.attrs()

import { val } from "@/val.config";
import { ValEncodedString } from "@valbuild/next";

function Component({ url }: { url: ValEncodedString }) {
  return (
    <div {...val.attrs(url)}>
      {/* Display clean value */}
      <span>{val.raw(url)}</span>
    </div>
  );
}

val.attrs()

Extracts data-val-path attributes from Val content. This enables visual editing by marking elements as editable in Val Studio.

Use this when you want to make an element editable but need to use val.raw() for the actual content (for example, when using the value in an href or other attribute that can't contain stega).

Parameters:

value: T

The Val content to extract editing attributes from.

Returns:

{ 'data-val-path'?: string }

Examples:

Making a link editable

import { val } from "@/val.config";
import { useVal } from "@/val/val.client";
import contentVal from "./content.val";

export default function Component() {
  const content = useVal(contentVal);
  
  // Apply attrs to make the link editable
  // Use raw for the href to avoid stega issues
  return (
    <a href={val.raw(content.url)} {...val.attrs(content.url)}>
      Click here
    </a>
  );
}

Manual steganography handling

import { val } from "@/val.config";
import { useVal } from "@/val/val.client";
import { ValEncodedString } from "@valbuild/next";

export function ManualStega() {
  const url: ValEncodedString = useVal(fakeVal);
  
  return (
    <div {...val.attrs(url)}>
      {/* Element is editable via div */}
      <h1>{val.raw(url)}</h1>
    </div>
  );
}

Complex content structures

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

// Extract attrs from nested content
const content = await fetchVal(contentVal);

return (
  <article>
    <h1 {...val.attrs(content.title)}>
      {val.raw(content.title)}
    </h1>
    <p {...val.attrs(content.description)}>
      {val.raw(content.description)}
    </p>
  </article>
);

When to use these methods

Use val.raw() when:

You need a clean value for URLs, APIs, or data processing
Steganography might interfere with the value's usage
You're passing content to external systems

Use val.attrs() when:

You need to use val.raw() on content but still want it editable
You're manually controlling where editing metadata is placed
You want to make a parent element editable instead of the content element

Note

In most cases, you don't need to use these methods manually. Val automatically handles steganography encoding and decoding. Use these methods only when you need explicit control over the behavior.