# Using Search Templates

{% hint style="warning" %}
Search Templates is no longer actively developed. We recommend using [Search Templates Starter](/techdocs/implementing-nosto/implement-search/using-search-templates-starter.md) instead, which provides modern development tooling, full source code control, and a local development environment. Onboarding assistance is only available for Search Templates Starter.
{% endhint %}

## **Why use Search Templates?**

Search Templates allow you to add a search function to your website quickly and easily without the need to use an API. You can customize the design of your search pages and autocomplete boxes to match your brand's look and feel. This saves you a lot of time compared to implementing search functionality through an API.

## Get Started

To get started with Search Templates on your website, navigate to the Search tab under 'On-site' within the Nosto UI. This is where everything for Search can be configured and controlled, including designing the templates for search pages and autocomplete dropdowns, as well as search analytics, merchandising rules and other settings. Synonyms for search queries can also be configured here.

> If you prefer to develop the template in your local IDE of choice, we recommend you also take a look at [Nosto-CLI](/techdocs/implementing-nosto/implement-search/deployment-and-testing/nosto-cli.md). The CLI tool set allows you to develop the template on your machine with your own tools, and upload the build artifacts directly to Nosto.

To begin implementing Search, navigate to the Templates tab under Search, and Click on “Open Code Editor”.

<figure><img src="/files/ysTxtlebztKv76wAPVql" alt=""><figcaption><p>Nosto Admin UI > Search</p></figcaption></figure>

You will then be redirected to the Code Editor window, where you can see and edit all project files.

<figure><img src="/files/80kUPFVGc4asiu0SBhEk" alt=""><figcaption><p>Code Editor</p></figcaption></figure>

Search Templates ship with a library called `@nosto/preact` that contains functionality to interact with the Nosto Search product. API documentation for the library is available [here](https://nosto.github.io/search-templates/)

## Project structure

Project structure has the following requirements:

* `index.js` - this is application entry point that is used when building project. When building project it will recursively scan this file for imports.
* `build/` - this directory stores build output that will be used when deploying project.

## Saving, testing & deploying

After saving changes (`CTRL + S`) build should be triggered and bundled code should be uploaded to CDN. You can preview final result on your website and deploy it when ready.

{% content-ref url="<https://github.com/Nosto/wiki-docs/blob/Techdocs/implementing-nosto/implement-search/implement-search-using-code-editor/broken-reference/README.md>" %}
<https://github.com/Nosto/wiki-docs/blob/Techdocs/implementing-nosto/implement-search/implement-search-using-code-editor/broken-reference/README.md>
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nosto.com/techdocs/implementing-nosto/implement-search/implement-search-using-code-editor/using-the-code-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.