Snap
For developers integrating Athos, we offer the frontend Snap SDK: an open-source suite of libraries designed to simplify everything from data fetching to UI rendering.
🫰The Snap SDK Ecosystem
Snap is not an acronym! It is Athos Commerce's open-source suite of developer tools designed to bridge the gap between our raw APIs and your storefront’s user interface.
What can Snap do? While our APIs provide the raw data, the Snap SDK provides the logic, state management, and UI components needed to build a world-class e-commerce experience. We built Snap to be modular; you can go "all-in" with our pre-built UI components, OR simply use our lightweight client to handle your API requests.
Why use Snap instead of raw API calls?
- State Management: Snap tracks filters, pagination, and sorting state so you don't have to write complex logic to manage the URL or user selections.
- Performance: Built-in caching and optimized network requests ensure your search is lightning-fast.
- Flexibility: Use only what you need. Snap is organized into layers (Client, Controller, and UI), allowing you to hook into our ecosystem at the level that matches your project's architecture.
📦Packages
Snap is modular. Depending on your project’s architecture, you can choose the layer that best fits your needs
1. The Data Layer: Snap Client
@athoscommerce/snap-client
If you are doing a pure API Integration, start here. The Client is a lightweight wrapper around our Search, Autocomplete, and Recommendations APIs. It handles the network requests, query parameter construction, and response parsing so you don't have to.
Best for: Typscript/JavaScript runtimes, Custom headless builds, mobile apps, or server-side rendering (SSR). Getting Started.
2. The Logic Layer: Snap Controller
@athoscommerce/snap-controller
The Controller sits on top of the Client. It doesn't just fetch data; it manages state. It tracks what filters are active, which page the user is on, how the results should be sorted, event tracking, and cookie management. It provides a state object that your UI can simply listen to.
Best for: Apps where you want to own the UI (Vue, Angular, Vanilla JS) but don't want to write your own filtering or pagination logic. Best paired with the @athoscommerce/snap-preact package.
3. The UI Layer: Snap Preact/React
@athoscommerce/snap-preact
This is our most powerful abstraction. It combines the Client and Controller with a library of Preact components. It allows you to build a full e-commerce search and recommendation experience with minimal boilerplate while maintaining the flexibility to swap out any component with custom markup.
Best for: Fast, high-performance storefront integrations where Athos handles the heavy lifting of the UI.
🏃♀️Accelerating Your API Integration
If you are building with our APIs, you can save significant development time by using parts of the Snap SDK. Snap is modular, allowing you to choose how much logic you want to adopt.
Which one should I use?
| Your Current Goal | Recommended Package | Why? |
|---|---|---|
| "I just want the raw JSON data." | Snap Client | Skip the boilerplate. You get a typed, pre-configured fetcher with built-in caching and retry logic optimized for our endpoints. |
| "I need to manage filters and state." | Snap Controller | It manages pagination, facet toggling, and syncing state to the URL so you don't have to build a custom state machine. |
| "I want a full, ready-to-go search UI." | Snap Preact | The fastest path. Use our pre-built, high-performance components that are already wired into the Client and Controller. |
Note To explore if our Snap packages work with your API build we recommend reaching out to your designated Athos Commerce representative. You can also read more about Snap on our official Snap documentation site
Get Started
- Check out our Snap Docs: Check out our full documented Snap Library!
- Explore the Code: Snap GitHub Repository
- Contribute: We welcome issues and PRs! Please see our Contribution Guidelines.
Updated 27 days ago