Webflow

Pan and zoom for pages

Use pan and zoom controls to navigate your page canvas more efficiently in the Designer. Zoom in and out to focus on specific elements or get a bird's eye view of your entire page. Pan around your canvas to explore different sections without constantly scrolling.

How to use pan and zoom

Zoom in and out:

• Use your mouse wheel or trackpad scroll to zoom in and out
• On Mac trackpad, pinch to zoom
• Use keyboard shortcuts: + to zoom in, - to zoom out, or 0 to reset to 100%

Pan around the canvas:

• Hold the spacebar and click-drag to pan around your page
• On Mac trackpad, use two-finger drag to pan

Reset your view:

• Press 0 on your keyboard to reset zoom to 100% and center your view

These controls are available when editing any page in the Designer and work seamlessly with your existing design workflow.

Track AI and MCP changes in your Site Activity Log

We're making it easier to track changes made by AI and Model Context Protocol (MCP) integrations in your Webflow projects. Now, when you review your Site Activity Log, you can see exactly which changes were made by AI features and which were made through MCP integrations.

What's new

AI and MCP activity tracking — The Site Activity Log now displays AI-generated changes and MCP integration changes with clear labels, so you can easily identify who (or what) made modifications to your site.

This enhancement helps you:

• Monitor AI-assisted design and content changes
• Track updates made through MCP integrations
• Maintain better oversight of your project's development history
• Understand the full context of changes in your site

How it works

When you open your Site Activity Log, look for entries labeled with:

• AI — Changes made by Webflow's AI features
• MCP — Changes made through Model Context Protocol integrations

This makes it simple to review what was automated versus what was manually edited, giving you complete visibility into your site's evolution.

Learn more

For more details on managing your site activity and understanding change logs, visit the Webflow University or check out the Help Center.

Deploy apps on Webflow Cloud without creating a site

You can now deploy your apps directly to Webflow Cloud without needing to create a Webflow site first. Previously, you had to create a site to access Webflow Cloud. Now you can go straight to deploying your applications.

What's new

• Direct deployment: Skip the site creation step and deploy apps immediately to Webflow Cloud
• Streamlined workflow: Faster setup for developers who want to use Webflow Cloud for app deployment

How it works

When you're ready to deploy an app to Webflow Cloud, you can now proceed directly to the deployment process without creating a Webflow site as a prerequisite.

This update makes it easier for developers to leverage Webflow Cloud's deployment capabilities for their applications.

We've rolled out an update to the Quick Access menu that brings role-based filtering to your workspace. Quick Access now respects your assigned role and only shows the sites you have permission to access.

This means:

• Owners and Editors will see all sites they have access to
• Designers will see only Designer sites
• Developers will see only Developer sites

If you're assigned to a workspace with multiple roles, Quick Access will display sites relevant to each of your roles, making it easier to find what you need without clutter.

This update helps keep your workspace organized and ensures you're only seeing the sites appropriate for your current permissions.

You can now log in to Webflow using your GitHub account, making it easier to access your workspace and collaborate with your team.

What's new

We've added GitHub as a login option for Webflow. You can now:

• Sign up for a new Webflow account using GitHub
• Log in to your existing Webflow account with GitHub
• Connect your GitHub account to your Webflow profile

How to use it

To log in with GitHub:

1. Go to the Webflow login page
2. Click "Continue with GitHub"
3. Authorize Webflow to access your GitHub account
4. You'll be logged into your Webflow workspace

To sign up with GitHub:

1. Go to the Webflow sign-up page
2. Click "Sign up with GitHub"
3. Authorize Webflow to access your GitHub account
4. Complete your Webflow account setup

Benefits

• Faster authentication - Skip traditional email/password login
• Single sign-on - Use your GitHub credentials across platforms
• Better security - Leverage GitHub's security features
• Seamless workflow - Stay in your development environment

Learn more

For more information about authentication and account management, visit our support documentation.

Webflow AEO: Now available for Enterprise

Webflow AEO is now available for Enterprise customers, enabling organizations to optimize their digital presence for AI-driven search at scale.

What is AEO?

AEO (AI Engine Optimization) helps websites become discoverable through AI-powered search tools and generative AI applications. As AI search continues to grow, AEO ensures your content is structured and optimized for these new discovery channels.

Enterprise AEO Features

Enterprise customers now have access to:

• Advanced semantic optimization - Ensure your content is properly structured for AI-driven discovery
• AI-ready content framework - Tools to prepare your content for generative AI consumption
• Scale across multiple sites - Manage AEO across your entire organization's web properties
• Enterprise support - Dedicated support for AEO implementation and optimization

Getting Started

Enterprise customers interested in AEO can:

1. Contact your Webflow account manager
2. Review the AEO feature documentation
3. Begin optimizing your sites for AI-driven search

For more information about AEO and how it can benefit your organization, visit the AEO feature page.

AI translation that handles formatted content naturally

Webflow's AI translation feature now intelligently preserves formatting—including bold, italics, links, and code blocks—while translating your content. This means your formatted text stays formatted in every language you translate to.

What's new

When you translate content with AI in Webflow, the system now:

• Preserves bold and italic styling across translations
• Maintains hyperlinks and their destinations
• Keeps code blocks properly formatted
• Retains special formatting like strikethrough and underline
• Ensures consistent visual hierarchy in translated content

How it works

Simply select content you want to translate and use Webflow's AI translation tool. The AI analyzes the formatting markup alongside the text content and applies the same formatting rules to the translated output. No manual reformatting needed.

This update applies to translations across all supported languages and works seamlessly with both CMS-driven and static content on your site.

Use component props in custom code

Component props let you reference component instance values in custom code blocks. This means you can write flexible, reusable code that adapts based on the props set on each component instance.

How to reference component props

In your custom code blocks, reference props using the syntax:

{{ prop_name }}

For example, if your component has a prop called buttonColor, you can reference it in custom code like:

<style>
  .button {
    background-color: {{ buttonColor }};
  }
</style>

Example use cases

• Dynamic styling: Apply different styles based on component prop values
• Conditional logic: Show or hide elements based on prop values
• Data binding: Pass prop values to JavaScript functions or APIs
• Personalization: Create different experiences based on prop configuration

Supported code block types

Component props can be referenced in:

• Custom CSS blocks
• Custom HTML blocks
• Custom JavaScript blocks (via data attributes)

Best practices

• Use descriptive prop names that clearly indicate their purpose
• Document what values each prop accepts
• Test your code with different prop values to ensure it works correctly
• Consider using props for values that might change between component instances rather than hardcoding values

Updated pricing and simplified plans

We're excited to announce updates to Webflow's pricing that make it easier for teams of all sizes to build, manage, and scale their web experiences.

What's changing

We've simplified our plan structure and updated pricing to better reflect the value we deliver:

• Clearer plan tiers with more straightforward feature distribution
• Updated pricing across all plans to support continued platform innovation
• New capabilities included in plans to maximize value
• Flexible options for businesses of all sizes, from freelancers to enterprises

Plan overview

Our updated plans now include:

Basic - Perfect for getting started with web projects

• Ideal for freelancers and small projects
• Core design and hosting features
• Essential collaboration tools

Professional - For growing teams and businesses

• Advanced features for more complex projects
• Enhanced collaboration and content management
• Increased project and resource limits

Business - For scaling teams and agencies

• Premium features and priority support
• Advanced team collaboration
• Higher resource allocation

Enterprise - Custom solutions for large organizations

• Dedicated support and custom terms
• Advanced security and compliance features
• Scalable infrastructure for demanding workloads

When does this take effect

Existing customers will have time to transition to the new pricing structure. We'll communicate specific timelines directly with affected accounts.

New signups will be on the updated pricing immediately.

Why we're making this change

These updates reflect the significant value and capabilities we've added to Webflow over the past year, including AI features, advanced collaboration tools, and enterprise-grade infrastructure improvements. We're committed to providing the best value possible while ensuring we can continue innovating for our customers.

If you have questions about how this affects your account, please reach out to our support team.

Single-Page Publishing & page-specific access now controls who can publish

We're excited to announce two powerful new collaboration features that give you more granular control over your publishing workflow.

Single-Page Publishing

You can now publish individual pages without affecting the rest of your site. This means you can:

• Push live updates to specific pages while others remain in draft
• Test changes on one page before rolling them out site-wide
• Collaborate more efficiently by allowing multiple team members to work on different pages simultaneously

Page-Specific Access Controls

Combined with our updated access permission system, you can now control exactly who can publish each page. This allows you to:

• Assign publishing permissions at the page level
• Ensure only authorized team members can publish sensitive pages
• Maintain better oversight of what goes live and when

These features work together to streamline your team's publishing workflow while maintaining the security and control your organization needs.

Set a default preview role for each site

Webflow now lets you set a default preview role for each of your sites. When you share a preview link without specifying a role, it will automatically use the default role you've set for that site.

How to set a default preview role

1. Go to your site settings
2. Select the Sharing tab
3. Under Default preview role, choose the role you'd like to use as the default
4. Save your changes

The default preview role will be applied to all new preview links shared without an explicitly selected role. This helps streamline your workflow when sharing previews with team members and stakeholders.

Available preview roles

You can set any of these roles as your default:

• Viewer - Can view the site and interact with it
• Editor - Can view and edit content
• Admin - Full access to all site settings and features

This feature is available to all Webflow users and applies to both published and unpublished preview links.

See spacing values on the canvas

You can now see spacing values displayed directly on the canvas when you hover over or select elements with margin and padding. This makes it easier to understand and fine-tune the spacing in your designs without having to constantly check the design panel.

How it works

When you select an element or hover over it in the canvas:

• Margin values appear outside the element's border
• Padding values appear inside the element's border
• Values are shown in your project's default spacing unit (px, rem, etc.)

This visual feedback helps you:

• Quickly verify spacing relationships between elements
• Ensure consistent spacing throughout your design
• Make precise spacing adjustments without switching between panels
• Better understand your layout hierarchy

Availability

This feature is available in the Webflow Designer for all users.

Auto-resize favicons and dark mode support

We're excited to announce two powerful updates that enhance your website's visual presentation and user experience.

Auto-resize favicons

Favicons are now automatically resized to the appropriate dimensions for different platforms and devices. This means you no longer need to manually create and upload multiple favicon sizes. Simply upload your favicon, and Webflow will handle the resizing for you.

Benefits:

• One-click favicon setup
• Optimized display across all devices and browsers
• Consistent branding across platforms

Dark mode support for favicons

Your favicon will now intelligently adapt to dark mode preferences. If a visitor has dark mode enabled on their device, Webflow can display an alternative favicon design that's optimized for dark backgrounds.

How it works:

• Upload a light mode favicon
• Optionally upload a dark mode variant
• Webflow automatically serves the appropriate version based on system preferences

This ensures your branding remains clear and visible regardless of the user's color scheme preference.

Getting started

To use these features:

1. Navigate to your site settings
2. Go to the Favicon section
3. Upload your favicon image
4. Optionally upload a dark mode variant
5. Webflow will automatically handle resizing and serving the correct version

These updates make it easier than ever to present a polished, professional appearance across all devices and color modes.

Updates to DevLink Export

We're excited to share some improvements to the DevLink export experience that make it easier to work with your exported code.

New export file structure

We've reorganized how files are exported to make your codebase more maintainable:

• Simplified folder hierarchy: Files are now organized in a flatter structure that's easier to navigate
• Better asset management: Images, fonts, and other assets are grouped in dedicated folders
• Improved naming conventions: Component and file names are now more consistent and descriptive

Enhanced code quality

The exported code now includes several quality-of-life improvements:

• Better formatting: Code is formatted consistently for improved readability
• Optimized CSS: Stylesheet generation has been improved to reduce redundancy
• Cleaner HTML structure: Markup is more semantic and follows best practices

Better component mapping

Components exported from Webflow now map more accurately to standard web component patterns, making it easier to integrate with your development workflow.

What this means for you

If you're currently using DevLink exports, your existing workflows will continue to work. When you export a new project, you'll see the improved structure and code quality automatically.

For teams working with DevLink, these changes make it easier to:

