Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

This document provides a collection of tips and solutions to help you integrate with Builder effectively. It covers common scenarios such as resolving API key mismatches, fixing model name discrepancies, and enabling data-bindings in Node environments.

If you get a message in the Visual Editor that there's an API Key mismatch, it means that Builder and your codebase are using different API keys.

Since each Space has its own Public API Key, if you have more than one Space in your Organization, make sure you are using the Public API Key for the intended Space.

To confirm that you're using the correct Public API Key, check that the API Key in your codebase and the Public API Key in Builder are the same.

If you get a message in the Visual Editor that there's a model name mismatch, it means that the Builder model name and the code component name in your codebase aren't the same.

To confirm that you're using the correct model name:

  1. In Builder, go to Models.
  2. Open the model in question and go to Advanced.
  3. Make sure the Unique Identifier is the same as the model name of the component in your codebase.

If you're getting a 404 but aren't sure why, check these things:

  • Make sure you've published your page in Builder by clicking the Publish button in the upper right corner.
  • Check the URL. If you name the page test2 for example, Builder adds a hyphen, so that the URL segment is test-2.
  • Make sure that you've set the preview URL on the Page Model.
  • For some frameworks, you might have to restart the dev server.

In certain Node server environments, the builder SDK may require additional initialization steps, namely the initialization of a package called isolated-vm (used to safely evaluate your data bindings).

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Visual Copilot

Visual Headless CMS

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Ebook

SaaS Marketing Site Ebook

Composable Commerce Ebook

Headless CMS Guide

Headless Commerce Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get StartedLog In
© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences