{"id":17856842,"url":"https://github.com/empathyco/x","last_synced_at":"2025-05-16T06:07:46.617Z","repository":{"id":36952922,"uuid":"359757377","full_name":"empathyco/x","owner":"empathyco","description":"Commerce Search \u0026 Discovery frontend web components","archived":false,"fork":false,"pushed_at":"2025-05-15T09:08:40.000Z","size":66807,"stargazers_count":82,"open_issues_count":11,"forks_count":22,"subscribers_count":22,"default_branch":"main","last_synced_at":"2025-05-15T10:23:35.167Z","etag":null,"topics":["components","components-library","discovery","e-commerce","elasticsearch","event-driven","front-end","frontend","javascript","open-source","privacy","search","search-engine","solr","typescript","vue","vuejs","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/empathyco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-04-20T09:25:21.000Z","updated_at":"2025-05-15T09:08:43.000Z","dependencies_parsed_at":"2023-09-22T20:10:38.891Z","dependency_job_id":"e73ca41d-6d45-485a-9d3d-53832df56466","html_url":"https://github.com/empathyco/x","commit_stats":{"total_commits":2387,"total_committers":67,"mean_commits":35.62686567164179,"dds":0.7402597402597403,"last_synced_commit":"5485d7adbaa4532e4b2873014f45717c66689600"},"previous_names":[],"tags_count":1645,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/empathyco%2Fx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/empathyco%2Fx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/empathyco%2Fx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/empathyco%2Fx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/empathyco","download_url":"https://codeload.github.com/empathyco/x/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254320448,"owners_count":22051222,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","components-library","discovery","e-commerce","elasticsearch","event-driven","front-end","frontend","javascript","open-source","privacy","search","search-engine","solr","typescript","vue","vuejs","web"],"created_at":"2024-10-28T03:09:58.294Z","updated_at":"2025-05-16T06:07:41.605Z","avatar_url":"https://github.com/empathyco.png","language":"TypeScript","readme":"# Commerce Search \u0026 Discovery: Interface X\n\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)\n[![Check branch is releasable](https://github.com/empathyco/x/actions/workflows/build.yml/badge.svg?branch=main)](https://github.com/empathyco/x/actions/workflows/build.yml)\n[![GitHub contributors](https://img.shields.io/github/contributors/empathyco/x.svg)](https://github.com/empathyco/x/graphs/contributors/)\n[![Created by](https://img.shields.io/badge/Created%20by-Empathy.co-green)](https://www.empathy.co)\n\nWhether you use Empathy Search API endpoints, Elasticsearch, Solr or other search APIs, bring your\ncommerce search and discovery experience to life with Interface X, an irresistible, expressive, and\njoyful search UI. Interface X is used within some of the most beautiful commerce search experiences\nout there, e.g. [Primor.eu](https://www.primor.eu/es_es/?query=brocha),\n[Carrefour.es](https://www.carrefour.es/?q=queso),\n[Tous.es](https://www.tous.com/es-es/?query=anillo),\n[Casadellibro.es](https://www.casadellibro.com/?query=novela) and\n[MotiveMarket.com](https://www.motivemarket.com/amagijon?query=queso).\n\nInterface X is a library of standalone, configurable building blocks (available as Vue.js based\nX\u0026nbsp;Components) that allow you to quickly construct the search UI for your shop. You can create a\nsmooth, personalized search and discovery experience, while significantly minimizing development\ntime.\n\nEach component represents a graphical part of the UI, with its own unique view and behavior. They’ve\nbeen smartly designed to work together yet independently, so a single component adds real value to\nyour UI by itself. The more components you add and combine, the more functionality you get. You can\ncraft your own UI bundle with the right components for your shop. There are numerous components to\nchoose from, and the catalog evolves quickly with new experiences.\n\nSee an\n[overview of the Empathy Platform features](https://docs.empathy.co/explore-empathy-platform/features/)\nsupported by Interface X.\n\n## Highlights\n\n- **Easy-to-add interface layer**. Installing and setting up the interface is simple: just add a few\n  lines of code.\n- **Use it anywhere.** A search interface layer that is easy to integrate into any website, with X\n  Components ready to use in your Vue.js and React projects.\n- **Interoperable**. Interface X can adapt and work independently with any search service endpoints!\n- **Fully customizable experience**. Choose the configuration components, layouts, styles, and\n  behaviors to craft exclusive search and discovery experiences.\n- **Expressive design**. Wrap the experience up in a neat, intuitive, and interactive UI design that\n  fully matches your brand identity and your website’s look and feel.\n- **Scalable solution**. Extend the experience whenever you want with additional features and\n  components.\n- **Intuitive search**. Interface X learns from shopper behavior and queries to understand shopper\n  intent.\n\n## About the Interface X ecosystem\n\nInterface X is formed by [multiple packages](./.github/CONTRIBUTING.md#interface-x-and-packages).\nWatch this space as the project will be updated regularly.\n\nWhile most of the packages are minor dependencies, there is a key package to bear in mind:\n\n- **[@empathyco/x-components](https://github.com/empathyco/x/tree/main/packages/x-components)** -\n  This is the core package of the project. These standalone and configurable building blocks allow\n  you to quickly build the search UI for your shop. Create a smooth, personalized search and\n  discovery experience, while significantly minimizing development time.\n\nOn top of the packages of this monorepo, there is another project using all the X-Components to\nbuild a search experience:\n\n- **[@empathyco/x-archetype](https://github.com/empathyco/x-archetype)** - This project is Empathy’s\n  vision of the ideal mix of X\u0026nbsp;Components. A project showing the power of the\n  X\u0026nbsp;Components, ready to connect to any search API with customizable layout through design\n  tokens. It is the perfect example to learn how to use the X\u0026nbsp;Components to get you started.\n  This package is now a project outside this monorepo.\n\n## Product documentation\n\nEach component contains inline comments. Alternatively, you can read the product documentation on\nEmpathy’s eDocs documentation portal.\n\n- [Overview of X Components](https://docs.empathy.co/explore-empathy-platform/experience-search-and-discovery/)\n- [Interface X architecture](https://docs.empathy.co/develop-empathy-platform/build-search-ui/web-x-architecture/)\n- [Full UI Reference](https://docs.empathy.co/develop-empathy-platform/ui-reference/)\n\u003c!--- [Frequently Asked Questions](Content to be developed for GitHub project)---\u003e\n\n## Roadmap\n\nWe are working on many key features to consolidate Interface X, including these milestones:\n\n- Publish **extensive documentation** covering functional and technical aspects.\n  [![Release Docs](https://img.shields.io/badge/Released-August%202021-brightgreen)](https://docs.empathy.co)\n- Support\n  **[URL management](https://docs.empathy.co/develop-empathy-platform/ui-reference/components/url/)**\n  to set X\u0026nbsp;Components state based on URL parameters.\n  [![Release Docs](https://img.shields.io/badge/Released-November%202021-brightgreen)](https://docs.empathy.co/develop-empathy-platform/ui-reference/components/url/)\n- Create a\n  **[tagging module](https://docs.empathy.co/develop-empathy-platform/ui-reference/components/tagging/)**\n  to track session interactions without storing PII.\n  [![Release Docs](https://img.shields.io/badge/Released-December%202021-brightgreen)](https://docs.empathy.co/develop-empathy-platform/ui-reference/components/tagging/)\n- Create the **[x-adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter)** to connect\n  to any Search API based on schemas\n  [![Release Docs](https://img.shields.io/badge/Released-April%202022-brightgreen)](https://docs.empathy.co)\n- **[My History](https://docs.empathy.co/explore-empathy-platform/experience-search-and-discovery/my-history.html)**\n  feature, Control your search history and have access to previous intentions.\n  [![Release Docs](https://img.shields.io/badge/Released-July%202022-brightgreen)](https://empathy.co/blog/development-journey-my-history/)\n- Use\n  **[accessibility eslint plugin](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility)**\n  to improve components a11y.\n  [![Release Docs](https://img.shields.io/badge/Released-July%202022-brightgreen)](https://docs.empathy.co)\n- **[Next Queries Preview](https://docs.empathy.co/develop-empathy-platform/ui-reference/components/next-queries/x-components.next-query-preview.html)**:\n  A set of results that matches searches that other shoppers performed after the current to be show\n  within the SERP. This helps the shopper to discover interesting products after the search action.\n  This represents Empathy sciences for **Inspiration** and **Cross-Selling**.\n  [![Release Docs](https://img.shields.io/badge/Released-August%202022-brightgreen)](https://docs.empathy.co)\n- **[Query Results Preview](https://docs.empathy.co/develop-empathy-platform/ui-reference/components/queries-preview/x-components.query-preview.html)**:\n  Provides a list of results matching a query to be inserted before the shopper starts typing as\n  inspiration, in the predictive layer for results matching the current query, or as inspiration in\n  a no results scenario. If you are facing an Archetype type integration,\n  [this is how you set the query preview source of data](https://docs.empathy.co/develop-empathy-platform/build-search-ui/web-archetype-integration-guide.html#dynamic-query-results-preview).\n  [![Release Docs](https://img.shields.io/badge/Released-September%202022-brightgreen)](https://docs.empathy.co/develop-empathy-platform/ui-reference/components/queries-preview/x-components.query-preview.html)\n- **Search box power-ups** such as\n  [animated suggestions](https://docs.empathy.co/develop-empathy-platform/ui-reference/components/search-box/x-components.search-input-placeholder.html)\n  or [forbidden character](https://github.com/empathyco/x/pull/433) set to prevent code injection.\n  [![Release Docs](https://img.shields.io/badge/Released-January%202023-brightgreen)](https://docs.empathy.co/develop-empathy-platform/ui-reference/components/search-box/x-components.search-input-placeholder.html)\n- Create the **x-bus**, a library that provides an event bus to help with event orchestration.\n  [![Release Docs](https://img.shields.io/badge/Released-February%202023-brightgreen)](https://github.com/empathyco/x/tree/main/packages/x-bus)\n- **XDS: Interface X Design System Builder** is a Tailwind plugin thought to generate a new design\n  system for every customer, for every search experience look\u0026feel. XDS brings the concept of\n  components to UI as X Components do with functional behavior.\n  [![Release Docs](https://img.shields.io/badge/Released-April%202023-brightgreen)](https://github.com/empathyco/x/tree/main/packages/x-tailwindcss)\n- **[Vectorized Recommendations](https://docs.empathy.co/explore-empathy-platform/features/vector-recommendations-overview.html)**:\n  These recommendations are relevant product suggestions based on query semantic affinities. They\n  usually show up as product carousels to amaze shoppers with product discovery inspirations.\n- **Filtering Strategies**: Added filtering capabilities to History Queries and Brand\n  Recommendations\n  [![Release Docs](https://img.shields.io/badge/Released-October%202023-brightgreen)](https://docs.empathy.co/explore-empathy-platform/experience-search-and-discovery/history-queries.html)\n- **Experience Controls**: Add capability of loading configurations from an external service\n  [![Release Docs](https://img.shields.io/badge/Released-November%202023-brightgreen)](https://vuejs.org/)\n- **Vue 3 Migration**.\n  [![Release Docs](https://img.shields.io/badge/Released-November%202024-brightgreen)](https://vuejs.org/)\n- **Network Request failure transparency**.\n- **Project generator CLI**.\n- **Observability**: Error capturing \u0026 monitoring.\n\n## How to install\n\nThis project is a monorepo that is handled by [Lerna](https://github.com/lerna/lerna) \u0026\n[pnpm](https://pnpm.io/) \u0026 [Nx](https://nx.dev/). To prepare your development environment, proceed\nas follows:\n\n1. [Install pnpm (v8.6.1)](https://pnpm.io/installation)\n2. Fork the X repository and then clone it to your local environment:\n   `git clone https://github.com/empathyco/x.git`.\n3. Install the dependencies in the root folder: `pnpm install --frozen-lockfile`. This links all the\n   projects.\n\n\u003e Have a look to\n\u003e [this article](https://medium.com/empathyco/moving-to-a-mono-repo-part-1-the-journey-eb63efd8ef64)\n\u003e to see why we moved to a mono repo and how we did it. Take into account that the article talks\n\u003e about the previous version of this monorepo managed by Lerna \u0026 npm.\n\n## How to implement Interface X\n\nOnce you have installed the project, follow the step-by-step guide -\n[How to build your search UI](https://docs.empathy.co/develop-empathy-platform/build-search-ui/).\n\nWatch Ivan Tajes’\n[explanation on how to build a search experience using the X Components](https://www.youtube.com/watch?v=JjjIaQlG9aE).\n\n## How to contribute\n\nWe are building the Interface X ecosystem. If you are interested in helping us out and being part of\nthe future of search experiences, please check our\n[contributing guidelines](./.github/CONTRIBUTING.md).\n\n## Contributors\n\n\u003ca href=\"https://github.com/empathyco/x/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=empathyco/x\" alt=\"Contributors image list\"/\u003e\n\u003c/a\u003e\n\n## License\n\n[Apache 2.0](./LICENSE)\n","funding_links":[],"categories":["Projects Using Vue.js"],"sub_categories":["Open Source"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fempathyco%2Fx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fempathyco%2Fx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fempathyco%2Fx/lists"}