• Navigate exported projects in your IDE
• Maintain consistency across multiple exports
• Integrate exported code into larger applications
• Collaborate with other developers using the same exported codebase

We're continuing to invest in DevLink to make the handoff between design and development as smooth as possible.

Dynamic attributes for components

You can now set dynamic attributes on components, enabling you to create more flexible and reusable component instances across your site. This allows you to programmatically control component behavior through data bindings without duplicating components.

What's new

Dynamic attributes for components lets you bind data to component attributes, making it easier to:

• Create flexible component instances that adapt to different content
• Reduce component duplication across your site
• Manage component behavior through data connections
• Build more scalable design systems

How it works

When you create a component, you can now mark specific attributes as dynamic. This means you can bind those attributes to:

• CMS fields
• Variables
• Other dynamic data sources

Component instances will then automatically reflect these data bindings, allowing you to reuse the same component with different attribute values across your project.

Getting started

To use dynamic attributes on your components:

1. Edit your component
2. Select the element whose attributes you want to make dynamic
3. Mark the attribute as dynamic in the settings panel
4. Bind the attribute to your desired data source
5. Use the component in your project—instances will automatically pull in the bound data

This feature is available for all component attribute types and works seamlessly with Webflow's existing dynamic content system.

Introducing AI code components

We're excited to announce the launch of AI code components—a powerful new way to build custom components using natural language prompts.

What are AI code components?

AI code components let you generate custom, reusable components by simply describing what you want to build. Whether you need a specialized form, a unique layout, or a dynamic interactive element, you can now create it using AI without writing code from scratch.

How it works

1. Describe your component - Tell the AI what you want to build in plain English
2. Get instant code - The AI generates clean, production-ready HTML, CSS, and JavaScript
3. Customize and integrate - Fine-tune the generated code and add it to your project
4. Reuse across projects - Save your components for future use

Key benefits

• Speed up development - Generate components in seconds instead of hours
• Lower the barrier to custom builds - No deep coding knowledge required
• Maintain consistency - Create reusable components that work across your projects
• Full control - Edit and customize the generated code as needed

Getting started

AI code components are available now in the Webflow editor. Look for the AI code component option when creating new components, and start building with natural language prompts.

This feature empowers designers and developers to create more sophisticated, custom solutions faster than ever before.

Introducing Webflow Foundations

We're excited to announce Webflow Foundations, a new free tier designed to help you learn web design and development without financial barriers.

What is Webflow Foundations?

Webflow Foundations is a completely free plan that gives you access to core Webflow features so you can:

• Learn the fundamentals of web design and development
• Build responsive websites with our visual builder
• Practice real-world design and development skills
• Create a portfolio of projects to showcase your work

What's Included

With Webflow Foundations, you get:

• Access to the Webflow Designer with full design capabilities
• Ability to build and publish one website
• Webflow hosting included
• Access to Webflow University learning resources
• Community support through forums

Limitations

Webflow Foundations includes some limitations to help us keep this offer free:

• Limited to 1 published site
• Webflow branding appears on your site
• Limited to 10,000 monthly site visitors
• No custom domain (uses webflow.io domain)
• Basic support only
• Limited collaborators

Who is This For?

Webflow Foundations is perfect for:

• Students learning web design and development
• Career changers exploring a new field
• Beginners wanting to learn without commitment
• Hobbyists building personal projects

Upgrade When You're Ready

When you're ready to take your skills further, you can upgrade to one of our paid plans:

• Pro - For freelancers and small businesses
• Business - For growing teams
• Enterprise - For large organizations

Each paid plan unlocks additional sites, advanced features, and priority support.

Getting Started

Ready to start building? Sign up for Webflow Foundations today—no credit card required.

We believe everyone should have the opportunity to learn web design and development. Webflow Foundations is our commitment to making that possible.

Export any chart or table in Webflow Analyze to a CSV file with one click. Share site performance data with stakeholders or analyze it further in spreadsheets.

You can now control your Rive animations via Interactions with GSAP using Rive's view model data binding.

Build component-scoped interactions for easy reuse, or animate individual component instances for contextual interactions.