Skip to content

spryker/oryx

Repository files navigation

Oryx

CI checks Oryx component dev env status Composable storefront dev env status

Oryx is a framework for building composable storefronts, providing a rich library of components, a render engine, and a design system. It is based on web components and vanilla JavaScript (Typescript), allowing integration into any web framework. Oryx integrates with Spryker APIs by default, providing a seamless experience for developers.

Key Characteristics

  • Composable & Configurable – Oryx components can be composed and configured to fit your project needs.
  • Extensible & Upgradable – All components are customizable without losing the ability to upgrade to newer versions.
  • Web Framework Agnostic – Oryx can be integrated into any web technology, it is based on web components and uses plain Typescript code wherever possible.
  • Component Driven – Oryx is component centric and uses are based on web components
  • Multi-Site – Oryx 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 faster initial load time.
  • Partial Hydration – Enhances performance by only hydrating critical components on initial load.
  • Layout & 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 – Allow for customizability and extensibility for shared business logic

Business Features

  • Internationalization – Supports multiple languages, currencies and sites for 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 anonymous and registered checkout features.
  • User – Provides features to manage the user profile.

Installation

  1. Install dependencies:

npm i

  1. Run the application in development mode:

npm run dev

The application gets available at localhost:3000, or the next available port on your machine.

Further Documentation

Oryx Documentation