Managing content across multiple pages in a headless CMS can become repetitive, especially when editors constantly switch between dashboards, stories, previews, and settings. To streamline this workflow, I built Storyblok Quick Manager—a lightweight browser extension that connects directly to a Storyblok space and provides one-click access to the most common content management tasks.
The goal was simple: reduce navigation time and make everyday Storyblok operations faster and more efficient.
Why I Built This Project
Content editors frequently perform repetitive actions such as:
- Opening stories
- Creating new content
- Previewing pages
- Refreshing content
- Switching between spaces
- Searching recent stories
Instead of opening multiple browser tabs and navigating through several menus, I wanted all these features available from a single browser extension.
What is Storyblok Quick Manager?
Storyblok Quick Manager is a browser extension that securely connects to a Storyblok space using an Access Token and Space ID.
Once connected, it instantly displays important workspace information and allows editors to perform common content management tasks directly from the extension popup.
Key Features
🔐 Secure Space Connection
The extension connects using:
- Storyblok Access Token
- Space ID
This enables secure communication with the Storyblok Management API while keeping authentication simple.
📊 Space Overview
After authentication, the extension displays:
- Connected space name
- Total stories
- Workspace information
- Quick status overview
Editors can instantly verify they're connected to the correct project.
📄 Recent Stories
The extension provides a dedicated Recent Stories section where users can:
- View recently updated content
- Check publication status
- Open stories instantly
- Access frequently edited pages
This significantly reduces the time spent searching within the CMS.
➕ One-Click Story Creation
Create new content directly from the extension with a single click, making content creation much faster.
👁 Quick Preview
Each story includes quick actions such as:
- Edit Story
- Preview Story
- Open in Storyblok
This allows editors to review content without navigating through multiple pages.
🔄 Instant Refresh
Refresh instantly updates the story list, ensuring users always work with the latest content.
🌐 Open Storyblok Space
A dedicated shortcut opens the connected Storyblok workspace directly from the extension.
⚙ Settings Management
The extension also supports:
- Updating credentials
- Switching Storyblok spaces
- Secure disconnect
- Easy reconnection
Technology Stack
- JavaScript
- HTML5
- CSS3
- Storyblok Management API
- Browser Extension APIs
- REST API Integration
Challenges Faced
During development, several technical challenges had to be addressed:
- Secure API authentication
- Managing asynchronous API requests
- Building a responsive popup interface
- Supporting multiple Storyblok spaces
- Maintaining fast extension performance
- Designing an intuitive user experience
What I Learned
This project strengthened my skills in:
- Browser Extension Development
- REST API Integration
- Storyblok Management API
- Authentication Workflows
- Popup UI Design
- State Management
- Content Management Systems
- User Experience Optimization
Future Improvements
- Advanced Story Search
- Asset Management
- Draft & Published Filters
- Scheduled Publishing
- Multi-space Support
- AI-assisted Content Generation
- Keyboard Shortcuts
- Dark Mode
- Content Analytics
GitHub Repository
Source Code:
https://github.com/i-m-samarth-cs/spatial-story
Final Thoughts
Storyblok Quick Manager demonstrates how browser extensions can simplify everyday CMS operations by bringing frequently used actions into a compact, accessible interface. Instead of navigating multiple pages within the CMS, editors can create, preview, refresh, and manage content directly from the browser toolbar.
This project provided valuable experience in browser extension development, API integration, and user-centric interface design while delivering a practical productivity tool for developers and content teams using Storyblok.
Comments
Post a Comment