DEV Community: windwhirl

Integrating SvelteCommerce with MedusaJS Using the Medusa Connector

windwhirl — Wed, 29 Jul 2026 13:38:07 +0000

One of the core goals behind SvelteCommerce has always been to keep the storefront independent of the ecommerce backend.

Rather than coupling the frontend directly to a specific commerce platform, SvelteCommerce uses a connector-based architecture. Every supported backend implements the same commerce interface, allowing the storefront to remain unchanged while different commerce engines can be plugged in as needed.

Recently, I added support for MedusaJS by building a dedicated Medusa Connector.

In this article, I'll walk through the architecture, explain how the integration works, and show how to connect MedusaJS to SvelteCommerce.

What is SvelteCommerce?

SvelteCommerce is an open-source ecommerce storefront built with SvelteKit.

GitHub:

https://github.com/itswadesh/svelte-commerce

Some of its features include:

Server-Side Rendering (SSR)
SEO-friendly architecture
Responsive storefront
Shopping cart and checkout
Customer authentication
Product and collection pages
Backend-agnostic architecture
Production-ready codebase

SvelteCommerce currently supports multiple commerce platforms through connectors, including:

MedusaJS
Vendure
Shopify
WooCommerce
Litekart

Why Build a Medusa Connector?

MedusaJS is one of the most popular open-source headless commerce platforms available today. It provides everything needed to power an ecommerce backend, including:

Products
Collections
Customers
Carts
Orders
Inventory
Regions
Payments
Store APIs

Rather than making SvelteCommerce communicate directly with Medusa's APIs, all commerce requests flow through KitCommerce Core, which provides a standardized commerce interface.

The Medusa Connector translates that common interface into Medusa Store API requests.

This keeps the storefront completely independent of backend implementation details.

Architecture

                    ┌──────────────────────────┐
                    │      SvelteCommerce      │
                    │ (SvelteKit Storefront)   │
                    └─────────────┬────────────┘
                                  │
                                  ▼
                    ┌──────────────────────────┐
                    │    KitCommerce Core      │
                    │ Commerce Abstraction     │
                    └─────────────┬────────────┘
                                  │
                                  ▼
                    ┌──────────────────────────┐
                    │     Medusa Connector     │
                    │ Maps Core ↔ Medusa APIs  │
                    └─────────────┬────────────┘
                                  │
                                  ▼
                    ┌──────────────────────────┐
                    │        MedusaJS          │
                    │       Store APIs         │
                    └──────────────────────────┘

Every request follows the same path:

SvelteCommerce
      ↓
KitCommerce Core
      ↓
Medusa Connector
      ↓
Medusa Store APIs

This architecture allows the frontend to stay completely backend agnostic.

How It Works

Whenever a customer interacts with the storefront:

SvelteCommerce sends a commerce request.
KitCommerce Core receives the request.
The Medusa Connector translates the request into Medusa Store API calls.
Medusa processes the request and returns the response.
The connector maps the response into the common commerce model.
SvelteCommerce renders the result.

Because all backend-specific logic lives inside the connector, the storefront never depends on Medusa directly.

Getting Started

Step 1 — Install MedusaJS

Create a MedusaJS backend and complete the initial setup.

Make sure the backend is running and the Admin Dashboard is accessible.

Step 2 — Install the Medusa Connector

Install the Medusa Connector package.

Repository:

https://github.com/misiki-in/medusa-connector

The connector is responsible for translating commerce operations between KitCommerce Core and Medusa.

Step 3 — Register the Connector

Import and register the Medusa Connector inside KitCommerce Core Services.

Once registered, all storefront operations—including products, collections, customer authentication, carts, and checkout—are automatically routed through the connector.

Step 4 — Get Your Medusa Configuration

From your Medusa backend, you'll need the following values:

MEDUSA_API_URL
PUBLISHABLE_API_KEY
REGION_ID

These allow SvelteCommerce to communicate securely with your Medusa Store APIs.

Step 5 — Configure SvelteCommerce

Add the following environment variables:

MEDUSA_API_URL="http://localhost:9000"
PUBLISHABLE_API_KEY="pk_xxxxxxxxxxxxxxxxx"
REGION_ID="reg_xxxxxxxxxxxxxxxxx"

Once configured, SvelteCommerce is ready to communicate with Medusa.

Step 6 — Build and Run

Build the project and start the application.

Your storefront will now retrieve products, collections, customers, carts, and orders directly from Medusa through the connector.

Why This Architecture?

One of the biggest advantages of using connectors is that the storefront doesn't have to change when switching ecommerce platforms.

Backend Agnostic

Only the connector changes.

The storefront remains exactly the same.

Reusable Frontend

The same SvelteCommerce application can work with multiple commerce platforms by simply replacing the connector.

Easier Maintenance

Commerce logic stays centralized inside KitCommerce Core, while backend-specific implementations remain isolated inside connector packages.

Better Developer Experience

Developers can continue building with SvelteKit while choosing whichever commerce platform best fits their project.

Open Source

Both projects are open source.

SvelteCommerce

https://github.com/itswadesh/svelte-commerce

Medusa Connector

https://github.com/misiki-in/medusa-connector

Contributions, feature requests, issues, and feedback are always welcome.

Final Thoughts

The connector architecture has made it possible to support multiple commerce platforms without changing the storefront itself.

Adding Medusa support mainly involved implementing API mappings inside the connector while leaving the storefront, routing, SSR, cart, checkout, and authentication untouched.

If you're building a SvelteKit storefront with MedusaJS, I'd love for you to give it a try and share your feedback.

Resources

SvelteCommerce

https://github.com/itswadesh/svelte-commerce

Medusa Connector

https://github.com/misiki-in/medusa-connector

MedusaJS

https://medusajs.com

Building a Vendure Connector for SvelteCommerce

windwhirl — Wed, 29 Jul 2026 13:09:11 +0000

One of the goals behind SvelteCommerce has always been to keep the storefront independent of the ecommerce backend.

Instead of coupling the frontend directly to a specific platform, SvelteCommerce uses a connector-based architecture. Every supported commerce platform implements the same interface, allowing the storefront to remain unchanged while the backend can be swapped.

Recently, I added support for Vendure by building a dedicated connector.

In this article, I'll explain the architecture, why I chose this approach, and how you can integrate Vendure with SvelteCommerce.

What is SvelteCommerce?

SvelteCommerce is an open-source ecommerce storefront built with SvelteKit.

Repository:

https://github.com/itswadesh/svelte-commerce

It includes features such as:

Server-Side Rendering (SSR)
SEO-friendly architecture
Product & Collection pages
Shopping Cart
Checkout
Customer Authentication
Responsive UI
Backend-agnostic connector architecture

Since its initial release, SvelteCommerce has been integrated with:

Litekart
Medusa
Shopify
WooCommerce

Vendure is now the latest supported backend.

Why Connectors?

One problem I've seen with many storefront implementations is that business logic becomes tightly coupled to the backend API.

For example:

Product pages call backend-specific APIs.
Cart logic depends on backend-specific responses.
Checkout flows become tied to one commerce platform.

This makes switching platforms or supporting multiple backends difficult.

Instead, SvelteCommerce uses KitCommerce Core as a common abstraction layer.

The storefront communicates only with KitCommerce Core, while connectors translate those requests into backend-specific API calls.

Architecture

                    ┌──────────────────────────┐
                    │      SvelteCommerce      │
                    │ (SvelteKit Storefront)   │
                    └─────────────┬────────────┘
                                  │
                                  ▼
                    ┌──────────────────────────┐
                    │    KitCommerce Core      │
                    │ Commerce Abstraction     │
                    └─────────────┬────────────┘
                                  │
                                  ▼
                    ┌──────────────────────────┐
                    │    Vendure Connector     │
                    │ Maps Core ↔ Vendure APIs │
                    └─────────────┬────────────┘
                                  │
                                  ▼
                    ┌──────────────────────────┐
                    │         Vendure          │
                    │ GraphQL Shop/Admin APIs  │
                    └──────────────────────────┘

Every request follows the same path:

SvelteCommerce
        ↓
KitCommerce Core
        ↓
Vendure Connector
        ↓
Vendure GraphQL APIs

The storefront never communicates with Vendure directly.

What Changed to Support Vendure?

The interesting part is what didn't change.

To support Vendure, I mainly had to:

Write GraphQL queries and mutations.
Map Vendure responses into the common commerce model.
Handle authentication and cart operations.
Register the connector within KitCommerce Core.

I didn't have to modify:

SSR
Product pages
Collection pages
Shopping cart UI
Checkout flow
Customer authentication UI
Search and filtering

Those features already worked because they rely on the common commerce interface instead of backend-specific APIs.

Integration Steps

Connecting Vendure with SvelteCommerce is straightforward.

1. Install Vendure

Set up a running Vendure instance.

2. Install the Vendure Connector

Repository:

https://github.com/misiki-in/vendure-connector

The connector acts as the bridge between KitCommerce Core and Vendure.

3. Register the Connector

Import and register the connector inside KitCommerce Core.

Once registered, all commerce operations are automatically routed through Vendure.

4. Generate API Credentials

From the Vendure Admin Dashboard, generate:

API URL
API Key / Authentication Token

5. Configure SvelteCommerce

Add the required environment variables for the connector.

6. Build and Run

Start the application and the storefront will communicate with Vendure through the connector.

Trade-offs

One lesson from supporting multiple commerce platforms is that the common data model tends to become a "lowest common denominator."

Every new backend either fits the existing model or exposes gaps that require expanding it.

In my experience, that's where most of the engineering effort goes—not writing API requests, but designing an abstraction that remains flexible without becoming overly generic.

Source Code

SvelteCommerce

https://github.com/itswadesh/svelte-commerce

Vendure Connector

https://github.com/misiki-in/vendure-connector

Feedback Welcome

The Vendure connector is still new, so I'm looking for feedback from developers using Vendure.

If you try it and find areas where the mapping doesn't align well with the Vendure schema—or you have suggestions for improving the connector architecture—I'd love to hear your thoughts.

Issues, discussions, and pull requests are always welcome.