Webflow Web CMS Item Relationship Viewer

WHAT IT DOES

Webflow Web CMS Item Relationship Viewer automatically scans Webflow CMS collection pages and item detail pages to extract comprehensive relationship data between CMS items including references, multi-references, and collection linkages. The tool displays a floating overlay panel showing a visual relationship map of connected CMS items—each item is represented as a node with relationship arrows showing the direction of references. Items that are referenced by other items are highlighted, and multi-reference relationships are indicated with special badges. The panel shows the current item name, a list of all detected relationships with arrows connecting related items, related items tags, and statistics including reference count, unique items, and total relationships. This provides a complete, organized view of your Webflow CMS content structure and helps you understand data dependencies.

WHERE IT RUNS

This extension operates exclusively on webflow.com domain pages that contain CMS collection and item content—specifically pages with "/cms", "/collections", "/items", or "/design" in the URL path, or pages that display CMS items and collection data. It works alongside the free BotGentz companion extension, which provides the necessary DOM access and page interaction capabilities. The relationship viewer runs entirely within your local browser instance and does not communicate with any external servers or APIs. All relationship data extraction, mapping, and preference storage are processed and stored on your machine, ensuring your CMS data and tracking preferences remain private. It supports all modern Chromium-based browsers (Chrome, Edge, Brave, Opera) and Firefox when paired with the BotGentz bridge.

HOW TO USE

After installing both BotGentz and this relationship viewer, navigate to any Webflow CMS collection or item detail page. Within 1-2 seconds, a panel appears in the bottom-right corner displaying the current item name (if on a detail page). The "Relationships" section shows all detected relationships with arrows connecting source and target items. The "Related Items" section lists all CMS items that appear in relationships. The "Stats" section shows reference count, unique items, and total relationships. The panel provides a complete, organized view of your CMS content structure and helps you navigate complex content relationships.

CMS RELATIONSHIP DATA EXTRACTION AND MAPPING

The relationship viewer uses a multi-strategy extraction system to locate and parse relationship data from Webflow CMS pages. It first attempts to find structured item and relationship elements using selectors based on the site's typical class naming patterns, including "item-card," "cms-item," "collection-item," and "entry-item." When these selectors fail due to site updates, the tool falls back to text-based parsing, scanning the page for relationship-related patterns using pattern matching for item names, reference indicators, and collection labels. Item names are extracted from title elements or through pattern matching. References are extracted through pattern matching for @mention patterns, "reference:" labels, or "multi-reference:" labels with comma-separated values. Collection linkages are extracted through pattern matching for "collection:" labels. The tool also looks for "used in" or "referenced by" patterns to identify inverse relationships. All relationships are displayed with directional arrows (→) showing the flow from source to target items. Statistics are calculated from the extracted relationship data. All data is presented in a clean, organized panel with color-coded indicators.

THE PANEL

The relationship viewer panel is a compact, functional overlay that integrates into the Webflow CMS page. It can be dragged by clicking and holding the title bar, positioning the panel anywhere on the screen for optimal visibility while you explore content relationships. The panel includes a built-in snap feature that automatically aligns to the nearest screen edge when released within 48 pixels, keeping your workspace organized. Click the collapse arrow in the top-right corner to minimize the panel to a small icon bubble showing a gear emoji, preserving screen space while keeping the tool accessible. The panel is not resizable in this version, maintaining a consistent compact size that works on all screen resolutions. Press the Escape key to instantly hide the panel; press Escape again to restore it. All position, collapse state, and relationship tracking preferences are saved locally using GM_setValue and persist across browsing sessions.

PLEASE NOTE

This extension requires the free BotGentz extension to function—the relationship viewer does not work standalone. Webflow occasionally updates its page layouts and CMS presentation formats, which may temporarily affect relationship data extraction accuracy. The tool extracts relationship data from the visible page content; if CMS items are loaded dynamically after page load, you may need to wait a moment or refresh the page for the panel to populate. Relationship detection is based on pattern matching and may not capture all relationship types with perfect accuracy. The tool does not store or transmit any data; all relationship data extraction, mapping, and settings are processed and saved entirely within your browser. This tool is designed for personal CMS management and is not affiliated with or endorsed by Webflow or its parent company. CMS relationship data is subject to Webflow's terms; always review your official Webflow account for authoritative CMS information.