ML JSON TextArea

The ML JSON TextArea is a smart, developer-friendly property editor designed specifically for managing JSON payloads within the Umbraco Backoffice. It features live validation, formatting tools, and a flexible UI.

⚙️ Configuration

Configure the editor in the Umbraco Data Type settings:

• Show Prettify Button: Enables a toolbar button to format the JSON with proper indentation.
• Show Minify Button: Enables a toolbar button to compress the JSON into a single line.
• Show Validation Button: Enables manual trigger for JSON format validation.
• Validate on Input: If enabled, the JSON is automatically validated while the user is typing.
• Number of Rows: Defines the initial height of the textarea.
• Auto Grow: If enabled, the textarea automatically expands its height to fit the content, eliminating the need for internal scrollbars.

💻 C# Data Retrieval (Value Converter)

The JSON data is stored as a standard string. You can retrieve it and deserialize it directly into your strongly typed C# models using System.Text.Json or Newtonsoft.Json.

var content = Umbraco.Content("your-node-guid");
string jsonString = content?.Value<string>("myJsonData");

if (!string.IsNullOrEmpty(jsonString)) 
{
    // Example: Deserialize into a custom model
    var myObject = System.Text.Json.JsonSerializer.Deserialize<MyCustomModel>(jsonString);
}

✅ Validation

The ML JSON TextArea ensures data integrity before saving:

• Format Validation: It prevents saving if the entered text is not a valid JSON. A clear error message is displayed beneath the field, indicating the exact parsing issue.
• Mandatory Toggle: Supports the native Umbraco mandatory check. If required, an empty field will trigger your custom mandatory message.

✨ Features

• Smart Toolbar: Quick actions for formatting and minifying data to keep the backoffice tidy.
• Live Visual Feedback: Invalid JSON is immediately highlighted with a red border and a warning icon, preventing accidental typos from breaking frontend implementations.
• Adaptive Sizing: Thanks to the Auto Grow feature, content creators get a seamless editing experience regardless of the payload size.