Editor Not Loading

This page covers the most common reasons the Pexelize editor renders a blank area or never appears.

Wrong or missing containerId

What you see: The target <div> stays empty. The editor does not render.

Why it happens: createEditor() (or the React/Vue wrapper) cannot find a DOM element with the ID you passed.

Fix: Make sure the ID matches exactly (case-sensitive) and the element exists in the DOM before the SDK initialises.

// Correct
pexelize.createEditor({ containerId: 'pexelize-container', /* ... */ });

<!-- The element must already exist -->
<div id="pexelize-container" style="height: 600px;"></div>

In React, the <PexelizeEditor> component handles this automatically -- just make sure it is mounted (not conditionally hidden with display: none and zero dimensions).

---

Missing editorKey

What you see: A console error: editorKey is required to load editor.

Why it happens: The required editorKey credential was omitted or is undefined.

Fix: Pass your editor key from your Pexelize dashboard.

pexelize.init({
  containerId: 'pexelize-container',
  editorKey: 'px_a1b2c3d4e5f6g7h8',   // from dashboard
});

---

Content Security Policy blocking the iframe

What you see: The browser console shows Refused to frame 'https://editor.pexelize.com' or a similar CSP violation.

Why it happens: Your page's Content-Security-Policy header doesn't include the Pexelize editor domain in frame-src.

Fix: Add the Pexelize domain to your CSP. See the CSP & iframe Issues page for full header examples.

Content-Security-Policy: frame-src 'self' https://editor.pexelize.com;

---

Container has zero height

What you see: The editor initializes (no console errors) but nothing is visible on screen.

Why it happens: The container <div> has no explicit height, so the editor renders with 0px height.

Fix: Give the container a fixed or relative height.

<!-- Option A: fixed height -->
<div id="pexelize-container" style="height: 700px;"></div>

<!-- Option B: fill parent -->
<div id="pexelize-container" style="height: 100%; min-height: 500px;"></div>

If using minHeight on the React component, make sure the parent element also has a height:

<div style={{ height: '100vh' }}>
  <PexelizeEditor minHeight="100%" /* ... */ />
</div>

---

SDK script not loaded

What you see: pexelize is not defined in the console.

Why it happens: The SDK script tag is missing, failed to load, or your code runs before the script has finished loading.

Fix (vanilla JS): Add the script tag and wait for it to load.

<script src="https://cdn.pexelize.com/sdk/latest/pexelize.min.js"></script>
<script>
  window.addEventListener('load', () => {
    pexelize.createEditor({ /* ... */ });
  });
</script>

Fix (npm): Make sure the package is installed.

npm install @pexelize/react-editor
# or
npm install @pexelize/vue-editor
# or
npm install @pexelize/angular-editor

---

Quick checklist

Check	How to verify
Container element exists in DOM	document.getElementById('pexelize-container') returns a node
Container has non-zero height	getComputedStyle(el).height is not "0px"
editorKey is set	Log it before calling init
SDK script loaded	typeof pexelize !== 'undefined' is true
No CSP errors	Browser console shows no Refused to frame messages