Daffodil is a framework built on Angular that allows you to build complex Ecommerce store frontends and connect to any backend. More than just a UI library, Daffodil provides a complete architectural solution for the frontend of headless ecommerce that scales from startup MVPs to enterprise-level storefronts handling millions of transactions.
Imagine if you could swap your storefront from Magento to Shopify, or Shopify to Magento, or Medusa to Magento, or Salesforce to Medusa, or FakeAPI to Magento in a single line of code?
Stop imagining: Interactive driver swapping demo
Daffodil enables you to swap entire (or partial) ecommerce features to another platform simply by changing a few lines of code:
For example, you could be on Magento:
import { ApplicationConfig } from '@angular/core';
import { provideMagentoDriver } from '@daffodil/driver/magento';
import { provideDaffProductMagentoDriver } from '@daffodil/product/driver/magento';
export const appConfig: ApplicationConfig = {
providers: [
provideMagentoDriver(config),
provideDaffProductMagentoDriver(),
]
};
and switch over to Shopify with just two lines of code:
import { ApplicationConfig } from '@angular/core';
import { provideMagentoDriver } from '@daffodil/driver/magento';
import { provideDaffProductMagentoDriver } from '@daffodil/product/driver/shopify';
export const appConfig: ApplicationConfig = {
providers: [
provideShopifyDriver(config),
provideDaffProductShopifyDriver(),
]
};
Daffodil is built with flexibility and scalability in mind. Here are the key features that make it special:
Drivers are Daffodil's lifeblood - they enable integration with any ecommerce backend through a consistent interface. Whether you're using Magento, Shopify, or a custom API, drivers abstract away platform differences so your application code stays the same.
Key benefits:
For many use-cases, interacting with an arbitrary ecommerce platform looks something like:
// Same service interface works with any platform
constructor(
@Inject(DaffProductDriver) private productDriver: DaffProductServiceInterface
) {}
// Works with Magento, Shopify, or any custom implementation
this.productDriver.get(productId).subscribe(product => {
// Handle product data consistently
});
Building trust is crucial in ecommerce. Daffodil's Design Library provides a comprehensive component library built specifically for ecommerce experiences. Every component is tested for accessibility, responsive design, and conversion optimization.
Daffodil's architecture is based on interoperable packages that work either independently or together. Pick exactly the features you need (no package bloat):
Daffodil is MIT licensed and community focused. Daffodil wouldn't be possible without our many open source contributions.
We believe in:
Whether you're fixing bugs, adding features, or improving documentation, contributions are welcomed: