TypeScript icon, indicating that this package has built-in type declarations

    1.23.0 • Public • Published

    Interface Editor

    The Interface Editor is an application that allows to modify and customize the coveo-search-ui.


    npm install coveo-interface-editor --save



    • close: () => void

      The function called when closing the editor. Typically, it will redirect the user to the location they were before opening the editor.

    • delete: () => void

      The function called when deleting the search page. Typically, it will send a request to delete the search page followed by redirecting to the Interface Editor creator.

    • environment: Environments

      The environment the Interface Editor is instantiated in. Valid values include:

      CloudV2HostedSearchPage, CoveoForDynamics, CoveoForSalesforcePro, CoveoForSalesforceEnterprise, salesforcefree.

    • load: () => Promise<ISearchPageContent>

      The function to retrieve the search page. The returned object should respect the ISearchPageContent interface:

        interface ISearchPageContent {
            head: string;
            body: string;
    • requireConfig: Record<string, string>

      The option tells the Interface Editor where to retrieve the files for the Monaco code editor. Note that we package these files as part of our build process. The object should take the following form:

            url: '<path to Interface Editor directory>/js/vs/loader.js',
            paths: {
                vs: '<path to Interface Editor directory>/js/vs'
    • save: (body: string) => Promise<void>

      The function called when saving. It receives the edited search page body. Typically, it should send a request to save the page.


    • containerClasses?: Partial<ISearchInterfaceData>

      Specifies the CSS classes of elements that contain coveo-search-ui components. The ISearchInterfaceData interface has the following properties:

        interface ISearchInterfaceData {
            facetsContainer: string;
            sortsContainer: string;
            foldingsContainer: string;
            templatesContainer: string;
        Default values:
        facetsContainer: 'coveo-facet-column' (or 'coveo-facet-container' if the "mobile" option is true),
        sortsContainer: 'coveo-sort-section',
        foldingsContainer: 'CoveoSearchInterface',
        templatesContainer: 'CoveoResultList'
    • displayMode?: string

      Sets the width of the search page iframe. Valid values and their corresponding pixel widths are:

        enum displayWidths {
            mobile = 480,
            mobileLandscape = 640,
            tablet = 767,
            laptop = 1024,
            desktop = 1920,
            ipx = desktop
    Default value: `desktop`
    • features?: ICustomizableFeatures

      An object that allows disabling features in the Interface Editor. The ICustomizableFeatures interface has the following properties:

        interface ICustomizableFeatures {
            hideNoResultsPageToggle?: boolean;
    • iconsUrl?: string

      Allows specifying a url to load additional icons from. The response should be a JSON string containing objects that respect the IIconFromSearchUI interface:

        interface IIconFromSearchUI {
            name: string;
            img: string;
            cssClass: string;
            isFileType: boolean;
    • iframeCss?: string[]

      Allows specifying additional CSS files to include inside the Interface Editor iframes. The files will be used inside the main search page, the result layout editor and the new result template editor. If you specify this option, you must include a reference to the InterfaceEditorIFrame.css styles file in your array for the iframe to render correctly.

    • mobile?: boolean

      Specifies if the search page is in mobile mode.

    • repositories?: IRepository[]

      Repository objects specified in this array become preconfigured options shown when a user creates a new search page or a CoveoTab component.

        interface IRepository {
            id: string;
            title: string;
            icon: string;
            description: string;
            queries: string[];
            tabs: string[];
            facets: string[];
            sorts: string[];
            templates: IRepositoryTemplate[];
            foldings: string[];
    • resultCss?: string

      Allows specifying additional CSS files to include inside the Interface Editor iframes. These include the the result layout editor and the new result template editor. This option will not be used if iframeCss is defined.

    • rootSelector?: string

      A selector that should retrieve the root element of the search page.

      Default value: .CoveoSearchInterface

    • visibleComponents?: IVisibleComponentCreator[]

      Allows specifying additional drag-and-drop components. The IVisibleComponentCreator interface is:

        export interface IVisibleComponentCreator {
            id: string;
            creator: (parser: any) => HTMLElement;
            onDrop?: (node: IParsedNode) => JQueryPromise<IEditableNode>;
            icon: React.DOMElement<React.SVGAttributes<SVGElement>, SVGElement>;
    • onModeChange?: (mode: string) => void;

      Allows specifying a callback function to be executed when the interface editor mode (ie: Interface versus Code versus Help) is modified by the end user.


    Node version 6+ required
    npm install -g gulp                 # Gulp is the build tool, -g to install globally (so you can call gulp directly in the cmd line)
    npm install                         # Install all the local dependencies for the project
    gulp                                # Compiles the project (you may need to use ./node_modules/.bin/gulp).

    See Gulpfile.js for more options.

    Dev server

    gulp dev
    gulp dev --env.production           # Starts a dev server while compiling in production mode (useful for testing the build).

    This starts a webpack dev server available on http://localhost:8083

    It also starts a node js express server on http://localhost:3000 to act as a mock backend that allows to save and load search pages.

    Dev server for IPX

    * Create a new file in `backend/edit/ipx.config` by copying `backend/edit/ipx.config.sample`
    * The API key needs to have VIEW/EDIT search pages privilege, as well as EXECUTE_QUERY
    * Run `gulp dev` to start the dev server as usual
    * Access `localhost:8083/ipx` in your browser
    * `orgID`, `ipxID` and `ipxName` can all be obtained easily from the admin UI interface in the IPX section.
    * The API key can be created from the administration UI as well
    * You can alternatively load `localhost:8083/ipx?org={org}&id={id}&name={name}&access_token={token}` to override any local config

    Prod server

    gulp prod

    Compiles resources in production mode and starts a node server on http://localhost:3000.

    Analyzing bundle sizes

    gulp prod --env.analyzeBundles

    The webpack-bundle-analyzer package is included in the project. It can be activated by adding --env.analyzeBundles to any gulp task that includes a webpack compilation step (e.g. gulp dev, gulp prod, gulp build).


    (c) Copyright 2017 Coveo Solutions Inc, all rights reserved.




    npm i coveo-interface-editor

    DownloadsWeekly Downloads






    Unpacked Size

    24.3 MB

    Total Files


    Last publish


    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar