Clutch

Glossary

  • Component: A component is a modular part of your design that you can create and use, as instances, throughout your project or across multiple projects when published in a library. Components encompass both styling and functionality, enabling you to work quickly and consistently while simplifying maintenance over time.
  • Instance: Instances are copies of components used throughout your designs. Instances receive updates from components but can be uniquely styled or configured without altering components, providing design flexibility while maintaining a cohesive look and feel.
  • Property: Attribute that can be adjusted per instance to alter behavior or appearance.
  • Style property: A CSS style property defines the visual characteristics of an instance, such as color, typography, spacing, and layout.
  • Variants: Predefined variations of components such as size, type, or color. Variants make it easy to create, consume, and maintain design systems.

Web Design

Clutch provides all the tools you need to build visually stunning and consistent websites with complete creative freedom:

  • Advanced Visual Builder: Clutch offers a drag-and-drop visual builder with over 400 style controls, providing an intuitive interface for creating complex designs without writing code.
  • Responsive Design: Customize your design for each breakpoint to ensure it looks great on all devices.
  • Light/Dark Mode Support: Clutch enables you to define style variables with values for both dark and light modes and handles switching between them seamlessly.
  • Custom Font Support: Clutch supports over a thousand fonts from Google Fonts, and you can upload your own fonts, including variable fonts.
  • Powerful Theme System: Clutch’s theme system helps you manage global styles, variables, and selectors in one place. Styles are reusable and can be applied to multiple elements. Variables are values you can assign to various styles. Selectors are automatically applied styles, ideal for setting base values like typography without manually adding styles.
  • Design System Management: Clutch enables you to manage and share design systems, style guides, and component libraries across multiple projects. This ensures design consistency, efficiency, and scalability within your organization.
  • Visual CSS Grid Layouts: Harness the power of CSS Grid in a completely visual canvas, allowing you to create complex, responsive layouts without touching a line of code.
  • Flexbox Layouts: Utilize CSS3’s flexible boxes (Flexbox) to build dynamic, responsive layouts with ease, directly within the visual interface.
  • CSS Filters: Add depth and visual effects by applying any of the 8 available CSS filters (e.g., blur, grayscale, sepia) to any element on your site directly within the designer.
  • Clean, W3C Compliant Code: Clutch automatically writes clean, semantic HTML and CSS that meets W3C standards, avoiding the messy inline classes typically generated by other site builders. You can also export your entire project, including HTML, CSS, and images, as a fully working project in a ZIP file.
  • Total Creative Control: Clutch provides a flexible canvas that allows designers to create virtually anything, offering unparalleled freedom in responsive website design.
  • Integrated Learning System: Clutch includes an integrated help system that provides descriptions of every style property with direct links to MDN, enabling designers to go from no-code to knowing code.
  • Custom Pages and Styles: Easily create custom 404 pages, loading screens, error pages, and favicons. Additionally, Clutch allows you to add any style from the CSS spec, bind it to style variables, and access contextual help for implementation.
  • Full Code Export: Unlike many other builders, Clutch allows you to export your entire project—not just the HTML and CSS, but also all assets and configurations—giving you full control over your project outside the Clutch environment.

Components & Libraries

Clutch offers extensive component management capabilities, including Base UI and variant systems, allowing for consistent and customizable component-based design.

  • Dropdown menu: Add long lists of links or options to your website with a double-click.
  • Responsive website navigation:
  • Code component: Copy and paste code, use an AI, get code from npm…
  • Tabs: Radix tabs..
  • Script: copy and paste scripts for analytics and third-party integrations, optimized by Netx.js Script component.
  • sliders and carousels: ?
  • Rich text:
FeatureDescription
Component VariantsEasily create and manage component variants, such as different button styles (primary, secondary, danger), for consistent design across your site.
Base UI FrameworkIncludes Base UI, a design system framework combining Radix’s unstyled, accessible components with CSS variable-based theming, allowing easy customization or complete component overrides.
Designer-Friendly ComponentsCreate components with code but provide designers with a visual interface to control and style them, bridging the gap between developers and designers.
Pre-Built Templates and ComponentsAccelerate your workflow with Clutch’s library of pre-built templates, themes, and components, or create your own libraries to reuse across projects.
Create custom components (composed)Turn repeating design elements (like buttons) into Symbols you can place with a click. Need to make a change? Just edit the Symbol once, and it'll update across your site.
Create custom designer-friendly components from code
Responsive website templatesKickstart your design process with a free or premium responsive website template built by us or one of our trusted designers.
Library versioning & updates…?

Modern Tech Stack

Clutch creates sites that are powered by a modern tech stack that focuses on quality, accessibility, and performance:

TechnologyDescription
Next.jsA framework for building fast, scalable websites and web apps.
ReactThe most popular library for building web components and interfaces.
RadixUnstyled, accessible UI components for building high-quality design systems.
TailwindScales for colors, sizing, typography, shadows, and more provide a consistent, reusable set of design tokens that streamline the design process, ensuring uniformity and efficiency.
VercelEdge hosting for optimal performance and scalability.

Hosting & Performance

Clutch is built on top of a modern tech stack, ensuring that the websites you create are optimized for performance and can be easily hosted on your preferred platform.

  • Responsive Images: Clutch uses the Next.js Image component to enhance the HTML <img> tag with features for automatic image optimization:
    • Automatically serves properly sized images for each device, using modern image formats like WebP and AVIF.
    • Prevents layout shift when images are loading.
    • Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.
