---
title: Use the legacy Interface Editor
slug: '1852'
canonical_url: https://docs.coveo.com/en/1852/
collection: build-a-search-ui
source_format: adoc
---
# Use the legacy Interface Editor
> **Tip**
>
> The Interface Editor is a reliable, time-tested tool.
> However, we recommend that you use the Interface Editor only when instructed to by the documentation.
> If you aren't, you may want to try the new [search interface builder](https://docs.coveo.com/en/1656#create-a-hosted-search-interface) instead.
> Thanks to its intuitive design, you can create a search interface for test and demo purposes.
> Search interfaces created with the new builder are also hosted by Coveo, which makes them immediately operational.

The Interface Editor lets you create and customize feature-rich [search interfaces](https://docs.coveo.com/en/2741/) using the Coveo JavaScript Search Framework.
Since there are [newer alternatives](https://docs.coveo.com/en/3368/) to the Framework, we recommend that you use the Interface Editor only when instructed to by the documentation.

The Interface Editor is available through the [**Search Pages**](https://platform.cloud.coveo.com/admin/#/orgid/search/search-pages/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/search/search-pages/)) page of the Coveo Administration Console.

## UI view

The **UI View** provides a WYSIWYG editor useful for designing and testing search interfaces.
This view is selected by default when you access the Interface Editor.

> **Tip**
>
> In **UI View**, hover over a ![Tooltip | Coveo Interface Editor](build-a-search-ui/interface-editor-tooltip-icon.png) icon to get detailed reference information regarding a component or an option.
> 
> ![Animation: Hovering the Enable query suggestions tooltip | Coveo Interface Editor](:https://docs.coveo.com/en/assets/images/build-a-search-ui/hover-tooltip.gif)

### Adding components

You can add components ([tabs](https://docs.coveo.com/en/1406/), [facets](https://docs.coveo.com/en/198/), etc.) to a search interface by dropping them on the page.

**Example**

Adding a dynamic facet

![Animation: Adding a dynamic facet in UI View | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/build-a-search-ui/drag-and-dropping-components-example.gif)
To add a component

. On the right side, from the list of **Components**, drag the desired component and drop it where it should appear on the page.
You can always [move the component](#moving-components) later.
. In the panel that appears, configure the required component settings, and then click **Ok**.

The component is added and automatically selected in edit mode.

. (Optional) Further customize the component using the available panels.
You can always [edit the component](#editing-components) later.
. Click **Apply**.

### Moving components

Any search interface component you can [add by dragging](#adding-components) can be moved in the same fashion.

**Example**

Moving a dynamic facet

![Animation: Dropping an existing dynamic facet in UI View | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/build-a-search-ui/moving-components.gif)

### Editing components

You can select a component and enter edit mode to review and modify its current configuration.

**Example**

Editing a dynamic facet

![Example: Editing a dynamic facet in UI View | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/build-a-search-ui/customizing-components-example.gif)
To edit a component

. Hover over the desired component instance, and then click [edit].
. Use the available panels to make the desired modifications, and then click **Apply**.

### Deleting components

Any search interface component you can [add by dragging](#adding-components) can also be removed.

**Example**

Deleting a dynamic facet

![Animation: Deleting a dynamic facet in UI View | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/build-a-search-ui/removing-components-example.gif)

To delete a component

. Hover over the component instance, and then click [delete].

. In the **Delete a component** dialog, click **Yes**.

### Managing result templates

When editing a result template, you can [add](#adding-components), [move](#moving-components), [edit](#editing-components), and [delete](#deleting-components) result template components (Field Value, Icon, etc.), just as you would with other search interface components (Facet, Tab, etc.).
You can also visually edit result template cells and rows.

For more detailed information and examples, see [Configure search result templates](https://docs.coveo.com/en/1767/).

**Example**

Designing a YouTube result template

![Animation: Designing a YouTube result template in UI View | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/build-a-search-ui/designing-a-youtube-result-template.gif)

### Editing the no results page

You can customize the content that gets displayed when a query doesn't return any results.

**Examples**

* Editing the no results message

![Animation: Editing the no results message | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/build-a-search-ui/editing-the-no-results-page.gif)

* Adding a custom HTML section to the no results message

![Example: Adding a custom HTML section to the no results message | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/build-a-search-ui/edit-no-results-page-html.png)

![Example: A custom no results message | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/jsui/interface-editor-custom-no-results-display-html.png)
To edit the no results page

. On the upper-left corner, click icon:settings-cog[alt=settings-cog,width=16].
. Select **Edit no results page**.
. In the **Query Summary Options** panel that appears, enter the desired text in the **Message to display** input.
You can use `+$[query](https://docs.coveo.com/en/231/)+` to insert the current query expression in the message (for example, `+$[query](https://docs.coveo.com/en/231/), you say?
Sorry, no results!+`).
. (Optional) Set additional options as desired, possibly including a custom HTML section.
. Click **Apply**.

### Editing other settings

You can configure additional basic search interface options through the **UI Settings** (icon:settings-cog[alt=settings-cog,width=16]) menu.

**Example**

Modifying search interface and result list settings

![Animation: Modifying search interface and result list settings in **UI View** | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/build-a-search-ui/editing-other-settings.gif)

## Code view

Each modification you make in the **UI View** has an impact on the underlying markup configuration of the search interface.
This markup configuration can be accessed by selecting the **Code View**.


### Basics

Dropping a new facet as shown in the [Adding components](#adding-components) example generates the following markup:

```html
<div class="CoveoDynamicFacet"
     data-title="File Type"
     data-field="@filetype"
     data-tab="All"></div>
```

The location of each dynamic facet in a search interface is determined by its position in the `div` with the `coveo-facet-column` class:

```html
<div class="coveo-facet-column">
  <!-- The "File Type" facet is rendered first -->
  <div class="CoveoDynamicFacet"
       data-title="File Type"
       data-field="@filetype"
       data-tab="All">
  <div class="CoveoDynamicFacet"
       data-title="Type"
       data-field="@objecttype"
       data-tab="All"></div>
  <div class="CoveoDynamicFacet"
       data-title="Author"
       data-field="@author"
       data-tab="All"></div>
</div>
```

Therefore, dropping a facet to a new location as shown in the [Moving components](#moving-components) example updates its position in the markup:

```html
<div class="coveo-facet-column">
  <div class="CoveoDynamicFacet"
       data-title="Type"
       data-field="@objecttype"
       data-tab="All"></div>
  <div class="CoveoDynamicFacet"
       data-title="Author"
       data-field="@author"
       data-tab="All"></div>
  <!-- The "File Type" facet is rendered last -->
  <div class="CoveoDynamicFacet"
       data-title="File Type"
       data-field="@filetype"
       data-tab="All">
</div>
```

Modifying the configuration of a facet as shown in the [Editing components](#editing-components) example sets or updates the corresponding `data`-prefixed markup attributes:

```html
<!-- The "File Type" facet has a new "data-number-of-values" attribute -->
<div class="CoveoDynamicFacet"
     data-title="File Type"
     data-field="@filetype"
     data-tab="All"
     data-number-of-values="3">
```

Removing a facet as shown in the [Deleting components](#deleting-components) example deletes its corresponding `div` entirely:

```html
<div class="coveo-facet-column">
  <!-- The "File Type" facet is gone -->
  <div class="CoveoDynamicFacet"
       data-title="Type"
       data-field="@objecttype"
       data-tab="All"></div>
  <div class="CoveoDynamicFacet"
       data-title="Author"
       data-field="@author"
       data-tab="All"></div>
</div>
```

### Leveraging new and advanced features

The **Code View** is especially useful when you want to leverage JavaScript Search Framework components and options that aren't fully supported by the **UI View**.

**Examples**

* Adding a [`Settings`](https://coveo.github.io/search-ui/components/settings.html) component

![Animation: Adding a Settings component using the **Code View** | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/build-a-search-ui/code-view-add-component-example.gif)

* Enabling the [partial match](https://docs.coveo.com/en/2858/) feature

![Image: Enabling partial match | Coveo Interface Editor](https://docs.coveo.com/en/assets/images/build-a-search-ui/enabling-partial-match.png)

### Executing custom JavaScript code

In **Code View**, you can add `script` tags, typically after the closing `div` of the element with the `CoveoSearchInterface` class, to execute custom code.

**Examples**

* [Passing component options before the `init` call](https://docs.coveo.com/en/346#passing-component-options-before-the-init-call)

```html
<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-search-section">
    <div class="CoveoSearchbox"></div>
  </div>
  <!-- ... -->
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  Coveo.options(document.getElementById("search"), {
    Searchbox: {
      enablePartialMatch: true,
      partialMatchKeywords: 3,
      partialMatchThreshold: "35%"
    }
  });
});
</script>
```

* [Send custom context information](https://docs.coveo.com/en/399/)

```html
<div id="search" class="CoveoSearchInterface">
  <script type="text/context" class="CoveoPipelineContext"></script>
  <!-- ... -->
</div>

<script>
document.addEventListener("afterInitialization", () => {
  const context = Coveo.get(document.querySelector(".CoveoPipelineContext"));
  context.setContext({ "userRole": getUserRole() })

  function getUserRole() {
    // Implementation ...
  }
});
</script>
```

## Limitation

Component options can't be set in the `init` function call of a legacy hosted search page;
you must rather [pass component options before the `init` call](https://docs.coveo.com/en/346#passing-component-options-before-the-init-call).

## Required privileges

The following table indicates the privileges required to view or edit elements of the [**Search Pages**](https://platform.cloud.coveo.com/admin/#/orgid/search/search-pages/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/search/search-pages/)) page and associated panels, such as the Interface Editor (see [Manage privileges](https://docs.coveo.com/en/3151/) and [Privilege reference](https://docs.coveo.com/en/1707/)).

[cols="1,1,1", options="header"]
|===
| Action | Service - Domain | Required access level

| View search pages
| Organization - Organization  
  Search - Search pages and IPX
| View

.2+| Edit search pages
| Organization - Organization
| View

| Search - Search pages and IPX
| Edit

.2+| Edit and make queries
| Search - Search pages and IPX
| Edit

| Search - Execute queries
| Allowed

|===