Builder's SDK, by default, sets some trusted hosts which are necessary for loading the application with Builder's Visual Editor. If needed, you can adjust this list.
Builder's SDK sets a few trusted hosts with a domain of builder.io . Adjust this list of trusted hosts manually within code. By default, Builder's SDK identifies the following hostnames as trusted:
localhost
builder.io
beta.builder.io
*.beta.builder.io
qa.builder.ioWhile useful in certain situations, the hostnames that include beta or qa can be safely removed from the trusted hosts lists without impacting functionality.
Builder's SDK stores trusted hosts internally. These can be changed with a bit of code.
Framework
React Svelte Vue Qwik (Beta) React Native Angular
Meta-Framework
None Remix Hydrogen Next.js (Pages Router) Next.js (App Router) Gatsby
Gen 1 (Recommended) Gen 2 import { Builder } from "@builder.io/react";
Builder.trustedHosts = [ /* list of hosts here */ ];import { Content } from "@builder.io/sdk-react";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Builder } from "@builder.io/react";
Builder.trustedHosts = [ /* list of hosts here */ ];import { Content } from "@builder.io/sdk-react";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Builder } from "@builder.io/react";
Builder.trustedHosts = [ /* list of hosts here */ ];import { Content } from "@builder.io/sdk-react";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Content } from "@builder.io/sdk-react";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Builder } from "@builder.io/react";
Builder.trustedHosts = [ /* list of hosts here */ ];import { Content } from "@builder.io/sdk-react";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Builder } from "@builder.io/react";
Builder.trustedHosts = [ /* list of hosts here */ ];import { Content } from "@builder.io/sdk-svelte";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Content } from "@builder.io/sdk-vue";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Content } from "@builder.io/sdk-vue";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Content } from "@builder.io/sdk-qwik";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Content } from "@builder.io/sdk-react";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Builder } from "@builder.io/react";
Builder.trustedHosts = [ /* list of hosts here */ ];import { Content } from "@builder.io/sdk-react";
// Within your component...
<Content
trustedHosts={[ ... ]}
/>import { Builder } from "@builder.io/angular";
Builder.trustedHosts = [ /* list of hosts here */ ];Keep in mind, adjusting this list may affect integration with Builder's Visual Editor.
Was this article helpful?
