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

How do I add the Sweet Text script to my Webflow site?
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.
What syntax does Sweet Text use for styling text?
Sweet Text uses angle-bracket syntax within Rich text elements following the pattern <p-classname>your text</p-classname>. The p- 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>. The p- 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.
Does Sweet Text work with Webflow CMS collections?
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.
Can I use Sweet Text with Webflow interactions?
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 the explosion 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 the explosion 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.

Sweet Text by Finsweet

Joined in

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.

Other Plugins and integrations library integrations

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.