ConvertexConvertex

Reference Styles

When you add converted content to an existing Webflow project, there is a risk of creating duplicate classes. Reference styles solve this problem by informing Convertex of the classes that already exist in your project.

How It Works

When Convertex has access to a Webflow project's reference styles, it:

  1. Compares each generated class with existing classes.
  2. Reuses identical classes instead of creating new ones.
  3. Avoids conflicts by adjusting new class names if necessary.

Setting Up Reference Styles

Copy Styles from Webflow

In your Webflow project, select an element that uses your main classes (or select the entire page) and copy it (Cmd+C).

The JSON copied to the clipboard contains the style definitions of all copied elements.

Upload to Convertex

  1. Open the project settings in Convertex.
  2. Click Upload Reference Styles.
  3. Paste the JSON copied from Webflow.
  4. Convertex parses the classes and stores them as a reference.

Convert as Usual

From now on, each conversion in this project will compare generated classes with the reference styles. Duplicates are automatically deduplicated.

When to Use Them?

  • Ongoing projects where you add converted pages incrementally.
  • Teams where multiple people convert content for the same Webflow site.
  • Progressive migrations where the Webflow site already has styled content.

Reference styles are saved per project. If you work on multiple Webflow sites, each Convertex project has its own reference styles.

Updating Reference Styles

If you add new classes in Webflow, re-upload the reference styles so Convertex stays in sync:

  1. Copy a representative element in Webflow again.
  2. In the project settings, click Replace Reference Styles.
  3. Paste the new JSON.

The old references are replaced with the new ones.

On this page