Skip to content


Repository files navigation


Chat on Discord Build Status Maintainability Test Coverage experimental

Table of contents

What is Daffodil?

In general, Daffodil is a frontend Ecommerce framework that allows developers to build complex Ecommerce stores.

Specifically, Daffodil is a frontend toolkit that accomplishes three things:

  1. Improve developer workflow when writing frontend software for Ecommerce stores.
  2. Provide a consistent frontend developer tool-chain regardless of a business's chosen ecommerce platform.
  3. Drastically improve the end-user experience of online-shopping.

What are Daffodil's features?

Daffodil's features include the following:

  • 🆓 Forever Free, Open Source, and MIT Licensed
  • 🔨 Platform Agnostic Drivers for your platform of choice
    • Shopify
    • Magento 2
    • In-Memory Backend
      • Prebuilt
      • ⚡ Great for lightning fast iteration and concepting
  • 🍰 Decoupled and Composable Packages for your use case
    • Product
    • Cart
    • Checkout
  • 📚 Well Documented
    • Example Implementation
    • API References
    • Tutorials
  • 💡 Component Kit
    • Purely Functional
    • Themeable
    • Accessible
    • Supports Server-side Rendering
    • Well Tested
    • Fantastic Performance
    • IE 11+ Support

What do I need before I start using Daffodil?

Daffodil was developed so you can get started without connecting to a platform. Because of its driver-like nature, all you need is the following:

  1. Node.js v18+
  2. npm
  3. An Angular 17 project

How do I start using Daffodil?

After installing the prerequisites, you can choose the packages that you want and get started using Daffodil with your new or existing Ecommerce store.

Who uses Daffodil and why?

The target devopers for Daffodil include, but are not limited to, the following:

  1. Developers who want to explore and experiment with Progressive Web Apps (PWAs).
  2. Developers who are comfortable with Angular and are interested in job opportunities in Ecommerce.
  3. Developers who work with businesses that have existing websites but want a better user interface and experience.
  4. Developers who are forward-thinking, have gone through a re-platforming, and want to deflect future re-platforming.

What packages do I use?

For a basic Ecommerce site, you need all of the most commonly used packages (common packages), which are the following:

Note: Both the core and driver packages are dependencies for most other packages. Developers do not interact with these packages directly.

Referring to the aforementioned use cases, here are some lists and explanations of recommended Daffodil packages.

1. To explore and experiment with PWAs

If you don't have a project in mind and want to see something in Daffodil working, then use:

2. To expand Ecommerce opportunities

If you want to expand your portfolio for more Ecommerce opportunities, then use the common packages and optionally include:

You won't need to use more than the aforementioned common packages(#pwapackages) until you have a specific business use or requirement. However, if you are design-focused, then you can either use your own design framework or use the design package.

3. To improve the user experience for existing business sites

If you have an existing site, either your own or backed by a business, then there are a few working assumptions about the site: it has SEO and specific URLs, and the product pages need to show lists of related products. So, in addition to the common packages, you may need the following packages:

4. To prevent future re-platforming

If you want to prevent future re-platforming of your Ecommerce site, there are a few assumed advanced requirements. For example, the business has complex product configurations and has marketing email campaigns. So, in addition to the common packages and the packages for improving user experiences, you may also need the following packages:


Below is a table of currently available Daffodil packages.

Project Package Version Stability @daffodil/authorizenet latest experimental
Cart @daffodil/cart latest experimental
Category @daffodil/category latest experimental
Checkout @daffodil/checkout latest experimental
Contact @daffodil/contact latest experimental
Core @daffodil/core latest experimental
Design @daffodil/design latest experimental
Driver @daffodil/driver latest experimental
External Router @daffodil/external-router latest experimental
Geography @daffodil/geography latest experimental
Newsletter @daffodil/newsletter latest experimental
Paypal @daffodil/paypal latest experimental
Product @daffodil/product latest experimental
Composite Product @daffodil/product-composite latest experimental
Configurable Product @daffodil/product-configurable latest experimental
SEO @daffodil/seo latest experimental

Note: About the checkout package, it is currently a legacy package; there is no reason to use it. However, the checkout package eventually may be filled with extracts from the cart and order packages.