---
title: App Bridge
description: |-
App Bridge is the JavaScript SDK for [Embedded Apps](/docs/apps/admin/embedded-app-home), providing access to data and UI rendering within the Shopify Admin. App Bridge integrates directly into standard Web Platform APIs you're already familiar with, making it easy to build and maintain performant apps on the Shopify platform.
For more information about the motivation behind App Bridge, refer to [Shopify's platform is the Web platform](https://shopify.engineering/shopifys-platform-is-the-web-platform).
api_name: app-bridge-library
source_url:
html: https://shopify.dev/docs/api/app-bridge-library?utm_channel=W24-editions-website
md: https://shopify.dev/docs/api/app-bridge-library.md?utm_channel=W24-editions-website
---
# App Bridge
App Bridge is the JavaScript SDK for [Embedded Apps](https://shopify.dev/docs/apps/admin/embedded-app-home), providing access to data and UI rendering within the Shopify Admin. App Bridge integrates directly into standard Web Platform APIs you're already familiar with, making it easy to build and maintain performant apps on the Shopify platform.
For more information about the motivation behind App Bridge, refer to [Shopify's platform is the Web platform](https://shopify.engineering/shopifys-platform-is-the-web-platform).
***
## Getting started
If you created your app using the [Shopify Remix App template](https://github.com/Shopify/shopify-app-template-remix), then your app is already set up with App Bridge. If not, you can add App Bridge to your app by including the `app-bridge.js` script tag and your `apiKey` as seen in the example.
The `app-bridge.js` script loads directly from Shopify and automatically keeps itself up-to-date so you can start building right away.
### Examples
* #### Setup
##### CDN-hosted
```html
```
## Your first API call
The following example uses [`Resource Picker`](https://shopify.dev/docs/api/app-bridge-library/apis/resource-picker) to open a UI component that enables users to browse, find, and select products from their store using a familiar experiences.
### Examples
* #### Resource Picker
##### Default
```html
```
## React
Shopify App Bridge provides a companion npm library for React components and hooks, available at [`@shopify/app-bridge-react`](https://www.npmjs.com/package/@shopify/app-bridge-react).
For more information about the React library, see the documentation on [React components](https://shopify.dev/docs/api/app-bridge-library/react-components) and [React hooks](https://shopify.dev/docs/api/app-bridge-library/react-hooks).
### Examples
* #### Installation
##### npm
```shell
npm install @shopify/app-bridge-react
```
##### yarn
```shell
yarn add @shopify/app-bridge-react
```
## TypeScript
Shopify App Bridge provides a companion npm library for TypeScript types, available at [`@shopify/app-bridge-types`](https://www.npmjs.com/package/@shopify/app-bridge-types).
If you're using the [React library](https://shopify.dev/docs/api/app-bridge-library#react), then the types package is already included.
Installation
The `@shopify/app-bridge-types` package can be installed using `yarn` or `npm`.
Configuration
Adding the `@shopify/app-bridge-types` package to your `tsconfig.json` file will enable type checking for all files in your project.
### Examples
* #### Installation
##### npm
```shell
npm install --save-dev @shopify/app-bridge-types
```
##### yarn
```shell
yarn add --dev @shopify/app-bridge-types
```
## Global variable
After App Bridge is set up in your app, you have access to the `shopify` global variable. This variable exposes various App Bridge functionalities, such as [displaying toast notifications](https://shopify.dev/docs/api/app-bridge-library/apis/toast) or [retrieving app configuration details](https://shopify.dev/docs/api/app-bridge-library/apis/config).
To explore all the functionality available on the `shopify` global variable:
1. Open the Chrome developer console while in the Shopify admin.
2. Switch the frame context to your app's `iframe`.
3. Enter `shopify` in the console.
## Direct API access
You can make requests to the Admin API directly from your app using the standard [web `fetch` API](https://developer.mozilla.org/en-US/docs/Web/API/fetch)!
Any `fetch()` calls from your app to Shopify's Admin GraphQL API are automatically authenticated by default. These calls are fast too, because Shopify handles requests directly.
Direct API access is disabled by default. It can be [enabled](https://shopify.dev/docs/apps/tools/cli/configuration#admin) in your app TOML file, along with whether you want to use direct API access with [online access](https://shopify.dev/docs/apps/auth/oauth/access-modes#online-access) or [offline access](https://shopify.dev/docs/apps/auth/oauth/access-modes#offline-access) mode.
[](https://shopify.dev/docs/apps/tools/cli/configuration)
[Learn more about API access modesConfiguration guide](https://shopify.dev/docs/apps/tools/cli/configuration)
### Examples
* #### Query Shopify data
##### Use specific GraphQL API version
```js
const res = await fetch('shopify:admin/api/2025-04/graphql.json', {
method: 'POST',
body: JSON.stringify({
query: `
query GetProduct($id: ID!) {
product(id: $id) {
title
}
}
`,
variables: {id: 'gid://shopify/Product/1234567890'},
}),
});
const {data} = await res.json();
console.log(data);
```
## Next steps
Now that you've initialized your app, you can use any [Shopify App Bridge features](https://shopify.dev/docs/api/app-bridge-library/apis).
Support
If you need help using Shopify App Bridge, please visit our [API & SDK forum](https://community.shopify.com/c/shopify-apis-and-sdks/bd-p/shopify-apis-and-technology?shpxid=6f68a110-2319-4947-FFF2-CDCEF85022D4). It is the best place to discuss libraries and get support. If you have a specific bug report or feature request for App Bridge, please visit the [App Bridge issue tracker on GitHub](https://github.com/Shopify/shopify-app-bridge/issues).
## Resources
[](https://polaris.shopify.com/)
[Polaris](https://polaris.shopify.com/)
[Use Polaris to create a familiar and consistent user experience.](https://polaris.shopify.com/)
[](https://shopify.dev/docs/apps/design-guidelines)
[App Design Guidelines](https://shopify.dev/docs/apps/design-guidelines)
[Follow our UX guidelines when you're designing your app to ensure that they're predictable and easy to use.](https://shopify.dev/docs/apps/design-guidelines)
[](https://community.shopify.com/c/shopify-cli-and-tools/bd-p/tools)
[Shopify CLI and Tools forum](https://community.shopify.com/c/shopify-cli-and-tools/bd-p/tools)
[Visit our Shopify CLI and Tools forum if you need help using Shopify App Bridge.](https://community.shopify.com/c/shopify-cli-and-tools/bd-p/tools)