Welcome to Interface X
Interface X is a powerful, flexible Vue.js component library designed to help you build expressive commerce search and discovery experiences. Whether you use Empathy Search API, Elasticsearch, Solr, or other search APIs, Interface X provides the building blocks you need to create irresistible, joyful search UIs. Interface X is used in some of the most beautiful commerce search experiences, including Primor.eu, Carrefour.es, Tous.es, and Casadellibro.es.Why Interface X?
Easy to Integrate
Add Interface X to any website with just a few lines of code. Works seamlessly with Vue.js and React projects.
Fully Customizable
Choose your components, layouts, styles, and behaviors to craft exclusive search experiences that match your brand.
Interoperable
Adapt to work with any search service endpoints using the flexible adapter pattern.
Scalable Solution
Start with basic search and extend with additional features and components whenever you need them.
Key Features
Modular Architecture
Modular Architecture
Interface X uses independent X Modules for different features. Each module represents a specific domain like search, facets, recommendations, or history queries. Mix and match only what you need.
Event-Driven System
Event-Driven System
Components communicate through a powerful event bus, enabling loose coupling and flexible composition. Events flow through the system to keep all components in sync.
Design System Builder
Design System Builder
Built-in Tailwind CSS plugin lets you create custom design systems through configuration files. Match your brand identity perfectly.
Privacy-First Tagging
Privacy-First Tagging
Track session interactions and user behavior without storing personally identifiable information. Built-in analytics respect user privacy.
Getting Started
Installation
Install Interface X and set up your development environment
Quickstart
Build your first search experience in minutes
Architecture
Learn about the core architecture and design patterns
Components
Explore the component catalog
The Interface X Ecosystem
Interface X is a monorepo containing multiple packages that work together:- @empathyco/x-components - The core component library
- @empathyco/x-adapter - API adapter utilities for connecting to any search API
- @empathyco/x-types - TypeScript types and models
- @empathyco/x-tailwindcss - Design system builder plugin
- @empathyco/x-utils - Shared utility functions
Looking for a complete example? Check out X Archetype - Empathy’s vision of the ideal mix of X Components, ready to connect to any search API.
Community and Support
Interface X is open source and licensed under Apache 2.0. We welcome contributions from the community.GitHub Repository
View the source code and contribute
Report Issues
Found a bug? Let us know