Tired of juggling multiple screens just to build a workflow in Joomla?
Imagine visualizing your stages and transitions like a mind map - interactive, intuitive, and all in one place. That’s exactly what we set out to build this summer.
A year ago, I was navigating my way through the third year of Computer Science Engineering at the International Institute of Information Technology, Hyderabad. Like many students passionate about open source, I had my sights set on Google Summer of Code (GSoC'25). As I explored project ideas across organizations, one particular Joomla! project caught my eye: Workflow Enhancements.
It wasn't something I proposed myself, but it struck a chord with me immediately. The problem was clear and close to the kind of usability challenges I was already exploring in my university research. Joomla!'s workflow system - while incredibly powerful, required users to jump through multiple screens just to connect the dots. You had to first define the workflow, then switch to another section to create stages, then another to add transitions, and mentally hold all the pieces together. For newcomers and experienced site administrators alike, this often became challenging.
That's what drew me in. The idea was to create a visual interface for workflows - something graphical, interactive, and intuitive. Users should be able to see all stages and transitions laid out as a flowchart, edit them on the go, and build entire workflows without ever leaving the page. I knew I had to be part of this transformation.
Once accepted into GSoC'25 and onboarded into the Joomla! community, I began working closely with my mentors, Benjamin Trenkle and Christiane Maier-Stadtherr. From the start, they were incredibly supportive - not just helping me navigate the codebase, but also encouraging me to think deeper about user experience, design patterns, and accessibility. Their constant guidance played a big role in shaping both the project and my own confidence as a contributor.
Visualizing Workflows - The New Way
Our solution was the Workflow Graph Editor, a brand-new visual canvas built using Vue.js and VueFlow. It offers a node-based interface where each stage is a draggable box and transitions are visual connections drawn between them. Everything happens in a single view - no page reloads, no switching tabs. You can zoom in, pan around, and explore even the most complex workflows with ease. Contextual editing panels appear when you select the edit option in a node or connection, allowing you to update stage and transition names, statuses, or rules in real time.
The experience is radically different from the old system. What once took several minutes and multiple page loads can now be done in a few intuitive actions. You can visualize dependencies, spot bottlenecks, and build complex editorial flows - all while staying completely in control.
Here's a snapshot of how the new interface looks:
What Features Are Available Now?
The new editor already includes several features to enhance productivity and usability for workflow creators. Here's what you can do:
- Add, Edit, or Remove Stages: Simply click "+ Add Stage" or hover on any node and select the options to remove or edit its label, default status, or publishing settings.
- Create Transitions Easily: Use "+ Add Transition" or drag between nodes to define transitions. You can edit or delete the transition by hovering on the transition and selecting from the menu appeared.
- Drag and Drop Stages: Rearrange stages freely to design your flow in a way that makes visual sense to you.
- Zoom, Pan, and Mini-Map: Navigate through large workflows with ease using zoom controls and a mini-map in the left corner.
- Undo/Redo Support: Don't worry about making mistakes - you can revert or reapply the layout changes with a click.
- Shortcuts: We have implemented keyboard shortcuts for all the features available to make it easy for users (Mostly for the people who don't like using a mouse like me).
All changes made in the editor are automatically saved and synchronized with Joomla!'s backend, so nothing gets lost - even when working with workflows that include 10, 20, or more transitions and stages.
You can try it out right now by checking out the development branch:
⇒ GitHub Branch: Workflow Enhancements on GitHub
Once you've set it up, go to your Joomla! backend and navigate to Content → Workflows (make sure workflows are enabled). Pick any existing workflow and click on the "Graph" button to launch the new editor. You'll see all the stages and transitions presented in a clean, unified canvas.
Future Plans:
While the visual workflow editor is already functional and usable, we're just scratching the surface of what's possible. A few upcoming improvements we’re planning include:
- Workflow Templates: Instead of building from scratch every time, you'll be able to apply a few pre-configured layouts and adjust it as needed.
- View-Only Visualizations: These would allow non-admins or content reviewers to view the workflow map and understand what transitions are available to them without being able to edit it. This will be particularly useful for teams that need transparency and traceability across roles.
- Category Transition Plugin: This plugin will enable dynamic category assignment during workflow transitions.
What I Learned Through This Journey
Building this wasn't without its challenges. One of the trickiest parts was getting dynamic graph layouts to behave predictably, especially when workflows got large or complex. We had to strike a balance between automatic layout and manual control, so users could arrange nodes how they preferred. Keeping transitions readable while avoiding overlaps took several iterations. We also had to sync graph interactions with Joomla!'s backend - ensuring that data updates in real time and that user edits reflect consistently across sessions.
Accessibility was another important consideration. We made sure to include proper ARIA roles, keyboard navigation, and support for users with diverse interaction needs. Thanks to continuous reviews and feedback from the mentors, the component gradually matured into something both usable and elegant.
As I worked on this, I learned more than just Vue.js and Joomla's MVC architecture. I came to understand the value of clean UX design, how to contribute responsibly in a large open-source project, and how collaborative code reviews help sharpen technical thinking. The GSoC'25 experience helped me grow not only as a developer, but also as someone who now feels at home in a global developer community.
This project wouldn't have been possible without the unwavering support of Joomla! mentors, the GSoC initiative, and the incredible open-source community that keeps Joomla! evolving. I feel lucky to have been part of this journey - turning a once-frustrating experience into something intuitive, visual, and future-ready.
Final Thoughts
This visual workflow editor is a step toward a more intuitive Joomla! - one that empowers users to manage complex editorial processes with confidence and ease. If you've ever struggled with Joomla's existing workflow system, I hope this new editor makes your job not only easier but also a bit more enjoyable.
We’re still refining the tool and gathering feedback. If you're a Joomla! user, developer, or site builder, I invite you to try it out and share your experience. Whether it's bug reports, feature ideas, or UI suggestions, your input is invaluable in shaping the future of Joomla.
Let's keep building. Together.