Join us for our biggest AI launch event on 10/31

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

An API key is an alphanumeric string that you can use to connect your code base with Builder. Use the Builder Public API Key to integrate with Builder.

An example of a Builder API Key is bb209db71e62412dbe0114bdae18fd15.

To get the most our of this document, you should have the following:

  • A Builder account
  • An app in your framework of choice

Tip: The Builder Public API Key is public, meaning that you don't have to keep it private. Because of this, there are no inherent security risks in it being publicly viewable, for example, on GitHub.

You can find and copy your Public API Key with the following steps:

  1. Within your Builder Space, press Cmd/Ctrl + k to open the Command Palette.
  2. Start to type the letters API into the search field to filter results.
  3. Click your API key to copy to your clipboard.

Alternatively, you can also find your Public API Key in Account Settings for the Space:

  1. Within your Builder Space, go to the Account Settings section.
  2. Click the copy icon to the right of the Public API Key field.

The video below shows both ways to find the Public API Key.

Most JavaScript apps use builder.init() to pass in the Public API Key. Replace YOUR_API_KEY with the Public API Key you copied from Account Settings.

// Replace with your Public API Key
builder.init('YOUR_API_KEY')

The following example shows what an actual Public API Key looks like when passed into builder.init().

// an example of an actual API key passed into init()
builder.init('bb209fb71eh2412dbe0114bdae18fd15')

In Angular, pass your API Key into BuilderModule.forRoot(), by replacing YOUR_API_KEY with the Public API Key you copied in Account Settings. Place the forRoot() method in the @NgModule() imports array.

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    BuilderModule.forRoot(YOUR_API_KEY), // <-- Paste your API Key here.
    ...
  ],
  ...
})
export class AppModule {}

When you replace the YOUR_API_KEY placeholder, it looks similar to the following example.

// An example API Key in use
BuilderModule.forRoot('bb209fb71eh2412dbe0114bdae18fd15')

Use Private Keys when you want to create a server-side only key for writing to your Builder account or to pull content that you want to keep private.

To view or use Private API Keys, you must have Admin or Developer permissions.

Tip: Keep your Private API Key secret. It allows anyone to have write access to your content in Builder. Only use it in API calls from your server, not calls from public client applications.

Remember to ensure your Private API Keys are kept out of any version control system that you may be using.

With Organization Admin permissions, you can view, copy, or revoke the single, default Organization Private API Key. If you revoke the key, the dialogue gives you the option to create another key.

To manage the Private Key for your Organization:

  1. Go to the Organization Account Settings.
  2. To the right of Private Keys, click the Edit button.

For more information on Admin permissions at the Organization level, see Managing Your Organization.

If you need to manage or create multiple Private API Keys, go to the Space Account Settings, rather than the Organization settings.

To manage the Private Key for your Organization:

  1. Go to the Organization Settings.
  2. To the right of Private Keys, click the Edit button.
  3. Create or revoke as many keys as you need.

To use Private Keys in a Space, make sure the Public readable toggle in the model is turned off. Then use the Content API to request private content using a Private API Key.

For more information, see Creating a Private Page.

With your API Key in place, you can integrate powerful Builder features. To get started, check out the following tutorials:

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

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

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

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences