blueways/bw-jsoneditor

Adds a JSON Form Editor type to the TYPO3 Backend. Edit JSON data with code formatting, syntax highlighting, auto repair and more.

2.1.0 2026-03-01 00:28 UTC

Requires

• typo3/cms-core: ^12.4 || ^13.4 || ^14.1

Requires (Dev)

• armin/editorconfig-cli: ^2.0
• codeception/c3: ^2.9
• codeception/codeception: ^5.1
• codeception/module-asserts: ^3.0
• codeception/module-cli: ^2.0
• codeception/module-db: ^3.2
• codeception/module-webdriver: ^4.0
• ergebnis/composer-normalize: ^2.44
• friendsofphp/php-cs-fixer: ^3.12
• helhum/typo3-console: ^8.2
• helmich/typo3-typoscript-lint: ^3.2
• saschaegerer/phpstan-typo3: ^1.1 || ^2.1 || ^3.0
• ssch/typo3-rector: ^2.10 || ^3.12
• symfony/translation: ^7.1
• typo3/cms-base-distribution: ^12.4 || ^13.4 || ^14.0
• typo3/cms-belog: ^12.4 || ^13.4 || ^14.1
• typo3/cms-beuser: ^12.4 || ^13.4 || ^14.1
• typo3/cms-extensionmanager: ^12.4 || ^13.4 || ^14.1
• typo3/cms-filelist: ^12.4 || ^13.4 || ^14.1
• typo3/cms-info: ^12.4 || ^13.4 || ^14.1
• typo3/cms-install: ^12.4 || ^13.4 || ^14.1
• typo3/cms-lowlevel: ^12.4 || ^13.4 || ^14.1
• typo3/cms-setup: ^12.4 || ^13.4 || ^14.1
• typo3/cms-tstemplate: ^12.4 || ^13.4 || ^14.1
• typo3/testing-framework: ^8.2 || ^9.0

GPL-2.0-or-later

• Maik Schneider

• json
• typo3

README

TYPO3 extension bw_jsoneditor

Integrates the svelte-jsoneditor into the TYPO3 Backend.

Installation

Composer

composer require blueways/bw-jsoneditor

TER

Download the zip file from TYPO3 extension repository (TER).

Usage

The extension adds a new custom input with renderType jsonEditor. You can use the new type in TCA or Content Blocks.

TCA

When adding a new field to your TCA, use the type user and the renderType jsonEditor:

ExtensionManagementUtility::addTCAcolumns('my_table', [
    'new_field' => [
        'label' => 'My JSON Field',
        'config' => [
            'type' => 'user',
            'renderType' => 'jsonEditor',
        ],
    ],
]);

Make sure the database column of your field is large enough:

-- ext_tables.sql

CREATE TABLE my_table (
    new_field text
);

Content Blocks

You can use the new renderType in Content Blocks by adding the following configuration:

fields:
    -   identifier: new_field
        label: 'My JSON Field'
        type: Textarea
        renderType: jsonEditor

Configuration

You can configure the JSON Editor with the offical API by adding the settings to the options array:

$GLOBALS['TCA']['my_table']['columns']['my_field']['config']['options'] = [
    'mode' => 'tree'
];

The new option height controls the maximum height of the editor, it defaults to auto. Setting a value in pixels will set a fixed height to the editor.

License

This project is licensed under GNU General Public License 2.0 (or later).