This release adds support for Bulleted and Numbered Lists in Text Layers and the CMS. You can now structure your content in new ways with Lists that integrate seamlessly with your existing Text Styles and CMS content.

To start writing a list you can type a hyphen ("-") or any number, then hit space. Lists can be nested as deeply as you’d like, and will automatically match the color of your text. To exit out of a list, you can hit enter twice, or use Shift+Tab.

We have significantly upgraded the HTTP capabilities of our hosting. We have added HTTP/2 support to the Framer subdomains (e.g. framer.website), and all sites will now always automatically be redirected to HTTPS. In addition, we’ve upgraded our CDN to support HTTP/3 in order to improve performance. This should make websites load up to 30% faster in modern browsers.

We updated our Carousel component with two new Sizing options: Columns and Rows. This allows you to make responsive Carousels, as you can choose to show a fixed amount of content per breakpoint. For example, you can set Columns to 3 on Desktop, 2 on Tablet and 1 on Phone. The component now also includes a Radius property, allowing you to clip the contents within if you have Padding set to 0. If you want to play around with these new properties, you can remix our demo here.

This Framer update brings support for Viewport Height. Design expressive landing pages with sections that adapt to the height of your browser, for consistent browsing experiences across various devices. Combined with existing features, like Sticky positioning and Scroll Speed Effects, it allows you to design entirely new types of websites.

With this update you can now use CMS variables for your page title and description, improving SEO performance and results of your Framer site. By setting up your site Titles and Descriptions with data from your CMS entries, each individual article will have unique relevant metadata for SEO and useful information when sharing.

In addition to Title and Descriptions – CMS variables can now be used in Custom Code fields. This allows you to implement Structured Data using JSON-LD, giving your pages special search result features and enhancements for content like events, articles, books, and more.

This release adds support for Fixed and Absolute positioning within Stacks, unlocking all-new layout setups and simplifying existing ones. Pin layers to the Viewport regardless of your page set-up, or use absolute positioning within Stacks to break out of its flow.

Redirects are useful if you need to permanently route traffic from an old path to a new URL. There are several use cases, such as reorganising the URL structure, replacing pages with a new design or layout and securing alternative paths in the case of a typo. You can now create redirects directly inside of your Site Settings. Simply input the old URL and input the path you wish to redirect it to.

We’re excited to introduce two brand new interactive components: Carousel and Ticker. Both can be found in the Insert Panel, within the Basics section. Simply drag them onto your web page, connect them to layers on your Canvas, and customize the properties to get going. Design smooth CSS-based carousels that can be scrolled, swiped, and navigated between using either arrows or dots. Or, use the Ticker component to create infinitely scrolling sections that connect seamlessly. Both are highly customizable, and powered by Motion. Bring your websites to the next level without writing any code.

Framer offers built-in analytics to help you gain insight on the performance of your website. These analytics are privacy compatible, live, and accurate. However, in order to gain a more detailed overview of activity within your sites, you may want to consider integrating another tool such as Google Analytics and combine the insights together. You can now integrate GA with a single click by pasting the tracking ID into your settings. Framer will automatically generate the script for you, which means you no longer require any code knowledge!

This update brings new Linking features and workflow improvements. You can now create links that smoothly animate to any section on your page, and define whether or not to open them in new tabs. Additionally, we’ve added helpful little indicators to layers with links, and you can now use the L key to quickly add a link to any selected layer—allowing you to add links solely using your keyboard. This makes linking in Framer faster than ever.

We have improved the pasting of text in Framer to improve your writing experience. From copy-pasting between Text elements in Framer to bringing your own structured copy from editors like Notion, we’ve covered the most used workflows for long- and short-form text editing using your semantic HTML, Inline Styles, and Text Styles. This also includes pasting text from online resources. For example, you can copy your essay from Notion and paste it into an empty text element, and we style it according to the default or even your own defined Text Styles. The pasting functionality will always respect the HTML structure of your pasted text and map it to your project’s Text Styles.

