Junk characters appearing in some fields in presentation mode

8 replies
Last updated: Jun 6, 2024
In presentation mode only some of my fields have a lot of junk characters. Any idea what’s going on? I’ve seen this on multiple projects now.
AI Update

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 thread
8 replies
This comes from presentation - it's the stega encoding. This could happen if you copy from the website into the sanity studio, but I believe we've implemented a filter for this to strip stega from the clipboard.
This could happen if you copy from the website into the sanity studio
What do you mean exactly?
For some more context, this breaks some of my code. For example, I do an equality check on a select option value and the equality check is always false due to these characters.

// schema 

defineField({
      title: 'Game',
      name: 'game',
      type: 'string',
      options: {
        list: [
          { title: 'Scarlet & Violet', value: 'scarlet-violet' },
          { title: 'Sword & Shield', value: 'sword-shield' },
        ],
      },
    }), 
This is always false, because data.game has all the strange characters (
scarlet-violet��‌‌​‌​​‍‌​‍​​​‌‌‍‌‌​‌‍​​​‌​​‌‌​‍‌‌‍​‌​‌‍‌‍​​​​‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌‌‌‌‌​‌‍‍​‌‍‌​‍​‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍‍‌‍​‌‌‍‌‌‍‌‌​‌‍​‍‌‍​‌‌​‌‍‌‌‌‌‌‌‌​‍‌‍​​‌​‍‌‌​​‍‌​‌‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‌‍‍‌‌‍‌​​‌​​‍​​​​​​‌‌‌‍‌‌​​​‌‍‌‍​‍​‍‌‌‍‌‍​‍‌​‌​​‍​‍‌​‌​​​​‍‌‌‍​‍​‍‌‌‍​‍​‍​​‌‌​‌​​‍‌​‍​​​‌‌‍‌‌​‌‍​​​‌​​‌‌​‍‌‌‍​‌​‌‍‌‍​​​​‍‌‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌‌‌‌‌​‌‍‍​‌‍‌​‍​‍‌‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍‍‌‍​‌‌‍‌‌‍‌‌​‍​‍‌‌��‌‌​‌​​‍‌​‍​​​‌‌‍‌‌​‌‍​​​‌​​‌‌​‍‌‌‍​‌​‌‍‌‍​​​​‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌‌‌‌‌​‌‍‍​‌‍‌​‍​‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍‍‌‍​‌‌‍‌‌‍‌‌​‌‍​‍‌‍​‌‌​‌‍‌‌‌‌‌‌‌​‍‌‍​​‌​‍‌‌​​‍‌​‌‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‌‍‍‌‌‍‌​​‌​​‍​​​​​​‌‌‌‍‌‌​​​‌‍‌‍​‍​‍‌‌‍‌‍​‍‌​‌​​‍​‍‌​‌​​​​‍‌‌‍​‍​‍‌‌‍​‍​‍​​‌‌​‌​​‍‌​‍​​​‌‌‍‌‌​‌‍​​​‌​​‌‌​‍‌‌‍​‌​‌‍‌‍​​​​‍‌‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌‌‌‌‌​‌‍‍​‌‍‌​‍​‍‌‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍‍‌‍​‌‌‍‌‌‍‌‌​‍​‍‌‌

// my component

const isScarlet = data.game === 'scarlet-violet'
So I’m seeing these characters on more than just text inputs, but enumerated select options too.
Sorry about that - I thought this was appearing right off the API and that your strings had this data already embedded in it. This is stega encoding and it saves you the trouble of having to encode source maps in data attributes yourself. https://www.sanity.io/docs/stega If you want strict equality though you will need to strip Stega first.
This docs page is exactly what I needed. Thank you!!!
👍
We're of two minds about Stega - it saves times, but leads to some of these 🤔 situations where it leaks through before it's been properly explained

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.

Was this answer helpful?