Webflow Class Importer

A lightweight tool for batch importing CSS class names into the Webflow UI.

Created by Sam Pilgrim.

Instructions

  1. Type a list of class names into the field below, separated by commas, spaces and/or line breaks.
  2. Click the Copy button.
  3. Open your Webflow project and paste (Ctrl+V / ⌘V).
  4. Divs with these classes will be added to the page.

About this tool

It was born from the need to import dozens of colour and spacing token classes where the styling was handled by external CSS, but the classes were needed inside the UI so they could be easily added to elements. Adding these classes into Webflow manually was a laborious process.

Note that this tool imports class names only – it does not (currently) handle styling. You can target these classes with custom CSS or add styling to them like any other class in Webflow.

If a class already exists in Webflow, it may be renamed ("classname 2" etc).

If you get an error when attempting to paste into Webflow, be sure to check that you're writing valid CSS class names.

Disclaimer

This is a basic, thrown-together-in-an-evening tool that's undergone limited testing. It doesn't sanitise inputs very much, and probably won't handle being fed weird characters, quote marks or so on. I won't be held responsible if you type a gazillion emojis and your project goes weird.