Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide
DocumentationStoryblok

Installation

coral-storyblok

This package provides Storyblok editable components ready to be used directly with the @storyblok/react package.

Be sure to follow the steps from Installation to set up your project with Panda CSS and Coral before using this package.

Installation

npm i @krakentech/coral-storyblok @krakentech/coral-media @krakentech/coral-molecules @storyblok/react

Prerequisites

PackageVersionRequired
@krakentech/coral^30.0.0

Required

@krakentech/coral-design^4.0.0

Required

@krakentech/coral-media^16.0.0

Required

@krakentech/coral-molecules^26.0.0

Required

@krakentech/icons^9.0.0

Required

@krakentech/utils^2.0.0

Required

@storyblok/react^5.4.18

Required

react^18.2.0 || ^19.0.0

Required

@types/react^18.2.0 || ^19.0.0

Optional

Importing

To import all of the Coral Storyblok components into your Block Library, you can do the following:

  • Request editor access to the coral Storyblok space, this can be done in the #coral-feedback Slack channel
  • Install the Storyblok CLI globally with npm i -g storyblok (ensure you have v4 installed)
  • Log in to the Storyblok CLI with storyblok login
  • Run npx @krakentech/coral-storyblok storyblok-push and follow the prompts to push the components to your Storyblok space

You must use v4 of the Storyblok CLI to push the components, as v3 does not support the @krakentech/coral-storyblok package.

Usage

Use the storyblokInit function to set up Storyblok, and then pass in the coralBloks from the package. Depending on whether you are using Client Components or Server Components (RSC), you will need to import the components from different paths.

Styling

As Panda CSS is a build-time CSS-in-JS library, any arbitrary styles that you apply in Storyblok (think custom widths or heights) cannot be applied at build time, as the compiler cannot know that these values exist. To account for this, you will need to ensure that you are using getStaticProps in your calls to getStoryblokApi and tie this with GetStoryblokStaticCss from @krakentech/coral-storyblok in your app. This means that the content for the page is pre-generated from the Storyblok API, and allows us to generate the necessary CSS for the Storyblok components at build time.

[[...slug]].tsx
import { Container, Stack, Typography } from '@krakentech/coral';
import { GetStoryblokStaticCss } from '@krakentech/coral-storyblok';
import {
    getStoryblokApi,
    ISbStoryData,
    SbBlokData,
    StoryblokComponent,
    useStoryblokState,
} from '@storyblok/react';
import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from 'next';
import Head from 'next/head';
import { FC } from 'react';
 
const Page: FC<{ story: ISbStoryData; css: any }> = ({ story: s, css }) => {
    const story = useStoryblokState(s);
 
    if (!story) {
        return null;
    }
 
    return (
        <Container
            marginX="auto"
            paddingX="sm"
            paddingY="xl"
            maxWidthPreset="md"
            component="section"
        >
            <Head>
                <style>{css}</style>
            </Head>
            <Stack flexDirection="column" gap="lg">
                <Typography textStyle="hero2">{story.name}</Typography>
 
                {story.content.body?.map((nestedBlok: SbBlokData) => (
                    <StoryblokComponent
                        key={nestedBlok._uid}
                        blok={nestedBlok}
                    />
                ))}
            </Stack>
        </Container>
    );
};
 
export default Page;
 
export const getStaticProps: GetStaticProps = async ({ params, preview }) => {
    const slug =
        params?.slug && typeof params.slug !== 'string'
            ? params.slug.join('/')
            : 'home';
 
    const { data } = await getStoryblokApi().get(`cdn/stories/${slug}`, {
        version: preview ? 'draft' : 'published',
        resolve_links: 'url',
    });
 
    return {
        props: {
            story: data ? data.story : false,
            key: data ? data.story.id : false,
            css: data
                ? GetStoryblokStaticCss(data.story.content.body)
                : undefined,
        },
    };
};
 
export const getStaticPaths: GetStaticPaths = async () => {
    const { data } = await getStoryblokApi().get('cdn/links/');
    const paths: GetStaticPathsResult['paths'] = [];
 
    Object.keys(data.links).forEach((linkKey) => {
        const link = data.links[linkKey];
        const splittedSlug: string[] | undefined = link.slug.split('/');
        const slug = link.slug === 'home' ? [''] : splittedSlug;
        paths.push({ params: { slug } });
    });
 
    return { paths, fallback: 'blocking' };
};

You will also need to extend your panda.config.ts file to include static CSS generation for the Storyblok components.

panda.config.ts
import { pandaStaticGenerator } from '@krakentech/coral-storyblok';
 
export default defineConfig({
    ...
 
    staticCss: {
        recipes: pandaStaticGenerator.recipes,
        css: pandaStaticGenerator.css,
    },
 
    ...
});

That’s it 🎉

Contributing

Since we want to version control the bloks structure in Storyblok, we need to regenerate their types when we make changes to them. Assuming you have access to coral storyblok space:

  • Make the changes to the bloks in Storyblok
  • Go to coral in your terminal, cd into packages/coral-storyblok
  • Run pnpm generate:storyblok-types. If it doesn’t work, you might not be logged in to Storyblok CLI, so run storyblok login and try again.
  • Make sure you only commit the changes that are related to what you’ve done in Storyblok (it might be that someone else made changes to other bloks in the meantime and they didn’t get merged yet)
  • Create a PR with those generated files, and a changeset file

Reporting issues / FAQ

Please report any feedback or issues to #coral-feedback , thanks!

Last updated on
IllustrationsInstallation