Oryx

Last updated:
Edit on GitHub

Oryx is a framework that empowers developers to build composable frontends with ease. It provides a rich library of components, including a design system, which lets developers create modern and visually appealing user interfaces. The components integrate with Spryker APIs by default, providing a seamless experience for developers.

There are different ways to learn Oryx. To start developing with Oryx right away, see the setup guide. If you want to first learn more about Oryx, continue reading this document.

Key characteristics

  • Composable and configurable: components can be composed and configured to fit your project needs.
  • Extensible and upgradable: components are customizable without losing the ability to upgrade to newer versions.
  • Web framework agnostic: Oryx is based on web components and uses plain Typescript code wherever possible, so it can be integrated into any web technology.
  • Component driven: Oryx is component centric and is based on web components.
  • Multi-site: supports multiple sites within one installation.
  • High quality: optimized for performance, SEO, and responsive design with keyboard support.

Platform features

  • SSR: supports server-side rendering for improved performance and SEO.
  • Lazy Loading: delays loading of non-critical resources for a faster initial load time.
  • Partial Hydration: enhances performance by hydrating only critical components on initial load.
  • Layout and theming: provides a flexible layout system and easy theme customization.
  • Routing: configurable and dynamic routing for a seamless user experience.
  • Context: provides data context for components.
  • Presets and feature sets: provides a set of pre-configured features for common use cases.
  • Dependency injection: allows for customizability and extensibility for shared business logic.

Business features

  • Internationalization: supports multiple languages, currencies, and sites for an easy rollout to multiple countries.
  • Auth: provides functionality and components for user authentication.
  • Search: provides search features that are used to build search and filtering experiences.
  • Product: provides product features that are used to build a product page experience.
  • Cart: provides shopping cart features.
  • Checkout: provides guest and registered checkout features.
  • User: provides features to manage the user profile.