---
title: Troubleshooting Content Link
description: This guide provides troubleshooting information for common issues when using Content Link
url: /kb/guide/troubleshooting-content-link
canonical_url: "https://vercel.com/kb/guide/troubleshooting-content-link"
published: 2025-11-04
last_updated: 2025-11-11
authors: DX Team
related: []
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [Diagnosing and fixing cache issues](https://vercel.com/docs/caching/cdn-cache/debug-cache-issues?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Diagnose stale content and fix CDN cache, data cache, and build cache issues using the CLI.
- [Edit Mode](https://vercel.com/docs/edit-mode?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Discover how Vercel's Edit Mode enhances content management for headless CMSs, enabling real-time editing, and seamless
- [Docs Contribution Guide](https://nextjs.org/docs/community/contribution-guide?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Learn how to contribute to Next.js Documentation
- [Vercel and Contentful Integration](https://vercel.com/docs/integrations/cms/contentful?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Integrate Vercel with Contentful to deploy your content.
- [Components](https://streamdown.ai/docs/components?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Override default HTML elements with custom React components for full rendering control.
- [Security](https://streamdown.ai/docs/security?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Streamdown sanitizes HTML, prevents XSS attacks, and strips dangerous content by default.
- [Vercel Web Analytics Troubleshooting](https://vercel.com/docs/analytics/troubleshooting?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Learn how to troubleshoot common issues with Vercel Web Analytics.
- [Troubleshooting Sign in with Vercel](https://vercel.com/docs/sign-in-with-vercel/troubleshooting?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Learn how to troubleshoot common errors with Sign in with Vercel
- [How to troubleshoot stale content returned from the Vercel CDN when using an external proxy or CDN](https://vercel.com/kb/guide/how-to-troubleshoot-stale-content-returned-from-the-edge-network-when-using-an-external-proxy-or-cdn?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Learn how to diagnose and fix stale content issues when using external proxies or CDNs with Vercel. Understand troublesh
- [How to serve documentation for agents](https://vercel.com/kb/guide/how-to-serve-documentation-for-agents?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Learn how to serve markdown to agents and HTML for humans from the same URL
- [Adding keyboard shortcuts to React apps with TanStack Hotkeys](https://vercel.com/kb/guide/adding-keyboard-shortcuts-to-react-apps-with-tanstack-hotkeys?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Add cross-platform keyboard shortcuts to your React app with TanStack Hotkeys. Install, register, scope, and display sho
- [Avoiding duplicate-content SEO with vercel.app URLs and custom domains](https://vercel.com/kb/guide/avoiding-duplicate-content-with-vercel-app-urls?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=related) — Discover why search engines may treat your vercel.app URL and custom domain as separate pages, and how to consolidate ra

Full cross-link map for this page: [/kb/guide/troubleshooting-content-link.graph.md](/kb/guide/troubleshooting-content-link.graph.md?from=related&source_path=%2Fkb%2Fguide%2Ftroubleshooting-content-link&source_site=vercel-kb&relationship=graph)
<!-- /docsgraph:related -->


## The styling of the editable fields is incorrect

If the text on the page is breaking out of its container, it can be resolved by splitting the encoded text out from the original text.

This is not due to the encoded characters themselves. This problem should only present itself if the element sets `letter-spacing` in its CSS or is inside of a `<ReactWrapBalancer>`.

### How to fix

Add the `@vercel/stega` npm package to your project, if it’s not already installed:

```bash
npm i @vercel/stega
```

Then identify where the problematic element is rendered in code, for example:

```jsx
function MyComponent({ text }) {
  return <h1>{text}</h1>;
}
```

This could be rewritten using `@vercel/stega` to avoid any styling issues:

```jsx
import { vercelStegaSplit } from '@vercel/stega';

function MyComponent({ text }) {
  const { cleaned, encoded } = vercelStegaSplit(text);

  return (
    <h1 data-vercel-edit-target>
      {cleaned}
      <span style={{ display: 'none' }}>{encoded}</span>
    </h1>
  );
}
```

## Formatting dates throws an error

If the text on the page is breaking out of its container, it can be resolved by splitting the encoded text out from the original text.

### How to fix

Add the `@vercel/stega` npm package to your project, if it’s not already installed.

```bash
npm i @vercel/stega
```

Then identify where the date is formatted in code, for example:

```jsx
function formatDate(datestring) {
  const date = new Date(datestring);
  return date.nicelyFormatted();
}
```

This could be rewritten using `@vercel/stega` to avoid any parsing issues:

```jsx
import { vercelStegaSplit } from '@vercel/stega';

function formatDate(datestring) {
  const { cleaned, encoded } = vercelStegaSplit(datestring);
  const date = new Date(cleaned);
  return `${date}${encoded}`;
}
```

## The wrong element is being highlighted

If the wrong element is highlighted when you start editing, it can be resolved by adding an attribute to the correct element.

### How to fix

For example, if this component highlights the `<h1>` and you want it to highlight the entire `<section>` element:

```jsx
<section>
  <h1>{dynamicTitle}</h1>
  <div>Hardcoded Tagline</div>
</section>
```

You could add the `[data-vercel-edit-target]` attribute to the element you expect it to highlight:

```jsx
<section data-vercel-edit-target>
  <h1>{dynamicTitle}</h1>
  <div>Hardcoded Tagline</div>
</section>
```