CompSwap - Component Converter

What is CompSwap?

CompSwap instantly converts components from third-party component libraries (aka Relume) to match your CSS framework—Client-First, MAST, FeatherWeight, Saddle, or a custom setup. Paste, convert, and build faster with perfectly mapped classes, variables, and zero “Error: Unknown variable” headaches.

Key Features

• Instant Conversion:
• Paste any component → get a converted component that matches your class names and variables. One click copy to clipboard.
• Pre-Built Templates:
• Start fast with ready-made mappings for Client-First, MAST, FeatherWeight, and Saddle or your own setup.
• Custom Mapping System:
• Define how variables and classes from third-party component library (aka Relume) translates into your framework. Normalize styles, support combo classes, and remove unused classes for lean, production-ready output.
• Variable mapping: Convert Relume CSS variables to your project tokens.
• Class mapping: Replace Relume classes with your Webflow classes.
• Save Mapping Configuration:
• Save your mapping configuration to Webflow Assets. Import/export CSV to share with your team. Persistent settings for consistent output.
• Resilient & Consistent:
• Avoid duplicated classes and eliminate “Error: Unknown variable” when pasting components from third-party component libraries (aka Relume) into Webflow.

How It Works

1. Map Once:
2. Open Mapping Configuration and either:
3. - Map variables/classes manually (one by one), or
4. - Load a template (Client-First, MAST, FeatherWeight, Saddle) and tweak.
5. Save Configuration:
6. Click Save to persist your mappings (for this project and future components).
7. Paste & Convert:
8. Copy a component from third-party library (aka Relume), paste into CompSwap, and instantly get the converted component with your classes and variables. Copy and paste into Webflow.

Use Cases

• Use third-party library (aka Relume) with any CSS framework or style system.
• You’re no longer limited to Client-First—run MAST, FeatherWeight, Saddle, or your own style system seamlessly.
• Drop components into already-styled projects
• Keep brand and design system consistency while reusing Relume components.
• Prevent paste errors.
• Stop the “Error: Unknown variable” issues with correct token mapping.
• Empower non-technical editors
• Let content/design teammates add Relume components without breaking the site’s look and feel.
• Reduce class clutter and bloat
• Avoid duplicate classes and normalize output for cleaner CSS and faster maintenance.

FAQ & Tips

• Does CompSwap change my component structure?
• No. It preserves layout, elements, and interactions; only classes and variables are remapped.
• Can I mix frameworks or customize tokens?
• Yes. Load any template and adjust mappings, or start from scratch with your own system.
• Why do I see “Error: Unknown variable” in Webflow?
• That happens when tokens don’t exist in your project. CompSwap prevents this by converting Relume variables to your tokens.
• Team workflow?
• Export/import CSV mappings so everyone uses the same class/variable dictionary.

This application is independently developed and is not affiliated with, endorsed by, or associated with Relume or any of its products or services.