---
title: @storyblok/js (Version 5.x)
description: @storyblok/js is the official development kit for JavaScript applications.
url: https://storyblok.com/docs/libraries/js/js-sdk
---

# @storyblok/js (Version 5.x)

[@storyblok/js](https://github.com/storyblok/monoblok/tree/main/packages/js) is the official development kit for JavaScript applications. It provides essential functionalities:

-   Fetch content from the Content Delivery API
-   Set up the Storyblok Bridge
-   Connect frontend components with the Visual Editor
-   Render rich text content

> [!TIP]
> Storyblok provides SDKs for [React](/docs/libraries/js/react-sdk), [Astro](/docs/libraries/js/astro-sdk), [Vue](/docs/libraries/js/vue-sdk), [Nuxt](/docs/libraries/js/nuxt-sdk), and [Svelte](/docs/libraries/js/svelte-sdk). These packages are all built on top of `@storyblok/js`. For other JavaScript frameworks, such as Angular or Eleventy, use `@storyblok/js` directly.

## Requirements

-   **Node.js** LTS (version 22.x recommended)
-   **Modern web browser** (the latest versions of Chrome, Edge, Firefox, Safari, etc.)

> [!NOTE]
> This SDK uses the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) under the hood. If your environment doesn’t support it, install a polyfill like isomorphic-fetch. For more information, refer to the [storyblok-js-client documentation](https://github.com/storyblok/monoblok/tree/main/packages/js-client#compatibility).

## Installation

Add the package to a project:

```bash
npm install @storyblok/js@latest
```

## Usage

The following example uses the package to fetch content from the [Content Delivery API](/docs/api/content-delivery/v2), interact with the [Storyblok Bridge](/docs/libraries/js/preview-bridge), and link components with the [Visual Editor](/docs/concepts/visual-editor).

```js
import { storyblokInit, apiPlugin, useStoryblokBridge } from "@storyblok/js";

const { storyblokApi } = storyblokInit({
  accessToken: "YOUR_ACCESS_TOKEN",
  apiOptions: {
    region: "eu",
  },
  use: [apiPlugin],
});

// Fetch content
const { data } = await storyblokApi.get("cdn/stories", {
  version: "draft",
});

// Interact with the Storyblok Bridge
const story = data ? data.story : null;
useStoryblokBridge(story.id, (story) => (state.story = story));

// Link components to the Visual Editor
function init(blok) {
  const editableOptions = storyblokEditable(blok);
  const el = `<div
   data-blok-c="${editableOptions["data-blok-c"]}"
   data-blok-uid="${editableOptions["data-blok-uid"]}"
   class="storyblok__outline">
  <!-- Content <!-- Content -->
 </div>`;
  return el;
}

// Render components
const blok = {}; // Block object received from the Content Delivery API
const elementHTML = init(blok);
document.querySelector(".parent-element").innerHTML = elementHTML;
```

## API

### `storyblokInit`

`storyblokInit()` initializes the Storyblok SDK.

```js
storyblokInit(options);
```

This method accepts an `options` object with the following keys:

| Key | Description | Type |
| --- | --- | --- |
| `accessToken` | The access token for the space. Learn more in the [access tokens concept](/docs/concepts/access-tokens). | `string` |
| `apiOptions` | API options passed to the Storyblok class in [storyblok-js-client](https://github.com/storyblok/monoblok/tree/main/packages/js-client). | `object` |
| `bridge` | Enable or disable the Storyblok Bridge. Enabled by default. Learn more in the [Visual Editor concept](/docs/concepts/visual-editor) and the [@storyblok/preview-bridge reference](/docs/libraries/js/preview-bridge). | `boolean` |
| `use` | An array of plugins. Use the provided `apiPlugin` unless you have a custom implementation. | `array` |
| `bridgeUrl` | The URL of the script that initializes the Storyblok Bridge. Defaults to `https://app.storyblok.com/f/storyblok-v2-latest.js`. | `string` |
| `richText` | **Deprecated and will be removed in a future version**.  <br>Options for rich text rendering. | `object` |

During initialization, `storyblokInit()` invokes all plugins defined in `use` and returns an object that merges the returned value from each plugin. It also loads Storyblok Bridge when enabled.

> [!NOTE]
> To use the built-in API implementation, pass `apiPlugin` as an argument to `use` in `storyblokInit()`. `storyblokInit()` returns `storyblokApi`, which is an instance of the [`storyblok-js-client` package](https://github.com/storyblok/monoblok/tree/main/packages/js-client).

### The region parameter

Use the region key in the `apiOptions` object to match the space’s server location.

The following options are available:

| Value | Description |
| --- | --- |
| `eu` | For spaces created in the EU (default) |
| `us` | For spaces created in the US |
| `ap` | For spaces created in Australia |
| `ca` | For spaces created in Canada |
| `cn` | For spaces created in China |

Learn more in the [spaces manual](/docs/manuals/spaces) and find the region-specific base URLs in the [Content Delivery API documentation](/docs/api/content-delivery/v2).

```js
import { apiPlugin, storyblokInit } from "@storyblok/js";
const { storyblokApi } = storyblokInit({
  accessToken: "YOUR_ACCESS_TOKEN",
  use: [apiPlugin],
  apiOptions: {
    region: "us",
  },
});
```

> [!WARNING]
> The `region` parameter is **required** for non-EU spaces.

### `apiPlugin`

`apiPlugin()` provides logic that `storyblokInit()` uses to generate a full-featured client for the [Storyblok Content Delivery API](/docs/api/content-delivery/v2).

```js
apiPlugin(OPTIONS);
```

`storyblokInit()` accepts `apiPlugin` as an item in the array passed to the `use` option of `storyblokInit()`:

```js
storyblokInit({
  use: [apiPlugin],
});
```

### `useStoryblokBridge`

`useStoryblokBridge()` activates the Storyblok Bridge.

```js
useStoryblokBridge(STORY_ID, CALLBACK, BRIDGE_OPTIONS);
```

Learn more about the optional parameters in the [@storyblok/preview-bridge reference](/docs/libraries/js/preview-bridge#api).

### `registerStoryblokBridge`

Alias of `useStoryblokBridge()`.

### `storyblokEditable`

`storyblokEditable()` accepts a `blok` object retrieved from the Content Delivery API. It returns `blockEditableData`, which is an object with two properties: `data-blok-c` and `data-blok-uid`.

```js
storyblokEditable(blok);
```

To define an HTML element as editable in the [Visual Editor](/docs/concepts/visual-editor), add both key/value pairs as attributes:

```js
const blockEditableData = storyblokEditable(blok);
const element = `<div
  data-blok-c="${blockEditableData["data-blok-c"]}"
  data-blok-uid="${blockEditableData["data-blok-uid"]}"
  class="storyblok__outline">
  <!-- Content <!-- Content -->
</div>`;
```

### `richTextResolver`

Learn more in the [@storyblok/richtext reference](/docs/libraries/js/rich-text).

## Previous versions

[@storyblok/js (Version 4.x)](/docs/libraries/js/js-sdk/v4)

## Pagination

-   [Previous: Universal API Client](/docs/libraries/js/universal-api-client)
-   [Next: React SDK](/docs/libraries/js/react-sdk)