
Grab your gear: The official Sanity swag store
Read Grab your gear: The official Sanity swag storeThis is actually a known behavior in Sanity's Presentation tool, and it's not a bug! The "junk characters" you're seeing are from stega encoding, which is Sanity's method for embedding invisible metadata into your content strings.
When you use Presentation mode (Sanity's visual editing tool), stega encoding automatically embeds source map information into your content strings using invisible Unicode characters. This metadata enables the click-to-edit overlay feature, allowing editors to click on content in the preview and jump directly to the right field in the Studio.
The encoding only appears in Presentation mode - your production data in the Content Lake is clean and unaffected.
As you've discovered, this causes issues with strict equality checks because the encoded string 'scarlet-violet' actually contains hidden characters and won't match a plain string comparison:
const isScarlet = data.game === 'scarlet-violet' // Always false!You need to strip the stega encoding before doing comparisons. Use the vercelStegaCleanAll function from @vercel/stega:
import { vercelStegaCleanAll } from '@vercel/stega'
const isScarlet = vercelStegaCleanAll(data.game) === 'scarlet-violet' // Now works!This will remove the invisible encoding characters and give you the clean string value for comparison.
Stega encoding saves you from having to manually encode source maps in data attributes throughout your preview application. It's an elegant solution that makes visual editing "just work" - but as you've experienced, it can be surprising when you first encounter it! The stega documentation has more details on how it works and when to clean the encoded values.
The Sanity team acknowledges this can be a bit of a "gotcha" moment - as one team member noted in this community discussion, "We're of two minds about Stega - it saves time, but leads to some of these 🤔 situations where it leaks through before it's been properly explained."
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
Content operations
Content backend


The only platform powering content operations
By Industry


Tecovas strengthens their customer connections
Build and Share

Grab your gear: The official Sanity swag store
Read Grab your gear: The official Sanity swag store