Sweet Text by Finsweet
Rich Text elements apply one set of styles across an entire block. An editor who wants a highlighted phrase or a styled callout needs a developer to restructure the page, and the same handoff appears when a component has to sit inside a published blog post. That handoff slows publishing and pushes teams toward extra Webflow CMS fields for every formatting variation.
Sweet Text by Finsweet was the script that closed that gap: editors wrapped text in angle-bracket syntax that converted to styled <span> elements at runtime. Finsweet has since deprecated the standalone tool and rebuilt the capability inside its Finsweet Attributes framework, where it lives as Powerful Rich Text in Attributes v1 and as the Inject solution in Attributes v2. Anything you install today is an Attributes script, so the version you pick decides the attribute names you write.
Publishing teams get the most from this setup, because editors can format text without touching code or the site structure. Agencies use it to hand clients CMS-driven sites where components drop into Rich Text per post, and multi-author publications use it to hold formatting consistent across contributors.
How to integrate Sweet Text by Finsweet with Webflow
What is Sweet Text by Finsweet? Sweet Text was a client-side JavaScript library that added custom classes and styling to Webflow Rich Text elements through angle-bracket syntax such as <p-color-blue>your text</p-color-blue>, which converted to styled <span> elements at runtime. Finsweet now states that "Sweet Text has been rebuilt in Attributes and is now deprecated" in its own legacy tooling docs, the old finsweet.com/sweet-text product URL redirects to a Made in Webflow cloneable listing that no longer resolves, and Sweet Text is absent from Finsweet's current products page. Treat this page as a migration guide rather than an install guide for Sweet Text.
Teams reach for this combination when a CMS blog needs formatting the Rich Text editor does not provide on its own, and the same need turns up on documentation sites and multi-author publications. Every option ships as a CDN script switched on by fs- custom attributes you set directly on elements, and there is no Webflow Marketplace app for any of it. Which script you install depends on whether you are maintaining an existing Sweet Text site or starting a new project.
Two Attributes solutions cover the original Sweet Text job, and a third path reaches the content underneath them. Powerful Rich Text is the v1 legacy script, and it renders arbitrary HTML plus injected Webflow components inside a Rich Text block. Inject is the current v2 solution, and it syncs and positions elements inside Rich Text blocks or Div Blocks across pages and even across sites. For programmatic control of the Rich Text content itself, the Webflow Data API path works server-side and needs a developer. Pick one Attributes generation per page, because v1 and v2 cannot run together on the same page.
Add Powerful Rich Text with the v1 legacy script
If your site already runs Sweet Text, the Powerful Rich Text solution is its direct continuation: editors write any valid HTML into a Rich Text block and place Webflow components with {{COMPONENT_IDENTIFIER}} syntax. Finsweet's own messaging on v1 is genuinely mixed, so check which banner you are reading. The legacy documentation carries a warning that Attributes Legacy (v1) "has been discontinued", while the same pages state that "Attributes v1 will remain fully supported for all existing and new websites". The v1 Powerful Rich Text page still reports over 32 million script loads a month, which is why most existing implementations sit here. One signal cuts through the mixed messaging: the plain /attributes/powerful-rich-text URL now redirects to the v2 Inject documentation.
The v1 install script goes in the <head>:
<!-- [Attributes by Finsweet] Powerful Rich Text -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-richtext@1/richtext.js"></script>
To set up the integration:
- Go to Site settings > Custom code, paste the script into the Head code section, and follow the placement rules in Custom code in head and body tags.
- Click Save changes.
- Select your Rich Text element, open the element Settings panel, and add the custom attribute
fs-richtext-elementwith the valuerich-text. - Publish the site, because the attributes run on the published site and not in preview.
The v1 solution has four core attributes, all prefixed fs-richtext-:
fs-richtext-element="rich-text"switches the solution on and parses any valid HTML written into that block.fs-richtext-component="COMPONENT_IDENTIFIER"marks any element as a component you can then place with{{COMPONENT_IDENTIFIER}}syntax.fs-richtext-resetix="true"resets Webflow Interactions after a component is injected, so animations still fire.fs-richtext-sanitize="true"strips potentially dangerous code and is the one to reach for when Rich Text content comes from an untrusted source.
Components can live on the same page or on another page referenced with {{COMPONENT_IDENTIFIER="/relative-url"}}, absolute URLs like {{COMPONENT_IDENTIFIER="https://url.com/about"}} also work, and prepending <!-- fs-richtext-ignore --> excludes a line from HTML parsing. If you are reaching for this mainly to reuse blocks of markup, Finsweet Components covers that job as prebuilt Webflow components instead of injected HTML.
Inject elements with Finsweet Attributes v2
New projects should skip the legacy script and use the Inject solution in Finsweet Attributes v2, which Finsweet describes as a way to "Keep elements in sync across websites and inject elements inside of Rich Text blocks". The two generations target different jobs. Attributes v1 centers on rendering arbitrary HTML inside Rich Text, while Attributes v2 centers on syncing and positioning real Webflow elements across pages and sites. A typical v2 job moves a marketing banner from elsewhere on the page into a CMS blog post.
The v2 install script also goes in the <head>:
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-inject></script>
To set up the integration:
- Paste the script into the Head code section under Site settings > Custom code, or into the
<head>tag field in Page settings for a single page. You can also drag a Code Embed element from the Add panel and paste the script there. - Add
fs-inject-element="element"to the source element you want to inject. - Add
fs-inject-element="target"to the destination Rich Text element or Div Block. - If the source lives on another page or site, add
fs-inject-source="PATH"to the target. - Add
fs-inject-instance="IDENTIFIER"to both elements to link a specific source to a specific target. - Publish the site, then test on the live URL. Attributes do not run in Design, Edit, or Preview mode.
Five more fs-inject- attributes control placement and fetching behaviour:
fs-inject-positionsets where the element lands inside a Rich Text block, taking a value from 0 to 100 for percentage depth or a keyword preset such asfirst,one-third,middle, orend.fs-inject-resetix="true"resets Webflow Interactions on the target after injection.fs-inject-css="false"stops the source element's CSS from being injected alongside it.fs-inject-render="false"keeps the source element from rendering in its original position on the page.fs-inject-proxy="PROXY_URL"names a CORS proxy for fetching external documents that are CORS protected, andfs-inject-cache="false"forces a refetch instead of using the cached copy.
Do not duplicate the script tag when you add more Attributes solutions. The v2 library is universal, so list every solution key on that single <script> tag, or replace the keys with the fs-attributes-auto setting and let the library detect solutions itself, which waits for page load and so responds slightly slower. Adding Attributes Table of Contents to the same Rich Text page is just another key on that tag. If you bind CMS data to an attribute value, that only works on Collection pages or inside a Collection List.
Build with the Webflow Data API and the Attributes JavaScript API
All server-side work runs through the Webflow Data API v2 at https://api.webflow.com/v2/, because Sweet Text never exposed a public HTTP API and emits no webhooks. This path suits developers who manage Rich Text content from an external system, then let the Finsweet script style or inject it client-side after the page loads. It requires server-side development and an API token.
The split is clean. Webflow's Data API v2 handles collections, collection items, pages, and site publishing, and its webhook events such as collection_item_created and collection_item_changed push updates to downstream systems under the cms:read scope. Finsweet's Attributes API is a browser-side JavaScript API on the window.FinsweetAttributes global, so it coordinates the client and never touches your CMS data.
Update Rich Text content through the CMS endpoints
A common pattern pushes Rich Text HTML from an external system into a collection item, then publishes it.
To implement this:
- Send
PATCH /collections/{collection_id}/items/{item_id}with the new Rich Text field content; the change lands in staged state. - Send
POST /collections/{collection_id}/items/publishto push the staged items live. - Subscribe a webhook to
collection_item_changedso downstream systems receiveid,siteId,collectionId, andfieldDatawhen content updates.
The injection itself always happens client-side after page load, so this server-side flow never calls Sweet Text or Attributes directly.
Control script behavior with window.FinsweetAttributes
Page scripts coordinate v2 Attributes through the same global the library installs. Call push([key, callback]) to run a callback once a given solution has loaded, load(key) to pull in a solution dynamically, and destroy() to tear down the instance and every loaded solution. The library is free and open source under Apache 2.0 for personal and commercial use, though technical support for the JavaScript API is gated behind Finsweet+ membership. If you would rather have an assistant handle the CMS side of this work, our Webflow MCP server exposes the same collection and publishing operations to AI tools.
What you can build with the Sweet Text Webflow integration
Integrating Sweet Text by Finsweet with Webflow, in practice the Attributes solution that replaced it, lets you style and compose Rich Text content past what the native editor supports, without adding a CMS field per formatting variation or handing editors code access.
Four patterns come up repeatedly on Webflow sites:
- Blogs with highlighted key phrases: Editors apply inline custom classes to specific words inside editorial content, so a finance blog can colour-code ticker symbols directly in the CMS Rich Text field.
- Marketing pages with styled callouts: Pull quotes, emphasis text, and branded callouts render inside a single Rich Text block, so a landing page keeps callout styling consistent without a separate CMS field for each one.
- Documentation with colour-coded terminology: Docs sites give technical terms class-based colour and typographic treatment, which turns plain Rich Text into readable reference pages.
- CMS posts with injected components: Editors place a signup form, styled button, or marketing banner inside a post using component syntax in v1 or Inject in v2, so every post can carry interactive elements without a rebuilt template.
If the harder part is getting Rich Text content into Webflow in the first place, start with our Webflow CMS API guide.
Frequently asked questions
No. Finsweet states that "Sweet Text has been rebuilt in Attributes and is now deprecated," the old product URL redirects to a cloneable listing that no longer resolves, and the tool is gone from Finsweet's products page. Start new builds on the Inject solution in Finsweet Attributes v2.
No. Finsweet's Attributes FAQ states, "No, you can't, Attributes and Attributes Legacy (v1) are not capable of running together on the same page, they are not compatible," though you can use them on different pages of the same site. Migrating means rewriting attribute names from
fs-richtext-*tofs-inject-*, and Finsweet recommends "starting any new page or project with the current version of Attributes."Finsweet Attributes run only on published sites, not in preview mode. Publish to your
.webflow.iostaging domain to test, then append?fs-attributes-support=trueto that staging URL to launch Finsweet's automated support service, which only runs onwebflow.iolinks. Human support is reserved for Finsweet+ members via Slack.Yes, the original script did. A Finsweet forum thread from mid 2024 traced flashing content and duplicated items to Sweet Text running alongside CMS Load, and removing the script fixed both. Finsweet support replied on June 10, 2024 that Sweet Text had been reworked into Powerful Rich Text, which is built to work with filters on the page.
Click the purple "dot" icon in the attribute's Value field, per Webflow's Custom attributes documentation. The connect option appears on Collection pages and inside Collection Lists, and in main component editing mode, so each CMS item can drive its own attribute value at render time.
Description
Style Rich Text content and inject components on Webflow sites using Finsweet's fs- custom attributes. Sweet Text itself is deprecated: Finsweet Attributes v2 Inject is the current solution, with Powerful Rich Text as the v1 legacy path.
This integration page is provided for informational and convenience purposes only.
GitHub
Connect GitHub with Webflow to display repo data, sync releases to your CMS, and deploy full-stack apps from your codebase.
fullPage.js
Connect fullPage.js, a snap-scrolling JavaScript library, with Webflow to build full-screen section-based sites with dot navigation, horizontal slides, and keyboard navigation.
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.
Figma
Connect Figma with Webflow to sync design system components, variables, and styles into production-ready sites without manual rebuilding.
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.
Elfsight
Connect Elfsight, a cloud-based widget platform, with Webflow to add review displays, social media feeds, chat buttons, and interactive elements through embeddable code snippets.
CMS Library: Load More
Load items from your Collection List on the same page, with Finsweet's CMS Library!
Common Ninja
Connect Common Ninja, a no-code widget platform, with Webflow to add interactive pricing tables, review displays, social feeds, popups, and 200+ other embeddable components to any page.
CMS Library: Nest
Simulate multiple nested Collections on a single page, with Finsweet's CMS Library!
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
