A custom error page displayed when visitors try to access a URL that doesn’t exist on your site. A well-designed 404 page helps retain visitors by offering navigation options and search functionality rather than a dead end. Framer lets you create branded 404 pages that match your site’s design and guide users back to relevant content.

An HTML element that tells search engines which URL is the ‘official’ version of a page when duplicate content exists at multiple addresses. This prevents SEO dilution from copied content, URL parameters, or www/non-www variations. Framer automatically generates canonical tags, and you can customize them in page settings for specific SEO requirements. See Setting up a custom canonical URL in Framer.

A custom React component written in code that extends Framer's capabilities beyond built-in features. Code components enable advanced functionality like custom animations, API integrations, and complex interactive elements. They live alongside visual components and can accept properties that designers control without touching code.

Framer Motion is now Motion, a high-performance animation library for React and JavaScript. The old name still appears in tutorials and search results, but current docs and packages use Motion.

If you are building a website in Framer, you do not need to install Motion or write Framer Motion code. Framer has Motion-powered animation tools built into the canvas, so you can create polished animations visually: appear effects, scroll animations, hover and tap states, transitions, and component variants. That gives you Framer Motion-style results without setting up npm, importing an animation library, or maintaining custom React animation code.

Bringing websites to life with animation in Framer

2:31

If your goal is to build a website, start with Framer instead of reaching for animation code first. You can design the page, add motion, and publish from one visual workflow — then use custom code only when a project truly needs it.

Use Motion directly when you are building a custom React or JavaScript app and need code-level animation control. Use Framer when you want to design, animate, and publish a site visually.

To learn the no-code path, explore Framer’s Academy, or open the Framer homepage to start building visually.

A tag management system for deploying tracking codes and scripts without modifying site code directly. GTM centralizes third-party tool management and simplifies analytics implementations. Add GTM to Framer through the custom code section for flexible tracking management.

Custom code or settings that modify default component behavior without changing the original component definition. Overrides enable page-specific customizations while maintaining reusable component libraries. Use Framer’s code overrides for interactions that go beyond visual property changes.

An extension that adds functionality to a software platform beyond its built-in capabilities. Plugins extend tool capabilities without core software changes. Evaluate plugin quality and maintenance before depending on them in production.

Interface elements that allow adjusting component properties visually, exposing customization options to designers. Property controls make components flexible and reusable across different contexts. In Framer, add property controls to code components for designer-friendly customization.

A JavaScript library for building user interfaces through composable components and declarative rendering. React's component model powers many modern web applications and design tools. Framer is built on React, enabling code components and advanced customizations.

An enhanced component with logic, state management, or interactive capabilities beyond static visual properties. Smart components respond to user input, fetch data, or manage complex state. Build smart components with code when visual tools aren’t sufficient.

Framer’s enhanced vector editing capabilities with improved path manipulation and boolean operations. Vectors 2.0 enables more sophisticated graphic creation directly within Framer. Use vector tools for icons, illustrations, and custom shapes.

A font loaded from the web rather than installed locally, ensuring consistent typography for all visitors. Web fonts expand typographic options beyond system fonts but add loading time. Framer provides Google Fonts integration and supports custom font uploads for brand fonts.

Software application used to access and display websites, including Chrome, Safari, Firefox, and Edge, each with slightly different rendering behaviors. Cross-browser compatibility ensures your site works correctly for all visitors regardless of their browser choice. Framer generates clean, standards-compliant code that renders consistently across modern browsers.

Document Object Model — the programming interface representing HTML documents as a tree structure that JavaScript can manipulate. Understanding the DOM helps debug layout issues and write effective custom code.

The process of removing unnecessary characters from code—whitespace, comments, line breaks—to reduce file size. Minification speeds up loading without changing functionality, typically applied to CSS and JavaScript. Framer automatically minifies code for production deployment.

A self-contained interactive element that provides specific functionality, often embeddable from third-party services. Widgets extend site capabilities without custom development—chat widgets, calendars, and forms are common examples. Consider performance impact when adding widgets and lazy load when possible.

The Framer interface panel used to add elements, components, sections, and assets to a page. It centralizes building blocks so you can quickly compose layouts and interactions. See Using the insert panel in Framer.

A Sandbox is a constrained runtime environment that limits file, network, or system access to reduce risk during automated execution.

Framer plugins help teams add new capabilities to the editor, automate repetitive work, and connect design workflows to external services without leaving the project.

Framer custom cursors can add interaction feedback, brand personality, or contextual hints while visitors move through highly designed pages.

In Framer, resource culling supports leaner pages by keeping unnecessary media, scripts, and interface resources out of the critical loading path.