---
title: Display Smart Snippets
slug: n69a8249
canonical_url: https://docs.coveo.com/en/n69a8249/
collection: build-a-search-ui
source_format: adoc
---
# Display Smart Snippets
To display [Smart Snippets](https://docs.coveo.com/en/l6eb0531/) in a JavaScript Search Framework interface, use the [`SmartSnippet`](https://coveo.github.io/search-ui/components/smartsnippet.html) and [`SmartSnippetSuggestions`](https://coveo.github.io/search-ui/components/smartsnippetsuggestions.html) components.

If you're using Atomic or Headless, see instead [Atomic](https://docs.coveo.com/en/l8ve0354#coveo-atomic) or [Headless](https://docs.coveo.com/en/l8ve0354#coveo-headless).

> **Notes**
>
> * The [`SmartSnippet`](https://coveo.github.io/search-ui/components/smartsnippet.html) and [`SmartSnippetSuggestions`](https://coveo.github.io/search-ui/components/smartsnippetsuggestions.html) components must appear below the [`ErrorReport`](https://coveo.github.io/search-ui/components/errorreport.html) and above the [`ResultList`](https://coveo.github.io/search-ui/components/resultlist.html) component in a search interface markup as follows:
> 
>  
> [.highlight]
> ```html
// ...
<div class="CoveoErrorReport" data-pop-up="false"></div>
<div class="CoveoSmartSnippet"></div>
<div class="CoveoSmartSnippetSuggestions"></div>
<div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true">
// ...
```
> 
> * You can use inline styling to customize the [`SmartSnippet`](https://coveo.github.io/search-ui/components/smartsnippet.html) and [`SmartSnippetSuggestions`](https://coveo.github.io/search-ui/components/smartsnippetsuggestions.html) components.
> In the following code sample, the `CoveoSmartSnippet` text color is `#f54242`:
>  
> [.highlight]
> ```html
// ...
<div class="CoveoSmartSnippet">
    <script type="text/css">
        body {
        color: #f54242;
        }
    </script>
</div>
//...
```
> 
> * The [`SmartSnippet`](https://coveo.github.io/search-ui/components/smartsnippet.html) and [`SmartSnippetSuggestions`](https://coveo.github.io/search-ui/components/smartsnippetsuggestions.html) components were introduced in the [June 2021 (v2.10086)](https://docs.coveo.com/en/m56a0507#june-2021-1st-release-v210086) release of the Coveo JavaScript Search Framework.