Sweet Text by Finsweet
Connect Sweet Text with Webflow to add advanced text styling and typography controls to your Rich Text content.

How to integrate Sweet Text with Webflow
Sweet Text integrates with Webflow through client-side scripts that extend Rich Text styling capabilities. The integration uses angle-bracket syntax like <p-color-blue>your text</p-color-blue>
within Rich Text fields, which converts to styled spans at runtime.
This works for content-driven sites where editors need text styling control without touching code. Some implementations include blogs with highlighted key phrases, marketing pages with styled callouts, or documentation sites with color-coded terminology.
You can implement Sweet Text using either the modern Finsweet Attributes V2 approach (recommended for new projects) or the legacy Sweet Text method (still supported for existing implementations). Both work through Webflow’s custom code features and Code Embed elements.
Use Finsweet Attributes V2 with Powerful Rich Text
Finsweet Attributes V2 includes Powerful Rich Text, which evolved from the original Sweet Text. This modern approach consolidates multiple Finsweet tools into a single script.
Add the Attributes V2 script to your site by opening your Webflow site settings, navigating to Custom Code, and pasting <script async type="module" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js" fs-inject></script>
in the Head Code section.
Then, apply the fs-inject-element="component"
attribute to Rich Text wrapper elements through Webflow's custom attributes panel.
This integration lets you do the following:
- Apply custom classes to text spans using angle-bracket syntax in Rich Text fields
- Bind Webflow interactions to specific text portions through class-based triggers
- Style CMS content dynamically without creating separate Rich Text fields for each variation
- Enable content editors to apply formatting directly in Webflow
The Attributes V2 documentation provides complete implementation details and configuration options. Use this method for new projects or when migrating from legacy Sweet Text.
Use legacy Sweet Text implementation
The original Sweet Text script still works for existing implementations. This method requires adding the Sweet Text JavaScript library to your site and creating corresponding classes in Webflow.
Access your Webflow site settings, open Custom Code, and add the Sweet Text script in the Head Code section. Create classes in Webflow that match your angle-bracket syntax (e.g., a class named color-blue
pairs with <p-color-blue>
tags). Content editors then wrap text portions in CMS Rich Text fields using the angle-bracket syntax, which converts to styled spans when pages load.
Some common implementations include:
- Color highlighting with
<p-color-blue>highlighted text</p-color-blue>
applying the.color-blue
class - Hover states using
<p-hover>interactive text</p-hover>
with.hover
class styles - Strikethrough formatting via
<p-sthrough>crossed text</p-sthrough>
mapped to.sthrough
class - Custom interactions by combining
<ix-explosion>triggered</ix-explosion>
syntax with Webflow interaction triggers
Note that Webflow has a documented bug where angle brackets automatically close in static Rich Text fields after site backup restoration. This bug only affects static Rich Text fields and doesn't impact CMS Rich Text fields. Finsweet provides workarounds using alternative bracket syntax if you encounter this issue.
Add Sweet Text through Code Embed elements
For page-specific implementations, use Webflow's Code Embed elements.
Drag a Code Embed element from the Add panel onto your canvas and paste the Sweet Text script directly into the element. This contains the JavaScript to specific pages without affecting your entire site, useful for testing implementations or limiting functionality to particular sections.
The Code Embed method works with both legacy Sweet Text and Attributes V2 approaches. Content editors can use angle-bracket syntax in Rich Text fields on pages where the Code Embed exists, while other pages remain unaffected.
What you can build
Integrating Sweet Text with Webflow enables granular text styling control across static and CMS-driven content.
- Content marketing blogs with styled callouts: Create blog posts where editors highlight key statistics in brand colors, apply hover effects to interactive terms, or color-code different content types without creating custom classes for each use case.
- Documentation sites with syntax highlighting: Build technical documentation where code terms, API endpoints, or status indicators receive consistent color coding through simple text wrapping, maintaining style consistency across hundreds of articles.
- Landing pages with interactive text elements: Design marketing pages where specific phrases trigger animations or style changes on hover, creating micro-interactions without custom code for each text variation.
- Multi-author publications with editorial standards: Enable content teams to apply approved styling patterns directly in CMS Rich Text fields, ensuring brand consistency while giving editors formatting flexibility beyond bold and italic.
Frequently asked questions
Add the script through site settings by navigating to Custom Code under Site Settings. For the modern implementation, paste
<script async type="module" src="<https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js>" fs-inject></script>
in the Head Code section, which loads the Finsweet Attributes V2 framework, containing Powerful Rich Text functionality.Apply the
fs-inject-element="component"
attribute to wrapper elements containing Rich Text fields through Webflow's custom attributes panel. The script processes angle-bracket syntax at page load and converts marked text into styled spans with your specified classes.For page-specific implementations, use Webflow’s Embed elements by dragging a Code Embed from the Add panel and pasting the script directly into the element.
Add the script through site settings by navigating to Custom Code under Site Settings. For the modern implementation, paste
<script async type="module" src="<https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js>" fs-inject></script>
in the Head Code section, which loads the Finsweet Attributes V2 framework, containing Powerful Rich Text functionality.Apply the
fs-inject-element="component"
attribute to wrapper elements containing Rich Text fields through Webflow's custom attributes panel. The script processes angle-bracket syntax at page load and converts marked text into styled spans with your specified classes.For page-specific implementations, use Webflow’s Embed elements by dragging a Code Embed from the Add panel and pasting the script directly into the element.
Sweet Text uses angle-bracket syntax within Rich text elements following the pattern
<p-classname>your text</p-classname>
. Thep-
prefix tells the script to wrap the enclosed text in a span tag with the corresponding class name, so<p-color-blue>highlighted</p-color-blue>
becomes<span class="color-blue">highlighted</span>
when the page loads.Create matching classes in Webflow with the same names you reference in brackets. You can apply any class including color styles, hover states, or interaction triggers. Content editors then use these pre-defined class names directly in the Rich text fields.
The system also supports interaction triggers with
<ix-triggername>
syntax, binding Webflow interactions to specific text portions when combined with configured interaction triggers.Sweet Text uses angle-bracket syntax within Rich text elements following the pattern
<p-classname>your text</p-classname>
. Thep-
prefix tells the script to wrap the enclosed text in a span tag with the corresponding class name, so<p-color-blue>highlighted</p-color-blue>
becomes<span class="color-blue">highlighted</span>
when the page loads.Create matching classes in Webflow with the same names you reference in brackets. You can apply any class including color styles, hover states, or interaction triggers. Content editors then use these pre-defined class names directly in the Rich text fields.
The system also supports interaction triggers with
<ix-triggername>
syntax, binding Webflow interactions to specific text portions when combined with configured interaction triggers.Yes, Sweet Text integrates fully with Webflow Rich text elements. Content editors can apply angle-bracket syntax directly in Rich text fields, and the script processes this syntax the same way it handles static Rich text content.
This enables consistent text styling across dynamic content without creating separate fields for each style variation. Which means editors can apply formatting like
<p-color-blue>key term</p-color-blue>
in blog posts, with styles rendering correctly on published pages.Set up classes in your code once, then content teams can reference these classes in any CMS Rich text field across your collections. This works for blog posts, product descriptions, documentation articles, or any content type using Rich text fields.
Yes, Sweet Text integrates fully with Webflow Rich text elements. Content editors can apply angle-bracket syntax directly in Rich text fields, and the script processes this syntax the same way it handles static Rich text content.
This enables consistent text styling across dynamic content without creating separate fields for each style variation. Which means editors can apply formatting like
<p-color-blue>key term</p-color-blue>
in blog posts, with styles rendering correctly on published pages.Set up classes in your code once, then content teams can reference these classes in any CMS Rich text field across your collections. This works for blog posts, product descriptions, documentation articles, or any content type using Rich text fields.
Yes, Sweet Text works directly with Webflow's interaction system by applying classes that serve as interaction triggers. Create an interaction in Webflow with a class trigger, then reference that same class in your Sweet Text syntax using
<ix-classname>text</ix-classname>
format.Wrapping text with
<ix-explosion>triggered text</ix-explosion>
creates a span with theexplosion
class, which can trigger configured interactions on click, hover, or other events. This lets content editors apply interactive behaviors without touching interaction settings.The approach works particularly well for click-to-reveal content, hover state animations, or scroll-triggered effects tied to specific text portions rather than entire elements. Combine Sweet Text class wrapping with Designer interaction configuration for maximum flexibility.
Yes, Sweet Text works directly with Webflow's interaction system by applying classes that serve as interaction triggers. Create an interaction in Webflow with a class trigger, then reference that same class in your Sweet Text syntax using
<ix-classname>text</ix-classname>
format.Wrapping text with
<ix-explosion>triggered text</ix-explosion>
creates a span with theexplosion
class, which can trigger configured interactions on click, hover, or other events. This lets content editors apply interactive behaviors without touching interaction settings.The approach works particularly well for click-to-reveal content, hover state animations, or scroll-triggered effects tied to specific text portions rather than entire elements. Combine Sweet Text class wrapping with Designer interaction configuration for maximum flexibility.

Description
Sweet Text by Finsweet is a client-side JavaScript library that enhances Webflow Rich Text elements with advanced typography and styling capabilities. It works with both static text elements and CMS Rich Text fields, allowing designers to apply custom classes, styles, and interactions using simple angle-bracket syntax within Rich Text content. The tool has evolved into Finsweet Attributes V2, though the original Sweet Text implementation remains functional.
This integration page is provided for informational and convenience purposes only.

Typed.js
Typed.js brings animated typing effects to your Webflow projects. Create engaging headlines that type, delete, and cycle through messages automatically — perfect for hero sections, testimonials, and dynamic call-to-actions that capture visitor attention without complex coding.

Typed.js
Enter in any text string, and watch it type at the speed you've set.

Scrollbar Styler by Finsweet
Connect Scrollbar Styler with Webflow to customize scrollbar design using visual controls and generated CSS code.

React
Connect React (powerful component architecture) with Webflow to build dynamic, interactive web experiences with real-time data, complex state management, and reusable components—all while retaining full visual design control.

fullpage.js
Connect fullpage.js with Webflow to get custom scroll hijacking, involving handling momentum scrolling, keyboard navigation, touch gestures, and history state.

F'in sweet Webflow Hacks
A custom code focused video series for Webflow websites. Learn how to use jQuery and javascript to extend the functionality of your Webflow project.

Elfsight Webflow Plugins
Connect your Webflow site with over 100 customizable, no-code widgets from Elfsight to add social feeds, forms, reviews, chat, and more—without writing a single line of code.

CMS Library: Load More
Load items from your Collection List on the same page, with Finsweet's CMS Library!

Common Ninja
Common Ninja brings over 100 customizable no-code widgets to Webflow, enabling businesses to add interactive elements like forms, reviews, countdown timers, and social proof without coding. This integration enhances user engagement, improves conversions, and extends Webflow's functionality through a simple embed process that keeps content automatically synchronized.