Summer Editions ‘24: Announcing the Hydrogen Visual Editor, and a ton of DX improvements

Hydrogen Visual Editor, powered by Utopia

Hydrogen’s focus has always been to help you build the best headless storefronts in half the time, by nailing the details on the things you hate doing, so you can focus on what you love.

This Editions, we’re excited to announce the next major frontier to the Hydrogen toolkit — the Hydrogen Visual Editor.

Powered by Utopia, an open source platform that’s now at Shopify, we’re laying the foundation for the future of collaboration with Hydrogen.

We’re building a space for your entire team to come together, with a WYSIWYG editor that lets you directly manipulate every part of your storefront in real time — whether that’s reordering sections on a template, editing content, tweaking small details like border radius on a button, or just leaving comments for your team.

All without breaking your existing workflows.

The Hydrogen Visual Editor keeps your code as the source of truth — so any edits to components get pushed back to PRs on Github for you to review, and changes you do locally in tools like VS Code can get pulled in and edited visually. We’re building a direct integration with Shopify’s APIs so your edits can be saved and synced back to Shopify, and you can integrate third party content sources too.

We will keep you posted as we make progress towards early access, in the meantime check out the demo.

DX Improvements

Optimistic Cart

The new optimistic cart functionality improves customer experience by instantly reflecting changes in the cart. This feature enhances the perceived performance and responsiveness of shopping cart interactions, by incorporating an optimistic UI.

Vite

Vite support in Hydrogen is now stable. This integration enhances your development experience by providing faster hot module reloading and access to a vast ecosystem of plugins, which can dramatically speed up local development and increase productivity.

Shopify Analytics Integration

Implementing analytics with Hydrogen is now simpler and more robust, thanks to built-in support for Shopify’s Customer Privacy API and minimal configuration. It’s easier than ever to set up and gather valuable insights from your customer interactions. Check out the new consent tracking and analytics tutorials in the docs.

Environment Variable Management

Managing environment variables is now more straightforward with the ability to bulk upload directly from your local setup through the Hydrogen CLI. This feature simplifies the process, making it faster and more efficient to manage configurations across different environments.

Deploy Comments on GitHub

To improve collaboration and transparency within development teams, we've enabled automatic deployment comments on GitHub. This feature ensures that every team member stays updated with the latest deployment details directly within the context of your PRs.

Simple and flexible SEO tooling

We've overhauled SEO capabilities to allow for more customized and effective search engine optimization strategies. Hydrogen's new SEO approach uses Remix meta exports directly.

export const meta = ({data}) => {
  return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
};      

Full Page Caching with Oxygen

You now have the ability to cache full-page content for static pages like blog posts or about pages, serving up content in mere milliseconds!

return json(
  data,
  {
    headers: {
      'Oxygen-Cache-Control': 'public, max-age=3600, s-maxage=7200',
      Vary: 'Accept-Encoding, Accept-Language',
    },
  },
);

Customer Account API Tooling

Hydrogen now includes a built-in client for interacting with Shopify's Customer Account API, enhancing the customer experience across various platforms. To facilitate development, we've introduced automatic SSL tunneling in the Hydrogen CLI, currently available as an unstable preview. This feature ensures secure connections and seamless integration with Shopify's systems.

Oxygen Redeploys

Updating your Hydrogen applications has become more convenient with the ability to trigger redeployments directly through the Shopify admin. This feature is particularly useful for updating environment variables, reducing the need for manual redeployments.

B2B Support

We've expanded our support for Shopify Plus merchants by enabling B2B functionalities. Now, you can set customer-specific catalogs, payment terms, and currencies, providing a tailored shopping experience for business customers.

RichText Component

The introduction of the RichText component simplifies the rendering of Rich Text metafields into HTML. This component provides full control over the markup, allowing seamless integration with your existing design system and ensuring that your content is displayed precisely as intended.

That’s it for our Editions recap — see you in July!