# Data binding in Rich Text Fields

**URL:** <https://forum.builder.io/t/data-binding-in-rich-text-fields/7784>\
**Category:** CMS\
**Created:** [January 28, 2025, 12:42am UTC](https://forum.builder.io/t/data-binding-in-rich-text-fields/7784 "2025-01-28T00:42:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![wsaunders](https://avatars.discourse-cdn.com/v4/letter/w/f04885/32.png) [@wsaunders](https://forum.builder.io/u/wsaunders)\
**Post date:** [January 28, 2025, 12:42am UTC](https://forum.builder.io/t/data-binding-in-rich-text-fields/7784/1 "2025-01-28T00:42:10Z")

</div>

According to this knowledgebase article it should be possible:

> **[Custom Data and Context - Builder.io](https://www.builder.io/c/docs/custom-actions#data-binding-in-rich-text-fields)**
>
> Enhance Builder experiences with custom data and context. Pass down data and functions for dynamic UI elements.

However doing {{state.productName}} shows up as is. I’ve followed the instructions on [Integration Tips - Builder.io](https://www.builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments) and added isolated-vm. I’m also attempting this on localhost.

Not sure what I’m missing?

I’ve tried putting it in custom code, I’ve tried setting state.productName in the Custom Code at the page level and editing the RTE field as code. I’ve added a content input to try and set State as well

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 28, 2025, 11:12am UTC](https://forum.builder.io/t/data-binding-in-rich-text-fields/7784/2 "2025-01-28T11:12:31Z")

</div>

Hi @wsaunders,

Could you let us know which builder SDK and version you’re using? This will help us try to reproduce the issue on our end.

It seems to be working fine with the [fallback editor](https://www.builder.io/c/docs/guides/fallback-editor), so we suspect the issue might be related to a particular SDK or implementation.

Looking forward to your response!

 ![Screenshot 2025-01-28 at 4.37.36 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/c/c1ce40ebb9a6d04d6dc75a0f8267987723ea6998.png)

> **[Custom Code in the Visual Editor - Builder.io](https://www.builder.io/c/docs/guides/custom-code#managing-state-and-actions)**
>
> Add custom JavaScript and CSS to your Builder content. Learn how to access browser events, state properties, and add custom CSS to your pages.

> **[Data Binding - Builder.io](https://www.builder.io/c/docs/data-binding)**
>
> Leverage data binding in Builder to dynamically update text, images, and more based on live data or custom code to create flexible and data-driven content.

---

<div class="post-metadata">

**Author:** ![wsaunders](https://avatars.discourse-cdn.com/v4/letter/w/f04885/32.png) [@wsaunders](https://forum.builder.io/u/wsaunders)\
**Post date:** [January 29, 2025, 11:45pm UTC](https://forum.builder.io/t/data-binding-in-rich-text-fields/7784/3 "2025-01-29T23:45:59Z")

</div>

We are using [Builder.io: Visual Development Platform](http://builder.io/react) 8.0.4 and [Builder.io: Visual Development Platform](http://builder.io/sdk) 6.0.2. On top of next.js hosted through vercel.

When I try to use the fallback editor, it also doesn’t work.

 ![Screenshot 2025-01-29 at 3.49.36 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/e949732c993326cccd3c9cd347706e35e333aa96.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 30, 2025, 10:38am UTC](https://forum.builder.io/t/data-binding-in-rich-text-fields/7784/4 "2025-01-30T10:38:48Z")

</div>

Hi @wsaunders,

This issue is a known configuration challenge with Vercel. In certain Node server environments, the Builder SDK may require additional initialization steps, particularly for a package called `isolated-vm`, which is used to safely evaluate your data bindings.

If you’re using Builder’s Gen 1 SDKs and data binding with a provider that uses edge workers (e.g., Cloudflare, Netlify, or Vercel), you might encounter issues where certain dependencies are automatically removed during ISR (Incremental Static Regeneration) functions.

Two key indicators can help identify this issue:

- **Hydration errors** : When SSR and client-side versions differ because the data binding did not execute on the server.
- **Missing data** : When data is missing on the server side but appears on the client side, indicating that data binding didn’t execute on the server.

This may result in a failure with the `safeDynamicRequire` function. To resolve this, consider the following workaround.

### For Next.js Pages Router:

In the `pages/_document.jsx` file (or any server-only execution location), add the following code:

```js
import ivm from 'isolated-vm';
import { Builder } from '@builder.io/react';

const isolate = new ivm.Isolate({ memoryLimit: 128 });
const context = isolate.createContextSync();
Builder.setServerContext(context);

```

If your project doesn’t have a `_document.tsx` file, you can place the code elsewhere, but make sure to wrap it with this condition:

```js
if (Builder.isServer) {
  // Add the provided code here
}

```

### For App Router:

In the `page.tsx` responsible for rendering Builder content, import `isolated-vm` at the start of the Page component:

```js
export default async function Page(props) {
  // Import must be inside the Page component
  await import('isolated-vm');

  //... the rest of your component logic
}

```

Then, in your `next.config.js`, add `isolated-vm` to the `experimental.serverComponentsExternalPackages` list:

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["isolated-vm"],
  },
};

export default nextConfig;

```

For more details, please refer to the following link: [Builder SDK Integration Tips](https://www.builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments).

I hope this helps! Let us know if you need further assistance or have any other questions.

Thanks,

---

<div class="post-metadata">

**Author:** ![wsaunders](https://avatars.discourse-cdn.com/v4/letter/w/f04885/32.png) [@wsaunders](https://forum.builder.io/u/wsaunders)\
**Post date:** [January 30, 2025, 9:06pm UTC](https://forum.builder.io/t/data-binding-in-rich-text-fields/7784/5 "2025-01-30T21:06:07Z")

</div>

I did that, however you should know that the info is outdated a bit. serverComponentsExternalPackages is now just serverExternalPackages, and is no longer under experimental.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [February 3, 2025, 9:40am UTC](https://forum.builder.io/t/data-binding-in-rich-text-fields/7784/6 "2025-02-03T09:40:33Z")

</div>

Hello @wsaunders,

Thank you for bringing this to our attention! I will submit a request to update the documentation accordingly.

Appreciate your help in keeping things up to date!

Thank,