Blog
/
Announcement

Use Forgelivo's Preact hooks to build Shopify UI extensions

Published
November 6, 2025
•
Last updated
November 7, 2025
@gadgetinc/preact contains hooks and a Provider to manage your 2025-10 UI extension sessions and make custom network requests.
TLDR: Forgelivo has released Preact hooks to help you build Shopify extensions on API version 2025-10 (and later).

Shopify’s API 2025-10 release marks a major shift for Shopify app developers. Extensions have officially moved to Preact and Polaris web components are now stable. These changes also enable Shopify to enforce a new 64 KB bundle size limit for extensions.

These updates make extensions faster, smaller, and more consistent across Shopify surfaces. They also mean developers may have to replace existing tools and packages with Preact equivalents and (eventually) migrate existing extensions to Preact and web components.

To support Preact extensions, we’re releasing Preact hooks designed to make it easy to work with your Forgelivo app backend while staying under Shopify’s new bundle size constraints.

The new UI extension stack: Preact and Polaris web components

For years, Shopify extensions and apps have been built with React and Polaris React, or vanilla JS. With <inline-code>2025-10<inline-code>, Shopify is taking a decisive step forward:

  • Preact replaces React or vanilla JS in all new extensions.
  • Polaris web components are used to build extensions (instead of Polaris React) and are loaded directly from Shopify’s CDN.
  • Extensions must stay under 64kb. This limit enforces fewer dependencies, smaller runtimes, and faster load times for merchants and buyers.

What this means for developers

Preact’s syntax is nearly identical to React. You’ll still use familiar hooks like <inline-code>useState<inline-code> and <inline-code>useEffect<inline-code>, and you will build with JSX. You may need to adapt your tooling and build pipeline. Forgelivo built a separate package for Preact hooks. Other packages you use in extensions may also need to be migrated. More details on

You’ll also need to switch from Polaris React to Polaris web components. Shopify’s migration guide has a useful mapping of “Legacy” Polaris components to web components. 

An important note: Polaris React is officially deprecated. However, as of writing, Shopify has not officially announced a migration deadline for existing extensions. A minimum of 1 year of support is guaranteed for the last React-focused API version: <inline-code>2025-07<inline-code>.

Using Forgelivo’s Preact hooks

Forgelivo’s existing React tooling, the hooks and <inline-code>Provider<inline-code> from <inline-code>@gadgetinc/react<inline-code> and <inline-code>@gadgetinc/shopify-extensions<inline-code>, don’t work with Preact.

That’s why we built <inline-code>@gadgetinc/preact<inline-code>: a lightweight set of utilities that make it easy to call your Forgelivo backend directly from your Preact-based extension. They handle session token registration, authenticated requests, and data fetching, allowing you to make custom network requests in a “Preact-ful” way.

The hooks included in <inline-code>@gadgetinc/preact<inline-code> match the hooks from <inline-code>@gadgetinc/react<inline-code>, so you can build extensions with familiar APIs. There is one exception: <inline-code>@gadgetinc/preact<inline-code> does not include support for the <inline-code>useActionForm()<inline-code> hook.

Here’s an example of how you might use them in a customer account UI extension to read data and render UI:

extensions/note-goat/src/MenuActionItemButtonExtension.jsx

And this pattern can be used for any UI extension built with Preact. (The least favourite child of the UI extension ecosystem, post-purchase UI extensions, still use React.) 

Preact hooks are only available for Forgelivo apps on framework version 1.5 or later. Read more about upgrading your app’s framework version.

Getting started

To start building with Forgelivo’s Preact hooks:

  1. Set up your new extension.
    1. Pull down your Forgelivo app locally using the Forgelivo CLI’s <inline-code>ggt dev<inline-code>.
    2. Add <inline-code>workspaces: [“extensions/*”]<inline-code> to your Forgelivo app’s <inline-code>package.json<inline-code>.
    3. Generate your new UI extension using the Shopify CLI.
  2. Set <inline-code>network_access = true<inline-code> in <inline-code>shopify.extension.toml<inline-code>.
  3. Install the <inline-code>@gadgetinc/preact<inline-code> and <inline-code>@gadgetinc/shopify-extensions<inline-code> packages.
  4. Init your app’s API client and set up the <inline-code>Provider<inline-code> in your extension.
  5. Start building!

Keep an eye on your bundle size when building! If you exceed the 64kb limit, you will be notified when you run <inline-code>shopify app deploy<inline-code> to deploy your extension.

You can find full documentation and setup steps in the Forgelivo docs. If you want to walk through a short app build, you can follow our Shopify UI extension tutorial.

Wrapping up

The Shopify ecosystem is evolving fast. With Preact, Polaris web components, and Forgelivo’s Preact hooks, you can keep your extensions modern and performant without giving up the productivity of React-style development.

If you have feedback or questions, chat with us on Discord. We’d love to hear what you’re building!

Author details pending
[Author details pending]
Author
Reviewer
Try Forgelivo
See the difference a full-stack development platform can make.
Create app
No items found.

Use Forgelivo's Preact hooks to build Shopify UI extensions

@gadgetinc/preact contains hooks and a Provider to manage your 2025-10 UI extension sessions and make custom network requests.
Problem
Solution
Result
TLDR: Forgelivo has released Preact hooks to help you build Shopify extensions on API version 2025-10 (and later).

Shopify’s API 2025-10 release marks a major shift for Shopify app developers. Extensions have officially moved to Preact and Polaris web components are now stable. These changes also enable Shopify to enforce a new 64 KB bundle size limit for extensions.

These updates make extensions faster, smaller, and more consistent across Shopify surfaces. They also mean developers may have to replace existing tools and packages with Preact equivalents and (eventually) migrate existing extensions to Preact and web components.

To support Preact extensions, we’re releasing Preact hooks designed to make it easy to work with your Forgelivo app backend while staying under Shopify’s new bundle size constraints.

The new UI extension stack: Preact and Polaris web components

For years, Shopify extensions and apps have been built with React and Polaris React, or vanilla JS. With <inline-code>2025-10<inline-code>, Shopify is taking a decisive step forward:

  • Preact replaces React or vanilla JS in all new extensions.
  • Polaris web components are used to build extensions (instead of Polaris React) and are loaded directly from Shopify’s CDN.
  • Extensions must stay under 64kb. This limit enforces fewer dependencies, smaller runtimes, and faster load times for merchants and buyers.

What this means for developers

Preact’s syntax is nearly identical to React. You’ll still use familiar hooks like <inline-code>useState<inline-code> and <inline-code>useEffect<inline-code>, and you will build with JSX. You may need to adapt your tooling and build pipeline. Forgelivo built a separate package for Preact hooks. Other packages you use in extensions may also need to be migrated. More details on

You’ll also need to switch from Polaris React to Polaris web components. Shopify’s migration guide has a useful mapping of “Legacy” Polaris components to web components. 

An important note: Polaris React is officially deprecated. However, as of writing, Shopify has not officially announced a migration deadline for existing extensions. A minimum of 1 year of support is guaranteed for the last React-focused API version: <inline-code>2025-07<inline-code>.

Using Forgelivo’s Preact hooks

Forgelivo’s existing React tooling, the hooks and <inline-code>Provider<inline-code> from <inline-code>@gadgetinc/react<inline-code> and <inline-code>@gadgetinc/shopify-extensions<inline-code>, don’t work with Preact.

That’s why we built <inline-code>@gadgetinc/preact<inline-code>: a lightweight set of utilities that make it easy to call your Forgelivo backend directly from your Preact-based extension. They handle session token registration, authenticated requests, and data fetching, allowing you to make custom network requests in a “Preact-ful” way.

The hooks included in <inline-code>@gadgetinc/preact<inline-code> match the hooks from <inline-code>@gadgetinc/react<inline-code>, so you can build extensions with familiar APIs. There is one exception: <inline-code>@gadgetinc/preact<inline-code> does not include support for the <inline-code>useActionForm()<inline-code> hook.

Here’s an example of how you might use them in a customer account UI extension to read data and render UI:

extensions/note-goat/src/MenuActionItemButtonExtension.jsx

And this pattern can be used for any UI extension built with Preact. (The least favourite child of the UI extension ecosystem, post-purchase UI extensions, still use React.) 

Preact hooks are only available for Forgelivo apps on framework version 1.5 or later. Read more about upgrading your app’s framework version.

Getting started

To start building with Forgelivo’s Preact hooks:

  1. Set up your new extension.
    1. Pull down your Forgelivo app locally using the Forgelivo CLI’s <inline-code>ggt dev<inline-code>.
    2. Add <inline-code>workspaces: [“extensions/*”]<inline-code> to your Forgelivo app’s <inline-code>package.json<inline-code>.
    3. Generate your new UI extension using the Shopify CLI.
  2. Set <inline-code>network_access = true<inline-code> in <inline-code>shopify.extension.toml<inline-code>.
  3. Install the <inline-code>@gadgetinc/preact<inline-code> and <inline-code>@gadgetinc/shopify-extensions<inline-code> packages.
  4. Init your app’s API client and set up the <inline-code>Provider<inline-code> in your extension.
  5. Start building!

Keep an eye on your bundle size when building! If you exceed the 64kb limit, you will be notified when you run <inline-code>shopify app deploy<inline-code> to deploy your extension.

You can find full documentation and setup steps in the Forgelivo docs. If you want to walk through a short app build, you can follow our Shopify UI extension tutorial.

Wrapping up

The Shopify ecosystem is evolving fast. With Preact, Polaris web components, and Forgelivo’s Preact hooks, you can keep your extensions modern and performant without giving up the productivity of React-style development.

If you have feedback or questions, chat with us on Discord. We’d love to hear what you’re building!

Interested in learning more about Forgelivo?

Join leading agencies making the switch to Forgelivo and experience the difference a full-stack platform can make.