Input - JSON

A text area formatted for JSON data input and syntax validation

Planned/Backlog
Show details
Planned/Backlog
Published: May 22, 2023
Updated: February 21, 2024

Overview

The JSON Input component empowers marketers to input and manipulate JSON data directly within the interface, facilitating efficient data management and configuration processes. This component enhances user experience by providing a user-friendly interface for handling JSON data without the need for external tools or editors.

🟢 JSON / :read-only=false, Orientation=vertical

 

Design

Structure

The JSON Input component consists of an input field where marketers can enter JSON data manually or paste it from external sources. It may include features such as syntax highlighting, auto-indentation, and error validation to assist users in inputting and formatting JSON content effectively.

 

Variants

Orientation (label)

Depending on the structure of the parent form, the label of this input can be vertical or horizontal.

Vertical label

Vertical label

Use in most cases; works best when the rest of the form has vertical inputs.

Horizontal label

Horizontal label

Used in ‘Details’ cards in the campaign and template editor, or in forms that use horizontal inputs.

 

States

Editable

Editable

Allows marketers to edit the JSON data directly within the interface

Read-only

Read-only

Displays the JSON input field in a non-editable state, allowing marketers to view the existing JSON data.

 

Guidelines

Use cases

  • Use the JSON Input component in interfaces where marketers need to input or manipulate JSON data, such as campaign/template/journey configuration screens, user profile management, or previewing a message as a specific user
  • Implement the component in forms or input fields where JSON data is required as part of the user input
  • Validate JSON data input to prevent syntax errors and ensure the integrity of the data
  • If possible, integrate features like syntax highlighting and auto-indentation to improve readability and facilitate error-free input
  • Do test the JSON Input component with a variety of JSON data structures and edge cases to ensure robustness and compatibility
  • Avoid overwhelming marketers with unnecessary features or complexity that may hinder the input process or confuse them

 

Content

Include informative labels or headings to indicate the purpose of the JSON input field and provide guidance on formatting JSON data correctly. Offer examples or sample JSON structures to assist marketers in inputting data accurately.

Accessibility

  • Use semantic HTML elements and appropriate ARIA attributes to enhance screen reader compatibility and provide context for the JSON Input component
  • Ensure that keyboard navigation is supported, allowing marketers to interact with the input field and navigate through the JSON data efficiently

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Planned/Backlog