Editor.js Interface
A Directus 9 interface extension that integrates the Editor.js block-styled editor for creating rich media stories.
What is Editor.js Interface?
Directus Extension Editor.js Interface is a custom interface for Directus 9 that integrates the Editor.js block editor, allowing users to create and manage rich media content using a modular block-based approach. It outputs clean, structured JSON data, making it ideal for headless CMS workflows where content needs to be decoupled from presentation.
Directus developers and content managers who want a modern, block-based editing experience within their Directus admin panel for creating structured content.
It offers a clean, JSON-based alternative to traditional WYSIWYG editors, providing greater flexibility and interoperability for content that needs to be consumed across multiple platforms or frontends.
Overview
Block editor (Editor.js) interface for Directus 9
Use Cases
Best For
- Adding a block-based editor to Directus for structured content creation
- Managing rich media stories with clean JSON output in a headless CMS
- Replacing traditional WYSIWYG editors with a modular editing interface
- Building content workflows that require decoupled content and presentation
- Integrating Editor.js into Directus for modern content management
- Creating reusable content blocks for multi-platform publishing
Not Ideal For
- Teams needing traditional WYSIWYG editors with direct HTML output and inline styling
- Directus installations not on version 9 or without custom interface support
- Projects requiring real-time collaborative editing or extensive block libraries without additional development
Pros & Cons
Pros
Stores content as structured JSON, as shown in the example output, making it easy to parse and reuse across different platforms or frontends.
Integrates directly as a custom interface for JSON fields with simple npm installation and configuration steps outlined in the README.
Enables modular content creation with blocks like paragraphs and headings, enhancing content structure and aligning with modern headless CMS workflows.
Supports embedding images and videos into content blocks, facilitating the creation of rich multimedia stories without external tools.
Cons
Relies on Editor.js's default blocks; adding custom blocks requires additional coding and configuration not detailed in the README.
Built specifically for Directus 9, so compatibility with newer versions like Directus 10 is uncertain and may require manual updates or fixes.
Focuses on core editing features, lacking advanced options such as real-time collaboration, extensive styling controls, or built-in analytics.
Frequently Asked Questions
Related Projects
Generate TypesCreate types for your directus project in your favourite language.
Computed InterfacePerform computed value based on other fields
Flexible EditorA rich text editor (WYSIWYG) with JSON output that allows the integration of M2A relations to make it extremely flexible. A truly rich editor for Directus.
Search SyncSimple Directus 9 extension that sync content with remote search engine.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.