Val

Visual Editing

Overview

Visual editing mode allows editors to update content and see changes directly in your web application without switching to Val Studio. You can click on any piece of content in your app to edit it inline.

Visual editing works out of the box - there's nothing you need to configure. It's automatically enabled when you use Val.

Visual Editing in Action

Watch this video to see how visual editing works. Click on any text in your running application to edit it directly, and see changes update in real-time without leaving your app.

How it works

Val uses stega (steganography) to tag strings with metadata. This allows Val to know exactly where each piece of content comes from in your content modules.

The rendering process

To ensure your app renders correctly, Val transforms the steganography data during rendering:

Content is tagged - Val embeds steganography metadata into strings
Stega is stripped - Before rendering JSX, Val removes the steganography text
Path is added - The Val path (which identifies where content is located) is added to a data-val-path attribute

This transformation prevents render issues that could occur from having steganography data in your DOM elements.

Fallback behavior

For modules that are not part of your project (e.g., third-party libraries), Val cannot perform the stega-to-attribute transformation. In these cases, Val will fall back to using steganography directly.

Opting out of visual editing

In some cases, you may want to opt out of visual editing for specific fields. Use the .raw() method to exclude a field from steganography:

Opting out with .raw()

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(),
});

When to opt out

Use .raw() for fields where steganography might cause issues:

URLs - Steganography can break URL parsing
Dates and timestamps - Though you should use s.date() for proper date handling
IDs and keys - Fields used for matching or comparison
Code or JSON - Content that needs to be parsed

Advanced: Manual control with val utilities

For advanced use cases, Val provides val utility methods for manually working with steganography:

val.raw() - Removes steganography encoding from content
val.attrs() - Extracts data-val-path attributes for applying editing capabilities

These methods are useful when you need to use content in contexts where steganography might cause issues (like URLs) while still keeping the content editable. See the Val Helper documentation for detailed usage examples.

Understanding ValEncodedString

When working with Val content, you may see the ValEncodedString type. This TypeScript type indicates that a string contains steganography encoding - hidden metadata that enables visual editing. When you see this type, it means the string has the data needed for click-to-edit functionality.

Troubleshooting

If you experience issues with visual editing, such as strange characters appearing in your content or click-to-edit not working, see the Troubleshooting Stega guide for solutions.

Val Studio

Connect to Val Build