📦 Packages

This monorepo contains all official Storyblok SDKs and integrations:

Core SDKs

Package	Description	Version	Downloads
@storyblok/js	Core JavaScript SDK for Storyblok
@storyblok/js-client	JavaScript client for Storyblok's Content Delivery API

Framework Integrations

Package	Description	Version	Downloads
@storyblok/react	React SDK for Storyblok
@storyblok/vue	Vue SDK for Storyblok
@storyblok/nuxt	Nuxt SDK for Storyblok
@storyblok/svelte	Svelte SDK for Storyblok
@storyblok/astro	Astro SDK for Storyblok

Utilities

Package	Description	Version	Downloads
@storyblok/richtext	Rich Text Renderer for Storyblok

🚧 Migration Status

This repository represents an ongoing migration from a polyrepo structure to a unified monorepo. While we're actively working on this transition, please note:

• All new development should be done in this repository
• Existing packages are being migrated gradually
• Some packages may still be in their original repositories during the transition
• We're working to ensure a smooth migration with minimal disruption

🛠️ Development

Prerequisites

• Node.js (v18 or later)
• pnpm (v8 or later)
• Git

Setup

1. Clone the repository:

   git clone https://github.com/storyblok/monoblok.git
   cd monoblok
   

2. Install dependencies:

   pnpm install
   

Package Management with PNPM

This repository uses PNPM as its primary package manager, providing efficient dependency management and disk space usage. The workspace is configured in pnpm-workspace.yaml and includes all packages in the packages/ directory.

Common PNPM commands:

# Install dependencies
pnpm install

# Add a dependency to a specific package
pnpm add <package> --filter @storyblok/react

# Run a script in a specific package
pnpm --filter @storyblok/react <script>

Development with NX

While PNPM manages our packages, we use NX to optimize our development workflow. NX provides powerful features for:

• Intelligent caching
• Affected package detection
• Dependency graph visualization
• Parallel task execution
• Project-specific configurations

Common NX Commands

# Build all packages
pnpm build

# Build a specific package
pnpm build @storyblok/react

# Run tests for affected packages
pnpm nx affected:test

# Show dependency graph
pnpm nx graph

# Run commands only on affected packages
pnpm nx affected --target=build

Development Workflows

# Start development mode for a package
pnpm dev @storyblok/react

# Run tests in watch mode
pnpm test:watch @storyblok/react

# Lint all packages
pnpm lint

# Format all packages
pnpm format

# Check types
pnpm type-check

For more advanced NX usage, we recommend exploring:

• NX Documentation
• NX Cache
• NX Affected
• NX Project Configuration

Repository Administration

For repository administrators, we provide the monoblock-cli tool to help manage the monorepo. This tool assists with:

• Package migration
• Dependency management
• Repository maintenance
• Release coordination

See the monoblock-cli package for detailed documentation and usage instructions.

📄 Contributing

We welcome contributions! Please see our Contributing Guide for details on:

• Code style and standards
• Pull request process
• Development workflow
• Testing requirements

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• Storyblok Documentation
• Storyblok Website
• Storyblok Status
• Storyblok GitHub Organization