FeatureDescription
Blazing Fast PerformanceClutch creates sites that are faster than any other visual builder, thanks to the performance optimizations inherent in Next.js.
Full Ownership and ExtensibilityYou own your code with Clutch. Download it, push it to Git, publish to npm, and host your site on your own server. Built on Next.js, Clutch ensures high lighthouse scores and better SEO by default.
Hosting FlexibilityClutch allows you to host on Vercel or any other server of your choice, giving you full control over your hosting environment.
Custom 301 RedirectsEvery time you change a page's URL, it's vital that you redirect the old URL to the new one. That way, you get to keep the old URL's SEO juice (and don't have to hit users with a 404 page). And Webflow makes it easy.

SEO, Accessibility, and Analytics

Clutch provides built-in tools to help you optimize your site for search engines and monitor its performance, ensuring your site not only looks great but also performs well.

FeatureDescription
Dynamic SEO & Metadata ManagementManage dynamic metadata, Open Graph tags, and images easily. Clutch supports custom redirects, error pages, and all other Next.js App Router features, ensuring your site performs well in search engines. “Forget writing meta titles and descriptions for every one of your blog posts. With Webflow, you just create a template for your SEO tags to follow, and we'll automatically generate search engine-friendly titles, descriptions, and Open Graph content.”
Accessibility FeaturesEnsure your site meets accessibility standards with Clutch’s built-in tools for ADA compliance and best practices for creating accessible designs.
Built-In Analytics DashboardTrack your website’s performance with Clutch’s built-in analytics dashboard, providing insights into traffic, user behavior, and conversions without needing third-party tools.
A/B Testing and MetricsClutch simplifies the setup of A/B tests and tracking of metrics, helping you optimize your site’s performance and user experience.
Open Graph (OG) settingsImprove your content's performance on social media by defining your page's Open Graph title, description, and image.
Alt tags for images
Alt tags on images improve your site's SEO, UX, and accessibility. That's why we let you easily add alt tags to images in both our design tool, and our CMS.
SEO meta title and description
Customize your pages' meta titles and descriptions (the key ingredients in optimizing your site for search—aka, a person's journey from Google to your website).

Collaboration

Clutch includes tools that enable seamless collaboration among teams, making it easier to manage projects, maintain version control, and work together in real-time.

FeatureDescription
Collaboration and Version ControlClutch integrates seamlessly with Git and other version control systems, making it easy for teams to collaborate, manage versions, and roll back changes when needed.
Real-Time CollaborationEnable your team to work together in real-time on Clutch projects, streamlining collaboration and improving efficiency, especially in agency environments.
Easy rollbackInstantly rollback a deployment to a prior version
Staging and production databasesWhen it comes to web publishing, the last thing you want to do is launch unapproved content, or functionality that breaks your site. That's why we give you a staging site on webflow.io. Publish with confidence. Design without fear.
Your own custom domain nameEasily get your website up and running on your own personal URL.

Code & Integrations

Clutch’s flexibility extends to how it integrates with other tools and services, making it easy to connect with any backend, CMS, or design tool, and automate your workflows.

  • Form submissions in the Editor: If you have Webflow CMS hosting, you, your clients, and other Collaborators can now review incoming submissions from your website's forms right inside the Editor panel—plus download the whole list in a handy CSV file.
  • Submit forms directly to any backend including Zapier: …?
  • Zapier integration: Webflow's integration with Zapier lets you connect your website's forms with tons of other apps designers use every day, including Slack, MailChimp, and Asana.
  • Customize the look and feel of your forms: …?
  • Sort and filter: …?
  • Product variants: ?
  • Pagination: ?
  • URL params, not local state, for better SEO & linkability: ?
  • Connected Templates: templates that come prewired, drop in functionality, based on path params
  • Contact and lead-generation forms: Our forms contain all the elements you need, and they're infinitely customizabile. Plus, they're easy to integrate with MailChimp and Zapier to help you automate your list building.
FeatureDescription
Full Code AccessClutch provides full access to the underlying code, allowing for easy customization without hacks.
Code in your own editorUse your own code editor, including AI-powered editors.
Unmatched FlexibilityThe most flexible visual builder available, Clutch allows you to create custom components, import libraries from npm, and connect to multiple backends, giving you full control over your projects.
Flexible Backend IntegrationClutch supports connections to any backend or service using Next.js App Router and React 19 server components, enabling you to build anything from Shopify storefronts to Contentful-powered sites.
CMS IntegrationConnect Clutch with popular CMS platforms like WordPress, Contentful, or Prismic to manage your content visually, without compromising on performance or flexibility.
Integration with Design ToolsSeamlessly integrate Clutch with popular design tools like Figma, Sketch, or Adobe XD, allowing you to import designs directly or synchronize updates.
Multilingual and Localization SupportBuild multilingual sites and manage localization easily within Clutch, ensuring your content is accessible to global audiences.
Custom Workflow AutomationAutomate repetitive tasks and create custom workflows within Clutch, such as auto-deploy on commit, helping you streamline your development process.
Dynamic content filtering and sortingEasily filter dynamic content to display featured content or all blog posts on a particular topic. Or use sorting to display content from a specific date range, by alpha, and more.

Support & Resources

  • Community
  • Academy
  • Docs
  • Webflow Community Forum: Need help with your website? Want to log a feature request? Just want feedback on your latest designs? Thousands of Webflow users jump onto our Forum every day to share their work, tips and tricks, and just chat.