Relume

How to integrate Relume with Webflow

Relume provides pre-built components and wireframes that speed up Webflow site development. Teams use Relume to build marketing sites, SaaS products, and e-commerce stores with consistent design systems and clean semantic code.

You can integrate Relume with Webflow through the Relume official Webflow app, direct copy-paste from the component library, or by adding dynamic functionality with Webflow's APIs. The Marketplace app imports complete sitemaps and wireframes directly into your projects. The component library lets you copy individual sections without installation. Webflow's APIs add programmatic content management and webhook-triggered workflows to your imported designs.

Use the Relume Webflow App

The Relume Webflow App connects to your Webflow projects through the official Marketplace. Install it to import complete sitemaps, individual wireframes, and global sections. The app creates components automatically and reuses existing global components when names match.

This integration enables the following actions:

• Import complete sitemaps with all pages and navigation hierarchies configured
• Select and place specific wireframe sections using drag-and-drop
• Create reusable global sections that update across multiple pages
• Reuse existing global components when names match or create new ones when they differ

Browse your saved Relume designs directly in the Webflow after connecting. Select elements to import and the app generates Webflow-native structure with class naming and responsive breakpoints. See the Relume import documentation for setup instructions.

Copy pre-built components from Relume Library

The Relume Webflow Library offers over 1,000 pre-built components that paste directly into Webflow projects. Browse by category, preview designs in your browser, and copy with one click. Components include responsive breakpoints and semantic HTML structure. This method works independently of the Marketplace app.

Access the library through your Relume account dashboard. Use filters and search to find specific component types. Click any component to preview it, then copy to your clipboard. Switch to Webflow Designer and paste using Cmd+V (Mac) or Ctrl+V (Windows). The component appears as Webflow-native elements ready for customization.

Components are organized into three categories:

• Marketing components include hero sections, feature grids, testimonial layouts, and call-to-action blocks
• E-commerce components provide product cards, cart interfaces, checkout flows, and collection displays
• Application UI components offer navigation systems, form layouts, dashboard interfaces, and data tables

Customize imported components using Webflow's visual styling controls. Relume follows a standardized style guide that makes global updates efficient. Modify colors, typography, spacing, and layouts without breaking responsive behavior. Changes to global components update automatically across all instances.

Update the Relume style guide to match your brand before importing multiple components to reduce manual adjustments. Access style settings through the Webflow Styles panel.

Build dynamic features with Webflow APIs

Relume provides static design structure. Dynamic functionality requires Webflow's API integration. The Webflow Data API provides programmatic content management, custom form handling, and third-party service connections. Use these APIs after importing Relume designs to add CMS integration, webhook triggers, and custom data processing.

Manage content through the CMS API

The Webflow CMS API lets you create, update, and delete collection items programmatically. Authenticate using site tokens with proper scopes configured. Send HTTP requests to collection endpoints to manage content that populates your Relume-based layouts.

The CMS API provides these endpoints:

• GET /collections returns all CMS collections and their field schemas
• POST /collections/{collection_id}/items adds new content to specified collections
• PATCH /collections/{collection_id}/items/{item_id} modifies existing collection entries
• DELETE /collections/{collection_id}/items/{item_id} removes content from collections

Authenticate requests using bearer token format with Authorization: Bearer YOUR_SITE_TOKEN. Configure tokens through your site's Settings > Apps & integrations > API access panel.

Required scopes include sites:read, sites:write, cms:read, and cms:write. The authentication documentation explains token generation and scope configuration.

Connect external services with webhooks

Webflow webhooks notify external systems when events occur on your site. Trigger custom workflows when forms submit, content publishes, or CMS items change. This connects Webflow to backend services like CRMs, analytics platforms, or custom databases.

Configure webhooks to send POST requests to your endpoint URL when trigger events fire. Available triggers include form_submission, site_publish, cms_item_created, cms_item_changed, and cms_item_deleted. Set up webhooks through the Webflow API or in site settings. The webhook documentation includes payload schemas and security verification methods.

What you can build

Integrating Relume with Webflow reduces development time from wireframe to published site while maintaining design system consistency and semantic code output.

• Marketing landing pages: Import Relume's tested layouts and connect form submissions to your CRM through Webflow webhooks. Add custom tracking scripts and A/B testing tools through custom code embeds.
• SaaS product sites: Build multi-page product sites with consistent navigation and component systems using Relume's application UI components for dashboard previews, feature comparisons, and pricing tables. Manage testimonials and feature descriptions through Webflow CMS collections.
• Agency portfolio sites: Create client project showcases using Relume's portfolio layouts with Webflow CMS for case studies. Filter projects by category, display team member profiles, and update content through the visual editor or the CMS API.
• E-commerce storefronts: Design product shopping experiences with Relume's e-commerce components and connect to external commerce APIs through custom code while using Webflow's native e-commerce for cart functionality, checkout flows, and inventory management.