Introducing the new Quick Actions menu. Easily navigate around your project, find specific pages, jump between components, change preferences, invite collaborators, and discover new actions and their respective shortcuts. Open the menu from anywhere by hitting ⌘K on macOS or ⌃K on Windows. Use the cursor or the arrow keys (↑ and ↓) to select items, then hit enter. You can even publish your website, or open any specific web page you are currently viewing on the Canvas.

We’ve added the ability to filter your collection lists in the CMS. This allows you to keep your content in a single collection, yet customize how that collection is presented on each of your web pages. For example, if you’re creating docs for your app, you might want to filter articles per topic on your homepage. Or when creating a blog, you might want to filter your blog posts per category. Watch the short introduction video above to learn more, or check out our free template to get started.

Today’s release adds the ability to add Overlays to content in a CMS Collection List. This is especially useful for websites like portfolios, where you might like to show a full-sized version of your art of photography on click. We’ve prepared a simple template for you to get started with. It includes a grid-based layout of photos, each with a subtle hover state and an overlay. Because all content is sourced from the CMS, all edits made to the first item will instantly apply to the entire grid. This makes it incredibly easy to iterate and play with hover states, overlays, and effects. Try this free template to see it in action.

We’ve rebuilt our YouTube integration to load up to 10x faster, based on the Lite YouTube Embed project from Paul Irish. Instead of loading all YouTube embeds instantly, we now load an optimized preview image. This can save up to 800kb per instance, making your site load much faster! This new component is now available from within our Insert Panel. If you’re already using YouTube videos on your web page, you can simply update them via the Assets panel (see below).

The new YouTube integration comes with two new properties: Thumbnail and Color. If you enable Thumbnail, we’ll load an image as a thumbnail prior to loading the entire embed, which means faster loading times for your web page. The Color property allows you to customize the YouTube embed tint from red to white, which will affect the hover state of the play icon too. We’re using the component on this very Updates page—as well as on our Learn page. We’d love to hear your thoughts! Let us know on Discord.

Framer now supports a new type of shadow: realistic. Realistic shadows are automatically layered for you, whereas, unlike box shadows where you have to add individual shadows to a layer. This lets you design higher fidelity, lifelike shadows using Diffusion and Focus.

Diffusion allows you to control the “elevation” of the layer. Lower values replicate the shadow of a layer sitting closer to the page, and vice versa. Focus allows you to define the overall blurriness of the layered shadows. Don’t worry if this doesn’t click right away—the easiest way to learn is by playing around with these values.

All Text layers now support three fill types: solid colors, linear gradients, and radial gradients. Simply select any text layer, head over to the Color property, pick between one of the three available fill types and customize as you see fit.

You can use the on-canvas controls to select the color stops and edit your gradients. You can also use Shared Colors as your color stops to sync your text gradients across your web pages.

Alongside the Framer Sites launch, we introduced a new Layout tool that allows you to design flexible, responsive layouts. Pick from one of our presets: Columns, Rows, Wrap or Grid, draw your layout onto your Desktop breakpoint, then customize further via the property panel.

Today, the Framer Sites Beta is coming to an end. We’re rolling all features into the main version so that everyone can enjoy publishing, breakpoints, effects, CMS, styles — and so much more. Check out the launch page we made to celebrate the release! And you’d do us a huge favor by helping spread the word. We’d really appreciate an upvote on Product Hunt or retweet on Twitter.

We’ve added support for Overlays to Framer Sites, allowing you to design video overlays, modals, toasts, banners, slide-in sidebars and much more. Select a layer on your web page, then click on Overlays near the top of your property panel. This brings you into an edit mode, where you can customize your overlay. You’ll notice a backdrop being applied by default, and you can pick between a bunch of animation presets too. Note that each layer you draw or paste onto your Overlay can have their own Enter and Exit animations too, allowing for expressive customization. Be sure to give the playground demo a try too!