> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Snippet
> Shortens attributes from hits for display in search results.
```ts Signature theme={"system"}
components.Snippet({
attribute: string,
hit: object,
// Optional parameters
highlightedTagName?: string,
nonHighlightedTagName?: string,
separator?: string,
cssClasses?: object,
});
```
## About this widget
The `snippet` function returns attributes in your search results in a shorter form (a snippet).
Snippeted attributes are also [highlighted](/doc/api-reference/widgets/highlight/js).
This function uses Algolia's [snippeting feature](/doc/guides/building-search-ui/ui-and-ux-patterns/highlighting-snippeting/js#snippeting)
in combination with the [`hits`](/doc/api-reference/widgets/hits/js)
or [`infiniteHits`](/doc/api-reference/widgets/infinite-hits/js) widgets.
To determine which [attributes](#param-attribute) should be snippeted,
set them from [the Algolia dashboard](https://dashboard.algolia.com/explorer/configuration/snippeting),
[the CLI](/doc/tools/cli/commands/objects/browse#highlighting-and-snippeting),
or with the API (using the [`attributesToSnippet`](/doc/api-reference/api-parameters/attributesToSnippet) parameter):
```js JavaScript icon=code theme={"system"}
search.addWidgets([
configure({
attributesToSnippet: ["description"],
}),
]);
```
With `attributesToSnippet`, you can also set the snippet's size to a specific number of words (it defaults to 10).
For example, `attributesToSnippet: ['description:5']`.
## Examples
```js JavaScript icon=code theme={"system"}
hits({
container: "#hits",
templates: {
item(hit, { html, components }) {
return html`
${hit.name}
${components.Snippet({ attribute: "description", hit })}
`;
},
},
});
```
## Options
The attribute of the record to snippet.
For deeply nested objects, specify a dot-separated value like `actor.bio`.
```js JavaScript icon=code theme={"system"}
components.Snippet({
// ...
attribute: "description.full",
});
```
Original `hit` object provided to the function.
The value is already bound to the function inside a string template,
so you don't have to provide it. For this to work,
the provided object must have a `_snippetResult[attribute].value` property.
```js JavaScript icon=code theme={"system"}
components.Snippet({
// ...
hit: item,
});
```
The name of the HTML element to wrap the snippeted parts of the string.
```js JavaScript icon=code theme={"system"}
components.Snippet({
// ...
highlightedTagName: "em",
});
```
The HTML element that wraps the non-highlighted parts of the string.
```js JavaScript icon=code theme={"system"}
components.Snippet({
// ...
nonHighlightedTagName: "div",
});
```
The character between each item when the attribute to highlight is an array.
```js JavaScript icon=code theme={"system"}
components.Snippet({
// ...
separator: " - ",
});
```
The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js#style-your-widgets):
* `root`. The component's root element.
* `highlighted`. The highlighted parts.
* `nonHighlighted`. The non-highlighted parts.
* `separator`. The separator elements between highlighted parts.
```js JavaScript icon=code theme={"system"}
components.Snippet({
// ...
cssClasses: {
root: "MyCustomSnippet",
highlighted: ["MyCustomSnippetPart", "MyCustomSnippetPart--subclass"],
},
});
```
## HTML output
```html HTML icon=code-xml theme={"system"}
This is the highlighted text
```