> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frontic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Storyblok

<div style={{ display: "flex", gap: "1.75rem", alignItems: "flex-start", marginTop: "0.5rem", marginBottom: "1.75rem" }}>
  <img src="https://mintcdn.com/frontic/zwqcoY8MRIYLLSYv/images/connectors/storyblok.svg?fit=max&auto=format&n=zwqcoY8MRIYLLSYv&q=85&s=d3185f3df91d66699c8842e54e21a02f" alt="Storyblok" style={{ height: "56px", width: "auto", flexShrink: 0, marginTop: "0.25rem" }} width="24" height="24" data-path="images/connectors/storyblok.svg" />

  <div>
    The Storyblok connector syncs stories from a Storyblok space into Frontic. It supports **draft and published modes**, **folder-based filtering** for selective imports, and **auto-deletion** of stories removed in Storyblok — so your Frontic content stays in sync with the source as it changes.
  </div>
</div>

<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "0.75rem", marginBottom: "2rem" }}>
  <div style={{ padding: "0.75rem 1rem", border: "1px solid var(--card-border, rgba(0,0,0,0.08))", borderRadius: "0.625rem" }}>
    <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.04em", opacity: 0.6, marginBottom: "0.25rem" }}>
      <Icon icon="key" iconType="solid" /> Auth
    </div>

    <div style={{ fontSize: "0.875rem", fontWeight: 500 }}>Access token</div>
  </div>

  <div style={{ padding: "0.75rem 1rem", border: "1px solid var(--card-border, rgba(0,0,0,0.08))", borderRadius: "0.625rem" }}>
    <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.04em", opacity: 0.6, marginBottom: "0.25rem" }}>
      <Icon icon="arrows-rotate" iconType="solid" /> Update methods
    </div>

    <div style={{ fontSize: "0.875rem", fontWeight: 500 }}>Trigger · Polling</div>
  </div>

  <div style={{ padding: "0.75rem 1rem", border: "1px solid var(--card-border, rgba(0,0,0,0.08))", borderRadius: "0.625rem" }}>
    <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.04em", opacity: 0.6, marginBottom: "0.25rem" }}>
      <Icon icon="boxes-stacked" iconType="solid" /> Resources
    </div>

    <div style={{ fontSize: "0.875rem", fontWeight: 500 }}>Stories</div>
  </div>
</div>

The Storyblok connector follows the standard integration model — see [how integrations work](/connectors/overview) for Connection, Channels, and Data Feeds. This page covers the Storyblok-specific configuration.

## Connection settings

<ParamField path="Space ID" type="string" required>
  Your Storyblok space ID. Find it in Storyblok under **Settings → Space → General**.
</ParamField>

<ParamField path="Access Token" type="string" required>
  A Content Delivery API token for your space. Use a draft token if you've enabled draft mode (below); otherwise a public token suffices.
</ParamField>

<ParamField path="Draft Mode" type="boolean" default="false">
  When on, the connector reads from Storyblok's draft API — pulling unpublished stories alongside published ones. Useful for preview environments. Off by default; production-style integrations should leave this off.
</ParamField>

The connection populates the channel's available languages from your space's configured locales.

## Channels

A Storyblok channel in Frontic carries which translations the connector pulls per story.

<ParamField path="Channel Name" type="string" required>
  A label for the channel in Frontic.
</ParamField>

<ParamField path="Available Translations" type="multiselect" required>
  Storyblok locale codes the connector pulls per story.
</ParamField>

<ParamField path="Fallback Translation" type="select" required>
  The translation used when a story field is missing in another locale.
</ParamField>

The **Refresh** button re-fetches your space's configured languages — use it after enabling new locales in Storyblok.

## Data Feeds

The Storyblok connector exposes one feed type:

| Feed        | What it pulls                                                                                            |
| ----------- | -------------------------------------------------------------------------------------------------------- |
| **Content** | Stories from your space — every story across every configured language is pulled and merged by story ID. |

The standard **Settings → Updates → Schema** setup wizard applies — see [Data Feeds in the overview](/connectors/overview#data-feeds). For Storyblok specifically:

### Per-feed config

<ParamField path="Folders" type="string[]">
  Optional list of folder slugs to restrict the feed to. When set, only stories under these folders are pulled — useful when one Storyblok space serves multiple Frontic projects.
</ParamField>

### Update methods

* **Trigger** — Storyblok webhooks (Settings → Webhooks) push story updates and deletions to the feed's inbound URL in real-time.
* **Polling** — scheduled refresh.

The Ingest API isn't used by Storyblok. Each Storyblok feed exposes a manual **Refresh** action.

## What the data looks like

### Stories merged across languages

Stories in Storyblok are stored once and translated via the language layer. The connector merges all language variants of a story into a single record set, then emits one record per (channel translation, story) pair. The Source ID is the story's Storyblok ID.

### Folder filtering

When **Folders** is set on a feed, the connector applies the allow-list against the default-language pass — stories not in any allowed folder are skipped before translation merging.

### Auto-deletion

When a refresh runs, the connector reconciles its previous result against the current state of Storyblok. Stories that have been **deleted in Storyblok** are deleted in Frontic too — so you don't end up with orphan content. This is unique to Storyblok among Frontic's connectors today.

### Draft vs. published

When **Draft Mode** is on at the connection level, the connector pulls drafts alongside published stories. Use this for preview environments; combine with a separate Frontic project (or scope) so drafts don't leak into production.

## Good to know

* **Auto-deletion is the connector's behavior.** The connector reconciles aggressively against Storyblok's current state.
* **Folder allow-list applies at the default-language pass.** If a story exists in a non-default language but its default-language version is excluded by folder filter, the non-default language version is skipped too.
* **Custom field types.** Storyblok's custom field types come through on the raw payload. Resolve them in your Value Composer if you need them as first-class fields.

## Related

<CardGroup cols={2}>
  <Card title="Contentful" icon="file-lines" href="/connectors/contentful">
    Contentful's CMS connector — environment selection.
  </Card>

  <Card title="Custom Integration" icon="paintbrush-fine" href="/connectors/custom">
    For pushing supplemental records via the Ingest API.
  </Card>
</CardGroup>