---
title: "What Is Framer? The Website Builder Explained (2026)"
description: "Framer is a visual website builder: you design on a canvas and publish a fast, responsive site without writing code. How it works, what Framer 3.0 changed, pricing, and who it suits."
canonical_url: "https://framerhub.io/blog/what-is-framer"
last_updated: "2026-10-09T00:00:00.000Z"
---

Framer is a visual website builder. You design pages on a canvas, much like in Figma, and Framer turns that design into a fast, responsive website you can publish with one click, no code required. Since Framer 3.0 (June 2026) it also has AI agents that can build and edit pages inside your project.

We build Framer plugins and components used by 2,000+ Framer users, so we spend most of our week inside Framer projects, including the parts that don't make it into the marketing videos. This guide covers how Framer works, what it costs, what changed in 3.0, and where it stops being the right tool for your next site.

> **Key Takeaways**
> 
> - Framer is a no-code website builder. You design visually and publish a hosted, responsive site with built-in SEO basics.
> - Framer 3.0 (June 16, 2026) added AI agents that design pages, set breakpoints, create components and connect the CMS inside your existing project.
> - There's a free plan for non-commercial sites; paid plans start at $10/month (Basic) and $30/month (Pro) as of October 2026.
> - It fits designers, startups, freelancers and marketing teams; it's a weaker fit for large online stores, very large CMS catalogues and app-like products.
> - When native features run out (filtering, forms, galleries), the Marketplace fills the gap with plugins and components.

## What is Framer?

Framer is a design-first website builder made by Framer B. V., a company based in Amsterdam. It started as a prototyping tool for interface designers and became a full website builder in 2022. Today it's used for marketing sites, landing pages, portfolios and content sites that need to look custom without a developer.

Here's Framer at a glance:

<table>
<thead>
  <tr>
    <th>
      
    </th>
    
    <th>
      
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Type
      </strong>
    </td>
    
    <td>
      Visual website builder with hosting
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Code needed
      </strong>
    </td>
    
    <td>
      No (optional React code components)
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Built for
      </strong>
    </td>
    
    <td>
      Designers, startups, freelancers, agencies, marketing teams
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Includes
      </strong>
    </td>
    
    <td>
      Canvas editor, responsive breakpoints, animations, CMS, hosting, SEO settings, analytics
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        AI
      </strong>
    </td>
    
    <td>
      Framer Agents (since Framer 3.0)
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Price
      </strong>
    </td>
    
    <td>
      Free plan; paid from $10/month
    </td>
  </tr>
</tbody>
</table>

Framer Motion is a different product. It's an open-source React animation library that started at Framer and now lives on as Motion. If you landed here looking for animation code for React, that's the one you want. Everything below is about Framer the website builder.

## How does Framer work?

Framer works in three steps: design on the canvas, make it responsive, publish.

### 1. Design on the canvas

