https://github.com/storyblok/monoblok
The Storyblok OSS monorepo
https://github.com/storyblok/monoblok
astro js next nuxt react svelte vue
Last synced: 3 months ago
JSON representation
The Storyblok OSS monorepo
- Host: GitHub
- URL: https://github.com/storyblok/monoblok
- Owner: storyblok
- License: mit
- Created: 2025-05-19T10:40:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-04-02T19:37:19.000Z (3 months ago)
- Last Synced: 2026-04-02T20:26:03.997Z (3 months ago)
- Topics: astro, js, next, nuxt, react, svelte, vue
- Language: TypeScript
- Homepage: https://www.storyblok.com/docs
- Size: 42.3 MB
- Stars: 42
- Watchers: 4
- Forks: 25
- Open Issues: 79
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Agents: AGENTS.md
Awesome Lists containing this project
README
Monoblok
A monorepo that consolidates all JavaScript projects from the Storyblok organization. This project aims to centralize the development, maintenance, and contribution to Storyblok's ecosystem of SDKs and tools.
## 📦 Packages
This monorepo contains the following official Storyblok SDKs and integrations:
### Core SDKs
| Package | Description | Version | Downloads |
| -------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [@storyblok/js](packages/js) | Core JavaScript SDK for Storyblok | [](https://www.npmjs.com/package/@storyblok/js) | [](https://www.npmjs.com/package/@storyblok/js) |
| [storyblok-js-client](packages/js-client) | JavaScript client for Storyblok's Content Delivery API | [](https://www.npmjs.com/package/storyblok-js-client) | [](https://www.npmjs.com/package/storyblok-js-client) |
| [storyblok-cli](packages/cli) | A powerful CLI tool to improve the DX of your Storyblok projects. | [](https://www.npmjs.com/package/storyblok) | [](https://www.npmjs.com/package/storyblok) |
| [@storyblok/region-helper](packages/region-helper) | A helper package to handle Storyblok APIs in different regions. | [](https://www.npmjs.com/package/@storyblok/region-helper) | [](https://www.npmjs.com/package/@storyblok/region-helper) |
### Framework Integrations
| Package | Description | Version | Downloads |
| ------------------------------------ | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| [@storyblok/react](packages/react) | React SDK for Storyblok | [](https://www.npmjs.com/package/@storyblok/react) | [](https://www.npmjs.com/package/@storyblok/react) |
| [@storyblok/vue](packages/vue) | Vue SDK for Storyblok | [](https://www.npmjs.com/package/@storyblok/vue) | [](https://www.npmjs.com/package/@storyblok/vue) |
| [@storyblok/nuxt](packages/nuxt) | Nuxt SDK for Storyblok | [](https://www.npmjs.com/package/@storyblok/nuxt) | [](https://www.npmjs.com/package/@storyblok/nuxt) |
| [@storyblok/svelte](packages/svelte) | Svelte SDK for Storyblok | [](https://www.npmjs.com/package/@storyblok/svelte) | [](https://www.npmjs.com/package/@storyblok/svelte) |
| [@storyblok/astro](packages/astro) | Astro SDK for Storyblok | [](https://www.npmjs.com/package/@storyblok/astro) | [](https://www.npmjs.com/package/@storyblok/astro) |
### Utilities
| Package | Description | Version | Downloads |
| ---------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| [@storyblok/richtext](packages/richtext) | Rich Text Renderer for Storyblok | [](https://www.npmjs.com/package/@storyblok/richtext) | [](https://www.npmjs.com/package/@storyblok/richtext) |
## 🚧 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:
```bash
git clone https://github.com/storyblok/monoblok.git
cd monoblok
```
2. Install dependencies:
```bash
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:
```bash
# Install dependencies
pnpm install
# Add a dependency to a specific package
pnpm add --filter @storyblok/react
# Run a script in a specific package
pnpm --filter @storyblok/react
```
### 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
```bash
# 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
```bash
# 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](https://nx.dev/docs)
- [NX Cache](https://nx.dev/concepts/how-caching-works)
- [NX Affected](https://nx.dev/concepts/affected)
- [NX Project Configuration](https://nx.dev/concepts/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](packages/monoblock-cli) for detailed documentation and usage instructions.
## 📄 Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) 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](LICENSE) file for details.
## 🔗 Links
- [Storyblok Documentation](https://www.storyblok.com/docs)
- [Storyblok Website](https://www.storyblok.com)
- [Storyblok Status](https://status.storyblok.com)
- [Storyblok GitHub Organization](https://github.com/storyblok)