---
title: Introduction
description: Discover Storyblok's documentation with comprehensive developer guides, user manuals, API references, and examples to help you get the most out of the headless CMS platform.
url: https://storyblok.com/docs/plugins/field-plugins
---

# Introduction

Field plugins are standalone applications that are embedded within the Visual Editor in inline frames (iframes). This allows developers to fulfill requirements that are specific to their use cases, such as integrating the Visual Editor and Storyblok’s APIs with web-based, third-party services.

> [!TIP]
> Take a look at the video tutorial [How to use Storyblok Field Plugin SDK](https://www.youtube.com/watch?v=GGNQ5qiaGKU) available on YouTube

## Conceptual overview

As field plugins are embedded within iframes, they are sandboxed and do not have direct access to the Storyblok frontend application. Instead, all cross-origin communication between field plugins and the Visual Editor is handled securely via `window.postMessage`. The Visual Editor can send events to the field plugin containing information such as the current content. Likewise, the field plugin can send messages back to the Visual Editor containing information such as updated content.

When creating a field plugin, it is not necessary to learn exactly how this communication works. Storyblok provides the [@storyblok/field-plugin](https://www.npmjs.com/package/@storyblok/field-plugin) library with an abstraction layer that exposes an object of type `FieldPluginResponse` with two properties:

-   `FieldPluginResponse.data`: An object that describes the state of the field plugin. When the Visual Editor sends a message to the field plugin application, the message is parsed and stored in this object.
-   `FieldPluginResponse.actions`: An object whose properties are functions that allow the field plugin application to communicate with the Visual Editor. When invoked, [@storyblok/field-plugin](https://www.npmjs.com/package/@storyblok/field-plugin) will send a message to the Visual Editor via the iframe window.

Field plugin workflow

### Serving field plugins

Field plugins are hosted by Storyblok. Therefore, the creators of field plugins are not required to maintain any server infrastructure. The creator compiles their application into a _single_ JavaScript bundle and uploads it to the Storyblok application. When a Visual Editor user opens a block containing the field plugin, Storyblok serves a barebones HTML document that contains a script element with the bundle.

```html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script>
    // Your code is inserted here
  </script>
</body>
</html>
```

 
