Junk characters appearing in some fields in presentation mode
This 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.
What's happening
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.
Why it breaks your code
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!The solution
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.
Why Sanity does this
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."
Show original thread8 replies
Sanity – Build the way you think, not the way your CMS thinks
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.