---
title: "Smart Text Highlight — Free Framer component · Best of Framer"
description: "Free Framer component · by Sirrah Space · Text. The Smart Text Highlight component revolutionizes how you structure typography in Framer."
canonical: "https://framer.elliotli.dev/component/smart-text-highlight"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Smart Text Highlight

# Smart Text Highlight

Custom styles for specific words in text

[View on Framer](https://framer.com/marketplace/components/smart-text-highlight/?via=elliot-li)

![Smart Text Highlight preview image 1](https://framer.elliotli.dev/og/component/smart-text-highlight/bc572d09aa1db3fe/1600x1200.jpg)

## Summary

The Smart Text Highlight component revolutionizes how you structure typography in Framer.

## Description

The **Smart Text Highlight** component revolutionizes how you structure typography in Framer. Instead of manually splitting paragraphs into multiple text boxes to change a single word's color or font, you can write your text naturally and define smart rules to style specific words dynamically.

Whether you want to emphasize key features with a vibrant brand color, apply a unique font weight to a specific term, add marker-style backgrounds, or turn inline words into interactive hyperlinks, this component handles it seamlessly. It even includes advanced occurrence targeting, allowing you to highlight only the first or second time a word appears in a paragraph.

**Functions (Key Features):**

-   🎯 **Targeted Highlighting:** Automatically find and style specific words using smart text parsing and regex logic.
    
-   🎨 **Custom Typography:** Apply completely different fonts, weights, colors, and text decorations to individual words.
    
-   🔗 **Interactive Links:** Turn any highlighted word into a clickable hyperlink that opens safely in a new tab.
    
-   🔢 **Occurrence Control:** Choose exactly which instance of a word to highlight (e.g., target only the 1st and 3rd appearance).
    
-   ✨ **Hover Effects:** Add smooth hover scaling to make your emphasized keywords feel interactive and tactile.
    

**How to Use:**

1.  **Copy & Paste:** Copy the component from the Layers panel and paste it directly onto your Framer canvas.
    
2.  **Write Text:** Enter your full paragraph or sentence into the main **Text** property.
    
3.  **Set Default Style:** Choose the base font and color for the regular, unhighlighted text using the default settings.
    
4.  **Add Highlights:** In the **Highlight Words** array, add a new item and type the exact word you want to style.
    
5.  **Customize Keyword:** Adjust the specific font, color, background, and link for that keyword. Use the **Occurrences** field (e.g., type "1") if you only want to target specific repetitions.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2060

## Details

- **Author**: Sirrah Space
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-17
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos