webflow.createDOM is not a function

App Developers Designer Extensions
1

Hello,

I’m creating a Webflow Designer App in React, and am getting the error "webflow.createDOM is not a function”.

I’ve logged the Webflow object to confirm, and createDOM isn’t there.

A few things I’ve checked:

  • Permissions issues: I’ve enabled designer permissions
  • Serving the app: I’m serving it with webflow extension serve, and other methods on the Webflow object are working fine
  • Trying a different app: I’ve tried creating a brand new Webflow app in case it’s a permissions thing, but no dice.

The React code is:

import React from 'react';
import ReactDOM from 'react-dom/client';

const rootForReact = ReactDOM.createRoot(document.getElementById('root'));

const handleClick = async () => {
  console.log('Webflow object is', webflow); // *Should* log the Webflow object, complete with createDOM
  const element = await webflow.getSelectedElement();
  console.log('element is', element); // Logs the selected element
  const newEl = webflow.createDOM("p"); // Errors because there's no webflow.createDOM
}

rootForReact.render(
  <React.StrictMode>
<button onClick={handleClick}>Insert DOM Element</button>
  </React.StrictMode>
);

I’ve created a minimal React/Webflow/Webpack repo to illustrate the problem:

Thank you,

2

Hey, it looks like you’re using the v2 of the Designer Extension API (based on your webflow.json manifest) which uses a different pattern for creating DOM elements. Now, elements are created using the elementPresets enum which includes both DOM and native element types., eg: webflow.elementPresets.DOM

Here’s a snippet which shows how this pattern is used in action

We have much more detailed public docs for Designer API v2 coming soon.

1 Like
3

Really appreciate the quick response.

The v2 docs directly refer to the create DOM element object and others, so probably worth relabelling this…

In any case, I’m back on track - thanks for the help!

1 Like