Interactive page building experience for Nuxt.
Simple content pages or complex landing pages. blökkli provides a solid modular framework to build your own editing experience - with any backend.
Simplicity
Essential Tools for Seamless Editing
Navigate the basics of page building with unparalleled ease. blökkli's core functionalities are designed to enhance your productivity, from simple edits to complex page structures.
Copy, Duplicate, Edit, Delete
Quickly perform basic edits and manage your content efficiently.
Select
Select multiple blocks using ctrl + click or drag-and-drop, visualized with a clear selection rectangle.
History
Effortlessly undo or redo actions and explore the complete history of your edits for full control.
Customize your design
Dynamic Options and Interactive Features
Add customizable options and interactive capabilities to your blocks. Unlock the potential with unique aesthetics and functionality.
Custom Design
Change the behavior and appearance of each block with options like background color, alignment, and size.
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.
Content search
Easily find existing content
Find blocks, content or media elements
Search for blocks, existing content or media in your CMS or DAM and place them right away as blocks on your page.
Multi Everything
Multilingual Support and Advanced Previewing
blökkli transcends language barriers and offers advanced previewing options, ensuring your content resonates globally.
Multilanguage
blökkli supports a multilingual workflow. When translating content, the structure can not be altered.
Hands-on Live-Preview
If supported by the backend, blökkli can generate a QR code that can be scanned on a smartphone to see and feel a preview of the page, with live reloading.
Mobile First
Direct mobile preview from within the editor. Instantly see how changes affect mobile rendering.
Teamwork Made Easy
Facilitate Collaboration and Extend Functionality
blökkli encourages teamwork and flexibility, allowing you to comment, share, and integrate seamlessly.
Comments
Add comments to pages or blocks for effective team communication.
Shared Library
Reuse blocks across multiple pages with a shared library enabling truly consistent content.
Actions
Implement custom actions like extracting links or rewriting text with ChatGPT integration.
Mobile Editing
Edit your content on the go
Access all blökkli features in a user-friendly mobile interface. All features of blökkli are working in your mobile browser and with touch devices. You can add, edit and optimize your content while rushing to the next meeting.
- Fully responsive
- Touch gestures and interactions
- All editing features available
Developer Experience
Integrates in any Nuxt setup
Blocks are rendered with minimal overhead. Full SSR support, no leaking CSS.
- Auto import block components
- Directly define options inside the component
- Support for import chunks
Integration
It's just the editor
blökkli only requires a simple data structure and integrates with any CMS using a single adapter interface.
Simple
blökkli provides an adapter to integrate the editor with any existing Paragraphs based Drupal setup.
Modular
Extend adapters to your own requirements. For example, add an external comment service or write your own.
Custom
Write your own adapter for integrating blökkli with your CMS or any backend.
Drupal
Integration with Drupal Paragraphs
blökkli comes with an adapter to integrate the editor in existing or new Paragraphs based setups. The "paragraphs_blokkli" Drupal module implements all features required to use blökkli as your editing experience.
- Edit state entity to keep track of mutations
- Plugin system for custom mutations and actions
- GraphQL schema extension
Features
All features available in blökkli
By the way, this list is built dynamically and is possible thanks to the 'Fragments' feature!
Add List
Provides the container to render a list of blocks to add or add actions.
Assistant
Provides a dynamic add block action to add one or more blocks generated by an AI assistant.
Artboard
Wraps the entire page in an artboard that can be zoomed and moved using the mouse.
Block Add List
Renders a list of block bundles that can be added to the current page.
Command Palette
Provides a command palette with search to access most UI features with a keyboard.
Clipboard
Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.
Comments
Provides comment functionality for blocks.
Debug
Provides debugging functionality.
Delete
Provides an action to delete one or more blocks.
Diff
Displays a diff of all changes in the edit state.
Conversions
Provides block actions to convert one or more blocks to a different bundle.
Dragging Overlay
Renders an overlay when dragging or placing a block.
Duplicate
Provides an action to duplicate one or more blocks in place.
Edit
Provides an action to edit a block.
Edit Form
Listens to edit events and renders an iframe containing the edit form.
Editable Field
Implements a form overlay to edit a single field of a block.
Entity Title
Renders the title and status of the page entity.
Editable Mask
Provides a view option to hide non-editable parts of the page.
Exit
Provides a menu button to exit the editor without saving.
Field Areas
Provides a view option to render the field areas with labels.
Fragments
Provides way to add content fragments defined by the frontend.
Grid
Provides a view option to render a grid.
Help
Provides a sidebar pane with helpful information on how to use blokkli.
Import existing content
Implements a menu action that renders a dialog to import blocks from another entity.
History
Implements support for history features (undo, redo, list of mutations).
Library
Implements support for a block library to manage reusable blocks.
Multiselect
Implements support for selecting multiple blocks using a select rectangle.
Options
Renders the options form for one or more blocks.
Media Library
Implements a media library to easily drag and drop media like images or videos.
Ownership
Renders a large button to take ownership of the current edit state.
Preview Grant
Provides a button to open a dialog with a QR code to preview the page on a smartphone.
Proxy View
Displays the blocks as a structure in the preview.
Preview
Provides a button to open a preview in a new window.
Publish
Provides a menu button to publish the changes of the current entity.
Responsive Preview
Provides a responsive preview of the current edit state in an iframe.
Revert
Provides a menu button to revert all changes done on the current entity.
Search
Provides an overlay with shortcut to search for blocks on the current page or existing content to add as blocks.
Selection
Renders an overlay that highlights the selected blocks.
Settings
Provides a menu button to display a settings dialog.
Structure
Provides a sidebar button to render a structured list of all blocks on the current page.
Touch Action Bar
Renders a button on touch devices to cancel touch actions.
Theme
Implements a theme editor.
Transform
Provides integration for block transform plugins.
Validations
Provides a sidebar pane to render validations.
Tour
Provides a tour overlay to get to know the editor.
Translations
Adds support for block translations.