Render the catalog into a specific DOM node


  1. el: HTMLElement
    The DOM node that the catalog should be rendered into.
  2. opts : object
    The options for rendering the catalog as specified in Configuring xkit-catalog.js



renderCatalog Renders the full Xkit catalog into a specific DOM node. Using renderCatalog requires a bit more surrounding code to determine the right node and if it is available, but provides more flexibility. It is especially useful when rendering Xkit into a Javascript-controlled page.

        <script src="https://<your-slug>"></script>
    // ... assumes jQuery
    <div id="my-special-node"></div>
      $(() => {
        xkit.renderCatalog($("#my-special-node").get(0), {
          title: "My Integrations"

To update the state of the catalog, for example if a button clicked outside should change the current URL, use the returned pushHistory function.

const catalog = xkit.renderCatalog($("#my-special-node").get(0), {
  title: "My Integrations"

$("#back-to-connectors").click(() => catalog.pushHistory("/connectors"))