Field Plugin SDK v1 Stable Release
Tags: typescript, javascript, react, vue
Published: 2023-11-08 15:35:52

---
title: Field Plugin SDK v1 Stable Release
published: true
description: This SDK enables you to create field plugins in vanilla JS, React, Vue, and any other frameworks.
tags: typescript, javascript, react, vue
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mryipgciy7i2gkywmgdx.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-07 13:35 +0000
---

We are happy to announce the stable release of Field Plugin SDK v1. Field Plugin SDK helps you create field plugins for your Storyblok projects in vanilla JavaScript, React, Vue, and any other frameworks.

## What's changed since beta

For those following this project, here's a summary of the key changes since the beta version.

### Breaking change

The setter function pattern is removed from `plugin.actions.setModalOpen` and `plugin.actions.setContent`.

```diff
-type SetModalOpen = (newValue: boolean | (prevValue: boolean) => boolean) => void;
+type SetModalOpen = (newValue: boolean) => Promise<FieldPluginData>;
```

```diff
-type SetContent = (content: TContent | (prevContent: TContent) => TContent) => void;
+type SetContent = (content: TContent) => Promise<FieldPluginData>;
```

### `validateContent`

`createFieldPlugin` and `useFieldPlugin` now accepts an option called `validateContent`, which allows you to

- validate the content
- make changes before sending it to the Storyblok Visual Editor
- provide type-safety

```js
const plugin = useFieldPlugin({
  // For example,
  validateContent: (content: unknown) => {
    if (typeof content === 'string') {
      return {
        content,
      }
    } else {
      return {
        content,
        error: `content is expected to be a string (actual value: ${JSON.stringify(content)})`,
      }
    }
  }
})
```

### Manifest file

The new templates come with a manifest file named `field-plugin.config.json`

```
{
  "options": [
    {
      "name": "somePredefinedOption",
      "value": "its value"
    }
  ]
}
```

which can be accessed like the following:

```js
const { type, data, actions } = useFieldPlugin()
console.log(data.options.somePredefinedOption)
```

## What's inside the SDK

The Field Plugin SDK comprises three essential components:

### Library

The library empowers developers to create plugins using their preferred frontend framework. This flexibility allows you to leverage your existing skills and create custom plugins that perfectly align with your needs.

### Command Line Interface (CLI)

The CLI is designed to streamline your development experience. It offers multiple templates, making it easy for developers to get started quickly. Moreover, it promotes the adoption of Continuous Integration and Continuous Deployment (CI/CD) processes, enabling you to build robust and efficient workflows.

### Sandbox

To ensure a smooth and hassle-free experience, we have also developed a Sandbox environment. This Sandbox provides a dedicated space for testing and sharing your field plugins before they are ready for production. It offers a safe and controlled environment to fine-tune your plugins and gather valuable feedback from stakeholders.



## Learn More

You can learn more about the Field Plugin SDK: https://www.storyblok.com/docs/plugins/field-plugins/introduction