---
canonical: https://amplience.com/developers/docs/release-notes/2025/next-gen-code-editor/
title: Next Generation Authoring, code editor and bug fixes
description: This release introduces a new code editor input component for Next Generation Authoring. We've also fixed some bugs.
audience: Business User
image: https://cdn.media.amplience.net/i/ampproduct/code-editor-1?w=1200&h=630
image_width: 1200
image_height: 630
date_published: 2025-01-16
date_modified: 2025-04-30
---

# Next Generation Authoring- code editor

**Release date: 22nd January 2025**

In this release we've made some enhancements to [Next Generation Authoring](https://amplience.com/developers/docs/schema-reference/), improved performance and fixed some bugs.

The [new code editor](#the-code-editor) input field component allows you to add an editable text field formatted for a range of languages including JavaScript, JSON and HTML. This is useful if you're adding bespoke HTML or CSS to some of your pages, during your site development, for example.

We've also made some improvements to the way that [extensions](#extension-header-and-locale-fields) are displayed, allowing you to choose whether header information, such as title, description and locale label, are shown.

## About Next Generation Authoring

Next Generation Authoring provides an enhanced authoring experience, with features for users and developers. It's currently switched off by default and we encourage you to [switch it on](https://amplience.com/developers/docs/schema-reference/) and start making use of the new features, including:

- An [enhanced "look and feel"](https://amplience.com/developers/docs/schema-reference/) available "out of the box" when you switch on Next Generation Authoring

- New developer features such as [customizable input fields](https://amplience.com/developers/docs/schema-reference/) and schema enhancements such as [conditionals](https://amplience.com/developers/docs/schema-reference/)

- Control over [form layout](https://amplience.com/developers/docs/schema-reference/) using tabs, grids and dividers

<video controls width="100%"  crossorigin="anonymous" protocol="https" preload="none" poster="https://cdn.media.amplience.net/v/ampproduct/tabs_grids_and-dividers-1?protocol=https">
    <source src="https://cdn.media.amplience.net/v/ampproduct/tabs_grids_and-dividers-1/mp4_720p?protocol=https"/>
    <source src="https://cdn.media.amplience.net/v/ampproduct/tabs_grids_and-dividers-1/webm720p?protocol=https"/>
    <source src="https://cdn.media.amplience.net/v/ampproduct/tabs_grids_and-dividers-1/mp4_480p?protocol=https"/>
    <source src="https://cdn.media.amplience.net/v/ampproduct/tabs_grids_and-dividers-1/webm480p?protocol=https"/>
    <source src="https://cdn.media.amplience.net/v/ampproduct/tabs_grids_and-dividers-1/mp4_240p?protocol=https"/>
<track
label="English"
kind="captions"
srclang="en"
src="https://cdn.c1.amplience.net/c/ampproduct/tabs_grids_and-dividers-1-captions-en-GB"/>
</video>

- [Content palettes](https://amplience.com/developers/docs/schema-reference/) to make it easier to work with flexible lists of different types of content

Visit the [What's new](https://amplience.com/developers/docs/schema-reference/) page for an introduction to the new features.

## The code editor

The code editor is used in the same way as any other input field component that works with a string field. You can specify validation and set it to read only, as well as setting some default text, useful if you want to add some boilerplate code.

The `language` parameter in the component settings allows you to format the text for the language you require (HTML, CSS, JavaScript, Typescript, jsx and tsx are supported).

The example below shows a code editor component field formatted for HTML. The syntax highlighting and formatting makes it easier to spot any errors, while the output is just a JSON string. Right-click to access a menu with additional formatting options.

![The code editor component showing some HTML](https://cdn.media.amplience.net/i/ampproduct/code-editor-1?w=1880&fmt=png 'The code editor component showing some HTML')

See the [code editor component reference](https://amplience.com/developers/docs/schema-reference/) for more information and an example. We've also included a [schema example](https://amplience.com/developers/docs/schema-reference/).

## Extension header and locale fields

A new `withHeader` setting in extension parameters allows you to choose to display header information for extensions, including the locale label for localized extensions and the title and description.

The example below shows the locale labels shown for the Generative rich text editor extension attached to a [field level localized](https://amplience.com/developers/docs/dev-tools/guides-tutorials/localization/) property.

![You can now choose to display the locale label on localized extensions](https://cdn.media.amplience.net/i/ampproduct/localized-extension-1?w=1880&fmt=png 'You can now choose to display the locale label on localized extensions')

You can find more details and an example on the [What's new](https://amplience.com/developers/docs/schema-reference/) page.

## Fixed issues

This release also includes fixes for a number of bugs. The [FAQs](https://amplience.com/developers/docs/schema-reference/) page is regularly updated with the latest bug fixes and outstanding issues.

## Related pages

[Next Generation Authoring](https://amplience.com/developers/docs/schema-reference/)

[Code editor component reference](https://amplience.com/developers/docs/schema-reference/)

[Extension headers example](https://amplience.com/developers/docs/schema-reference/)