You build pages from frames, text, images and stacks (Framer's auto-layout). If you've used Figma, the canvas feels familiar: drag, resize, set styles. You can also paste designs from Figma with a plugin, start from a template, or ask an agent to lay out a page for you.

### 2. Make it responsive

Every page has breakpoints (desktop, tablet, phone by default). You adjust layout per breakpoint and Framer generates the responsive site. Animations, scroll effects and hover states are set visually in the same panel.

### 3. Publish

Publishing pushes the site to Framer's hosting. You get a free `framer.website` subdomain, or connect a custom domain on a paid plan. Pages are served as static files from Framer's hosting.

<blog-cta button-link="/components" button-text="Browse Components" description="90+ ready-made Framer components: effects, galleries, sliders and CMS layouts you can drop into any project." title="New to Framer? Start with the building blocks" variant="blue">



</blog-cta>

## What changed in Framer 3.0?

[Framer 3.0](https://www.framer.com/updates/framer-3) shipped on June 16, 2026. Its headline feature is Agents, AI that works on the canvas inside your real project and uses your styles, components and CMS. According to Framer, agents can design entire pages, create breakpoints, add effects, build components, write code, connect content to the CMS and organise styles. Everything they produce stays editable like anything you'd built by hand.

The release also added:

- **Branching**: work on a copy of the site, compare changes and merge when they're approved. Useful when several people (or agents) edit the same site.
- **Community**: a new space for creators to share and sell templates, components and plugins.
- **A redesigned editor**.

Since then, Framer has kept shipping on top of it, including **Skills** (September 2026), which save reusable instructions like your design system or writing style for the agent, and a **List field** for repeating content in the CMS. Agents run on monthly AI credits that come with each plan.

## What can you build with Framer?

Framer is best at sites where design quality drives results:

- **SaaS and startup marketing sites**: landing pages, pricing pages, changelogs.
- **Portfolios**: designers, studios and photographers.
- **Agency and freelance client sites**: fast to build, and clients can edit content themselves.
- **Blogs and content sites**: the CMS handles posts, authors and categories.
- **CMS-driven directories**: real estate listings, job boards, resource libraries.

The last category is where we see most projects hit Framer's native limits. A directory lives or dies on search and filtering, and Framer's built-in filters cover simple cases only. We've written up exactly [where native filtering stops](/blog/framer-dynamic-filters-guide) and what to do about it.

## Do you need to know how to code?

No. You can design, build and publish a complete site without writing a line of code.

Code is there when you want it. Framer supports **code components** (React components you can drop on the canvas) and **code overrides** (small snippets that change how an element behaves). React knowledge helps here, but you only need it for custom behaviour.

## Is Framer the same as Figma?

No. Figma designs interfaces and Framer publishes websites. Figma is where teams mock up and prototype; its files don't become live sites on their own. Framer outputs a hosted production website.

A common setup is to design in Figma and build the production site in Framer. We compare the two in detail, including Figma Sites, in [Framer vs Figma](/blog/framer-vs-figma).

## Does Framer have a CMS?

Yes. Framer's CMS stores content in **collections** (blog posts, team members, listings) with fields like text, images, dates, references and, since September 2026, lists. You design one template page and Framer generates a page per item.

Limits depend on the plan. As of October 2026, Basic includes 2 collections and 1,000 items, and Pro includes 10 collections and 2,500 items, expandable with add-ons up to 40,000 items. Our [complete guide to the Framer CMS](/blog/framer-cms-complete-guide) covers how it works, the caps and the workarounds.

## Is Framer free?

Yes, for non-commercial projects. Here's how the plans compare as of October 2026 (check [framer.com/pricing](https://www.framer.com/pricing) for current numbers):

<table>
<thead>
  <tr>
    <th>
      Plan
    </th>
    
    <th>
      Price
    </th>
    
    <th>
      Custom domain
    </th>
    
    <th>
      Pages
    </th>
    
    <th>
      CMS
    </th>
    
    <th>
      Bandwidth
    </th>
    
    <th>
      AI credits
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Free
      </strong>
    </td>
    
    <td>
      $0
    </td>
    
    <td>
      No (Framer subdomain)
    </td>
    
    <td>
      Limited
    </td>
    
    <td>
      Limited
    </td>
    
    <td>
      1 GB
    </td>
    
    <td>
      500 to try
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Basic
      </strong>
    </td>
    
    <td>
      $10/month
    </td>
    
    <td>
      Yes
    </td>
    
    <td>
      30
    </td>
    
    <td>
      2 collections, 1,000 items
    </td>
    
    <td>
      50 GB
    </td>
    
    <td>
      1,000/month
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Pro
      </strong>
    </td>
    
    <td>
      $30/month
    </td>
    
    <td>
      Yes
    </td>
    
    <td>
      150
    </td>
    
    <td>
      10 collections, 2,500 items
    </td>
    
    <td>
      100 GB
    </td>
    
    <td>
      3,000/month
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Enterprise
      </strong>
    </td>
    
    <td>
      Custom
    </td>
    
    <td>
      Yes
    </td>
    
    <td>
      Custom
    </td>
    
    <td>
      Custom
    </td>
    
    <td>
      Custom
    </td>
    
    <td>
      Custom
    </td>
  </tr>
</tbody>
</table>

Extra editors cost $20/month each, and each translation locale is a $20 add-on. Pro adds redirects, a staging environment and branching, which matter once a site has real traffic.

## Who is Framer best for?

<table>
<thead>
  <tr>
    <th>
      Good fit
    </th>
    
    <th>
      Weaker fit
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Designers who want to ship what they design
    </td>
    
    <td>
      Large online stores (no native cart or checkout)
    </td>
  </tr>
  
  <tr>
    <td>
      Startups that need a polished site fast
    </td>
    
    <td>
      Catalogues beyond 40,000 CMS items
    </td>
  </tr>
  
  <tr>
    <td>
      Freelancers and agencies building client sites
    </td>
    
    <td>
      Web apps with logins, dashboards or custom backends
    </td>
  </tr>
  
  <tr>
    <td>
      Marketing teams that want to edit without developers
    </td>
    
    <td>
      Teams that need to export and self-host the code
    </td>
  </tr>
</tbody>
</table>

### When Framer isn't the right choice

Framer has **no native e-commerce**. Small shops connect an external checkout; anything bigger belongs on a dedicated store platform. Framer has no user accounts, databases or dashboards, so app-like products need other tools. And if your CMS is huge or needs advanced search and faceted filtering, plan for plugins from day one.

If you're weighing alternatives, our [Framer vs Webflow](/blog/framer-vs-webflow) comparison goes deeper on those trade-offs.

## How do templates, components and plugins work?

Framer's [Marketplace](https://www.framer.com/marketplace/) has three kinds of add-ons:

- **Templates**: complete sites you duplicate and customise. The fastest way to launch.
- **Components**: reusable pieces (sliders, galleries, effects) you drop onto any page.
- **Plugins**: tools that run inside the editor and add features Framer doesn't have natively, like advanced CMS filtering, form handling or data import.

This is the layer we work in. Our [CMS Filter plugin](/plugins/framer-cms-filter) adds multi-field search, range sliders, AND/OR logic, facets with counts and sorting by any field to Framer CMS collections, and our [best Framer plugins](/blog/best-framer-plugins) list covers the wider ecosystem, including tools we don't make.

<blog-cta button-link="/plugins/framer-cms-filter" button-text="See CMS Filter" description="CMS Filter adds multi-field search, range sliders, facets with counts and sorting by any field to Framer CMS collections. No variants to manage." title="Hit Framer's filtering limits?" variant="blue">



</blog-cta>

## How to get started with Framer

1. **Pick a starting point.** A template if you want speed, a blank canvas if you want to learn, or an agent prompt if you want a first draft to edit.
2. **Learn stacks and breakpoints first.** They're the two concepts behind every responsive Framer layout.
3. **Set up the CMS early** if the site has repeating content like posts, case studies or listings.
4. **Publish on the free subdomain** while you build, then move to a paid plan when you connect your domain.
5. **Fill the gaps with the Marketplace** for features like advanced forms or filtering.

## FAQ

### What is Framer used for?

Framer is used to design and publish websites: marketing sites, SaaS landing pages, portfolios, agency sites, blogs and CMS-driven directories. You design visually and Framer handles responsive layout, hosting, SEO basics and publishing.

### Is Framer free?

Yes, for non-commercial projects. The free plan publishes to a Framer subdomain with 1 GB of bandwidth and no custom domain. Paid plans start at $10/month (Basic) and $30/month (Pro) as of October 2026.

### Do you need to know how to code to use Framer?

No. You can build and publish a full site without code. React code components and overrides are optional for custom behaviour.

### Is Framer the same as Figma?

No. Figma is a design tool for interfaces and prototypes; Framer is a website builder that publishes live sites. Many teams design in Figma and build in Framer.

### Is Framer good for SEO?

Yes, for the basics: fast static hosting, editable titles and meta descriptions, clean URLs, sitemaps and Open Graph images. Redirects and staging need Pro.

### Can Framer be used for e-commerce?

Not natively. There's no built-in cart or checkout. Small shops connect an external checkout; large catalogues are better on a dedicated e-commerce platform.

## Should you use Framer?

Use Framer if you're building a marketing site, portfolio, client site or content site and you want design control without a developer in the loop. Skip it for large online stores, app-like products, or a CMS that will grow past 40,000 items.

The cheapest way to decide is to try it: build one page on the free plan, set up its breakpoints, and publish it to the Framer subdomain. If the project needs filtering, advanced forms or galleries the native tools don't cover, check the Marketplace before you rule Framer out.

<blog-cta button-link="/plugins" button-text="Browse Plugins" description="CMS filtering, forms and 90+ components, built by a team that works in Framer every day." title="Extend what Framer can do" variant="blue">



</blog-cta>

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.