For anyone who has been waiting for a stable release to dive into Catalyst: get excited! Our engineering team has been hard at work, and Catalyst is officially stable!  

What does this mean for you? With a suite of powerful updates and features, Catalyst is now production-ready and built to streamline your storefront development experience.

From visual editing to faster theming and better performance, Catalyst 1.0 offers a polished, intuitive experience that makes building powerful, beautiful storefronts easier than ever before. Catalyst was built with world class Developer Experience as a North Star, and we’re sure you’ll notice! 

 If you want to get started right now, head over to the Catalyst Github repo!

What’s New in Catalyst 1.0?

Below are some of the key features we’re thrilled are part of this stable release of Catalyst.

🚀 Seamless Visual Building with Makeswift

Catalyst 1.0 delivers deep integration with Makeswift. Now, the intuitive visual editor is available fully embedded in the framework. This is available two ways: 

• A first party integration that you’ll find in the `integrations/makeswift` branch of the Catalyst repository

• The One-Click Catalyst flow available via your BigCommerce Control Panel

Developers can now collaborate more closely with marketers and designers, enabling seamless page building and editing across key storefront pages right out of the box. 

Check out the docs here 👉 Getting Started with Catalyst documentation

🚀 VIBES Design System & Soul VIBE

At the heart of Catalyst 1.0 is the Soul VIBE, the first VIBE from the VIBES UI framework purposefully designed for ecommerce and Catalyst. It offers a great starting point for any storefront, with carefully considered UI elements that make customization both powerful and beautiful.

Catalyst uses the Electric variation of the Soul VIBE by default but can be customized to match your needs. The VIBES site showcases two others as well, Warm and Luxury

Check out the docs here 👉Vibes Installation documentation 

🚀 Enhanced Theming with Tailwind & CSS Variables

Creating a unique brand feel is now easier than ever with enhanced theming support using Tailwind CSS and CSS Variables. Developers gain the flexibility to adapt styles on the fly, offering a smoother experience from concept to customization. Below are a couple examples:

💥 Tailwind

Catalyst is built with Tailwind CSS v3.0 under the hood, but instead of managing color tokens through tailwind.config.js, most style customizations are handled directly via global.css using HSL-formatted CSS variables. 

This approach gives developers a more intuitive and design-system-friendly way to manage theming. You only need to modify the Tailwind config if you’re introducing a new color format or want to extend the default token set.

💥 CSS Variables with Fallbacks 

Want to tweak the look of a specific component like an Alert without wading through a sea of CSS? Catalyst’s use of CSS variables with fallbacks makes this incredibly straightforward.

Let’s say you want to customize the success variant of an Alert:

:root {

  --alert-success-background: hsl(120, 73%, 75%);

}

Because these variables are component-scoped and use fallback logic, you get both flexibility and resilience—your design remains intact even when values aren't explicitly set. This modularity also enables smoother cross-theme transitions and makes rebranding fast and scalable.

🚀 PPR: Partial Prerendering

Catalyst 1.0 implements PPR (Partial Prerendering), a cutting-edge rendering strategy powered by Next.js. This optimization ensures globally distributed, lightning-fast performance that scales effortlessly as your storefront grows.

PPR allows for a hybrid rendering approach, combining static and real-time content for improved page loads and user experience. Sections of a page that remain largely consistent can be statically rendered, while dynamic data, such as real-time product pricing, can be streamed in independently. This ensures that information requiring up-to-the-minute accuracy is always current, even when the page layout is cached.

Check out the docs here 👉Partial Prerendering Documentation 

🚀 Wishlist Support Out of the Box

Catalyst now fully supports wishlist functionality, giving you an easy way to implement one of our most requested features. 

Check out the docs here 👉 Wishlist Documentation

🚀 Improved Localization & Multi-Language Support

Catalyst 1.0 brings robust localization tools, supporting single-site multi-language experiences and enabling your storefronts to better connect with global audiences.

Check out the docs here 👉 Catalyst Multi-language Overview 

🚀 Stronger Functional Test Suite

A polished and comprehensive functional test suite is essential for ensuring reliability throughout your development workflow. By integrating the ability to run tests directly against your own products, you gain unparalleled accuracy and relevance in your testing process. Our suite now includes ready-to-use fixtures that simplify complex tasks like creating customers and orders, significantly reducing setup time and minimizing errors.

Additionally, we have introduced a read-only test mode, allowing you to safely run tests without making any changes or updates to your live site. This feature provides peace of mind by protecting your production environment while still validating critical functionality.

Together, these enhancements lead to fewer bugs, increased confidence in your releases, and faster, smoother deployments—empowering your team to deliver high-quality software with ease.

🚀 Improved Versioning & Upgrade Guidance

As of Catalyst v1.0.0, we are now including migration guides along with each PR merged into the canary and integrations/makeswift branches of the Catalyst repository, to make merge conflicts easier to reason about. Migration guides, when relevant, can be found in both the .changeset/*.md file associated with the commit (example), as well as the PR description that introduced the commit (example).

Additionally, we have documented the steps that we follow whenever we need to pull in updates from canary into integrations/makeswift. While these steps primarily serve as documentation on how to update the Makeswift integration branch, you may find it helpful to follow those same steps whenever you need to update your own custom Catalyst fork! You’ll likely need to modify some of the steps, depending on how you have configured your branch names and remote Git references. Details and examples can be found on the Catalyst documentation website.

Of course, the exact workflow varies widely depending on how you’ve configured your own local Catalyst Git project, so don’t hesitate to open a GitHub discussion if you get stuck!

Finally, we have changed the default development branch on the upstream Catalyst repository from main to canary; we did this because the canary branch contains the latest code in development, and therefore the most recent commit in canary is not guaranteed to be stable. Always be sure to refer to the most recently published release when looking for stable code.

Check out the docs here 👉 Pulling in Updates Overview 

🚀 Removed Dependency on BigCommerces Admin API

We replaced the Catalyst API client’s fetchShippingZones REST API method with the newly released Storefront GraphQL field equivalent, SupportedShippingDestinations, removing any dependency on the BIGCOMMERCE_ACCESS_TOKEN environment variable! For details, check out the PR that introduced this change.

🚀 Analytics Improvements

We’ve streamlined the implementation of BODL (Big Open Data Layer) within Catalyst to deliver a more efficient and extensible analytics experience. Previously, our analytics flow required loading multiple providers just to trigger events for Google Analytics—the only supported analytics provider at the time. The process looked like this: an Analytics Provider would load BODL via a script, which then relied on window events to load in and communicate with Google Analytics. With our refactor, Catalyst now loads a single, generic analytics provider. We’ve introduced exported React hooks that allow you to fire events to any registered analytics provider.

This new architecture makes it easy for both merchants and analytics agencies to add their own analytics providers, simply by adhering to a common interface. Additionally, Catalyst now automatically fetches your Google Analytics ID from the BigCommerce control panel, eliminating the need for manual environment setup. The result is a seamless, end-to-end analytics integration across both the Catalyst storefront and checkout.

Check out the docs here 👉 Big Open Data Layer Documentation

🚦Ready, set, build! 

Catalyst V1 is more than a release—it’s an invitation. Whether you're building your first headless storefront or migrating from a legacy system, this version is designed to give you power, flexibility, and momentum.

As you dive in, we want to hear from you! Please use Issues and Discussions on the Catalyst repo to tell us what you think. 

As of now, you have everything you need to build a Catalyst storefront! Below is a list of resources that will help you get started.

Additional Resources: 

• Catalyst.dev - For the Catalyst Github Repository and documentation

• Makeswift VIBES Documentation for Soul

• Catalyst Changelog - This link includes all releases associated with "Catalyst 1.0". You’ll see the following:

  • Next.js App without integrations → @bigcommerce/catalyst-core

  • Next.js App with Makeswift integration → @bigcommerce/catalyst-makeswift 

  • GraphQL API Client → @bigcommerce/catalyst-client 

  • Catalyst CLI → @bigcommerce/create-catalyst 

  • ESLint config for Catalyst → @bigcommerce/eslint-config-catalyst

Join our Developer Slack Space (specifically the #catalyst and #makeswift channels!)

If you have any questions, send an email to our DevRel team!