Sector(s)

Team Members

ayalon, siegrist, pfrenssen, dulnan, tcrawford, jonock, dasjo

Visit the site

Visit the site

Organizations Involved

Community contributions

Editor, open-sourced under the MIT license
https://github.com/blokkli/editor

Drupal, paragraphs integration under the GPL license:
https://www.drupal.org/project/paragraphs_blokkli

GraphQL Core Schema module:
https://www.drupal.org/project/graphql_core_schema

Starterkit including the entire base setup & documentation
https://blokkli-starterkit.netlify.app/ 

Blökkli significantly simplifies content creation for Drupal, an essential factor for the success of modern websites. The ability to create and manage content directly impacts the user experience, and Blökkli makes this process easier by providing an intuitive editing interface that allows editors to quickly see how their content will appear on the live site.

The Blökkli editor is designed to address the challenges editors face in Drupal. It provides a straightforward, real-time editing environment where editors can easily modify content and layouts without relying on developers. This streamlined approach to content management enhances editorial workflows and reduces the need for ongoing technical support.

The bs.ch website, for the Canton of Basel-Stadt, showcases Blökkli in a real-world application. The site operates with a modern headless architecture, and Blökkli enables editors to manage layouts and content autonomously. This setup allows for a more efficient content creation process while maintaining the flexibility of Drupal’s backend.
 

Describe the project (goals, requirements and outcome)

To empower users with a truly effective tool for their daily tasks, it’s essential for editors to always see exactly how their content will appear in its final form. At the same time, the interface needs to remain intuitive and user-friendly.
Blökkli delivers precisely that. Content is displayed exactly as it will appear on the live website, and editors can instantly edit and refine sections with a simple click.

Blökkli solves the following challenges for our editors

  • Live editing of the site with real-time, WYSIWYG preview
  • Design - Change the behavior and appearance of each block with options like background color, alignment, and size.
  • Efficient team processes and easy onboarding of new users
  • Artboard - Pan and zoom like in Photoshop or Figma for precise layout control
  • Clipboard - Easily copy-paste text, images, and even YouTube links for enriched content.
  • Mobile Editing - Edit your content on the go (Fully responsive, Touch gestures and interactions, All editing features available)

Try using Blökkli here

Blökkli provides these advantages for development teams

  • Modern frontend experience based on Vue and Nuxt
  • Blocks are rendered with minimal overhead. Full SSR support, no leaking CSS.
  • Abstract from any backend CMS using GraphQL as intermediate layer
  • Integrates with Drupal Paragraphs (edit states, mutations, actions and GraphQL schema extension)
  • Licensed under the permissive MIT license (Drupal integration with GPL)

Get Blökkli here

A starterkit has been released to facilitate getting starter with Blökkli

  • Out of the box support experience with local setup using Lando or DDEV
  • Drupal Backend Setup with GraphQL, Paragraphs and Paragraphs blokk.li module enabled
  • +40 Vue Components and Composables ready to build paragraph based Drupal websites
  • Basic Frontend setup with Nuxt 3 and GraphQL Middleware included
  • Multilanguage support with language negotation and translation support
  • Key-based Texts managed in Drupal combined with translation extraction in the frontend
  • SVG Icon Sprite generation with Drupal Media Library integration
  • rokka.io Image CDN integration and Drupal media library integration
  • Reverse proxy configuration generator included

Install with 2 commands using the starterkit

Development Roadmap for Blökkli

  1. Addressing the Editor’s Needs
    Liip developed the Blökkli editor as part of the relaunch of bs.ch, the website for the Canton of Basel-Stadt. Our first priority was solving the editors’ challenges by creating an interface that was intuitive, easy to use, and a joy for editors to work with.
  2. Integration into the Headless Stack
    Once the editor interface was established, we integrated Blökkli into our headless stack, ensuring compatibility with modern architectures. All components were open-sourced to promote reusability and community collaboration.
  3. Feedback-Driven Rollout
    After its initial deployment on bs.ch, Blökkli was rolled out to a wider range of end users. We collected detailed feedback to further enhance its functionality and usability.
  4. Open-Sourcing as a Starter Kit
    Building on this success, Blökkli was published as an open-source project. It is now available as a starter kit, allowing agencies and end users to install a preconfigured Drupal installation based on Blökkli, ensuring an efficient and robust starting point for new projects.

What makes our project special?
Blökkli combines Drupal's flexible content modeling with a modern, intuitive editing experience, offering a live-preview interface that editors love, and is fully open-sourced for integration with other systems.

What project management approach did you use?
As an agile agency, we employed Scrum and other agile methods, fostering close collaboration, iterative development, and continuous feedback to ensure an editor-centric solution.

What was the outcome of the project?
The Canton of Basel-Stadt’s website, bs.ch, was successfully relaunched with Blökkli at its core, and the editor was open-sourced as a starter kit for Drupal-based projects.

What business problems were solved?
Blökkli streamlined content editing for hundreds of users, reducing complexity and enabling real-time content adjustments while supporting modern, headless architectures.

What results were achieved?
The project delivered a state-of-the-art Drupal-based editing tool, enhanced editorial efficiency, and empowers users with a flexible open-source solution.
 

Why Drupal was chosen

Blökkli is an example of how Liip has used Drupal’s powerful content modelling capabilities to build digital solutions. Designed to deeply integrate with Drupal—our favourite open-source CMS—Blökkli combines modern, intuitive user interfaces with Drupal’s unmatched flexibility to support hundreds of editors seamlessly. The ability to integrate with other systems when needed makes Blökkli a versatile tool in the content management landscape.

Technical Specifications

Drupal version:

Key modules/theme/distribution used:

Why these modules/theme/distribution were chosen

Blökkli is designed to work backend agnostic but is also optimized to work together with Drupal as the primary backend implementation.
In the frontend, we are using Vue & Nuxt for an interactive editorial experience and for the modern development experience.

As middle-layer, we are relying on GraphQL as a modern standard for APIs that allows to get only the exact data that the front-end needs, that allows to connect to any backend technology and that allows to introspect the available data structures easily.

In the backend, we are using Drupal, the Paragraphs module and GraphQL Core Schema as a solid foundation that makes it easy to extend the available data structures.