Editor Not Loading

This page covers the most common reasons the Dragble 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
dragble.createEditor({ containerId: "dragble-container" /* ... */ });

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

In React, the <DragbleEditor> 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 Dragble dashboard.

dragble.init({
  containerId: "dragble-container",
  editorKey: "db_a1b2c3d4e5f6g7h8", // from dashboard
});

---

Content Security Policy blocking the iframe

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

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

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

Content-Security-Policy: frame-src 'self' https://editor.dragble.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="dragble-container" style="height: 700px;"></div>

<!-- Option B: fill parent -->
<div id="dragble-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" }}>
  <DragbleEditor minHeight="100%" /* ... */ />
</div>

---

SDK script not loaded

What you see: dragble 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: Add the script tag and wait for it to load.

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

---

Quick checklist

Check	How to verify
Container element exists in DOM	document.getElementById('dragble-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 dragble !== 'undefined' is true
No CSP errors	Browser console shows no Refused to frame messages