Val automatically operates in two modes depending on where your app is running: Developer Mode when running locally, and Production Mode when deployed to production environments like Vercel. Both modes use a patch-based system that allows you to preview changes before they go live.

When you edit content in Val, changes are stored as patches rather than directly modifying your content files. This allows you to:

• Preview changes in draft mode before applying them

• Review and edit multiple changes before committing

• Collaborate with team members without conflicts

Draft mode lets you see exactly how your changes will look before they're applied to your codebase.

Developer Mode runs automatically when you're working locally (e.g., npm run dev).

1. Edit content - Make changes in Val Studio at /val

2. Patches stored locally - Changes are saved to the .val/patches directory in your project

3. Preview in draft mode - See your changes applied in real-time

4. Save - Click save to apply all patches to your .val.ts files

When you hit save, all patches are applied directly to your content files. You can then commit these changes to Git like any other code change.

Production Mode runs automatically when your app is deployed to production environments (like Vercel, Netlify, or similar platforms). It enables your deployed application to receive content updates from non-technical team members. This requires connecting your project to Val Build.

To use Production Mode, you need to connect your project to Val Build. During setup, you'll receive:

• API Key - Identifies your project

• Secret Key - Secures communication between your app and Val Build (can be rotated)

The secret key creates a signature that protects the communication between the client and server, ensuring only authorized users can make changes.

Only users who are set up in admin.val.build can log in to your project. This gives you full control over who can edit content in production.

1. Editor makes changes - Team members edit content in your deployed app at /val

2. Patches stored on Val Build - Changes are saved to the Val Build server

3. Preview in draft mode - Editors can see changes before publishing

4. Publish - Creates a Git commit with the changes

5. Build & deploy - Your CI/CD pipeline builds and deploys the updated code

6. Notification - Editor is notified when deployment completes

One of the powerful features of Production Mode is that editors can continue working while changes are being built and deployed. You can:

• Make and publish multiple changes without waiting for deployments

• Start working on new content immediately after publishing

• Queue up multiple publishes if needed

End-users only see changes after the deployment completes. The workflow is:

1. Publish creates a Git commit

2. CI/CD pipeline builds the project

3. New version is deployed to production

4. Editor receives notification

5. Changes are now visible to end-users

This ensures that your content changes go through the same build and deployment process as code changes, maintaining consistency and reliability.