How to identify if a website is built with Framer

Author

BRIX Templates

How to identify if a website is built with Framer



Table of contents

When exploring modern websites with impressive animations and interactions, you may wonder if they're built using Framer - a powerful design and development platform. Identifying Framer-built websites can provide valuable insights for designers, developers, and business owners alike.

This guide presents 2 straightforward methods to determine if a site is powered by Framer.

Why identifying Framer websites matters

Design research: Discover what's possible with Framer's advanced animation and interaction capabilities.
Technology assessment: Evaluate if Framer might be suitable for your upcoming website project.
Industry awareness: Understand which companies and competitors are leveraging Framer's capabilities.
Partnership potential: Identify organizations that might benefit from your Framer agency or freelancer services.

1. How to detect Framer sites using Wappalyzer (quick method)

The simplest approach is using Wappalyzer, a browser extension that automatically detects technologies used on websites:

Install Wappalyzer on your browser:
Browse to the website you want to investigate
Open the Wappalyzer extension
- Check if "Framer Sites" appears in the list of detected technologies
- Typically found under "CMS" or "Page Builder" categories

How to detect Framer sites using Wappalyzer

This method requires minimal technical knowledge and provides instant results.

2. How to detect Framer sites by examining the source code (detailed method)

For a more thorough verification or when you can't use browser extensions, manually inspecting the website's source code is reliable:

1. Open the page source

Right-click anywhere on the website
Select "View Page Source" (or use keyboard shortcut for it)

How to detect Framer sites by examining the source code

2. Look for these Framer identifiers

Check for the Framer comment:

<!-- ✨ Built with Framer • https://www.framer.com/ -->

This distinctive comment often appears near the top of Framer-built sites.

Look for the Framer generator meta tag:

<meta name="generator" content="Framer 03f754e">

The version number may vary, but the presence of "Framer" in the generator content is a clear indicator.

Find Framer-specific class names:

<body class="framer-body-o54z0ferL-framer-p3ri2">

Framer adds unique class names with the "framer" prefix to body and container elements.

Identify Framer script sources:

<script async src="https://events.framer.com/script">

Scripts loaded from Framer domains provide strong confirmation.

Look for Framer data attributes:

data-framer-hydrate-v2="..."

These specialized attributes are used for Framer's component hydration.

Check for the Framer badge container:

<div id="__framer-badge-container"></div>

This element is often present even if the badge itself is disabled.

Finding one or more of these markers confirms that a website is built with Framer. Multiple matches provide stronger verification.

Conclusion

Identifying Framer-built websites is straightforward using either Wappalyzer for quick detection or source code inspection for more detailed confirmation. Recognizing Framer sites can help you understand current design trends, evaluate the platform for your own company projects, and spot potential clients or partners who are already using this technology.

Whether you're researching competitors, gathering inspiration, or considering Framer for your next website, these identification methods will give you a clear answer about which sites are leveraging Framer's capabilities. If you need assistance with Framer development or are considering it for your next project, our Framer agency offers specialized services to help you make the most of this powerful platform.