kafbat/kafka-ui

Format example JSON message in "Produce Message"

Open

#1,244 opened on Aug 6, 2025

View on GitHubContributor guide
 (13 comments) (0 reactions) (2 assignees)TypeScript (363 forks)auto 404
area/messagesarea/uxgood first issuehacktoberfestscope/frontendstatus/triage/completedtype/enhancement

Repository metrics

Stars
 (2,554 stars)
PR merge metrics
 (PR metrics pending)

Description

Issue submitter TODO list

  • I've searched for an already existing issues here
  • I'm running a supported version of the application which is listed here and the feature is not present there

Is your proposal related to a problem?

The proposal is related to the formatting in "produce message" modal, on example from Schema Registry.

Describe the feature you're interested in

Hey!

I have searched for similar issue but can't find such so I created this one. Would it be possible to format this example json value in "publish message" modal?

Currently it is an unformatted string. Would me awesome if it could be formatted as in old kafka-ui. (Or maybe it can be but I don't see a setting for that?)

Cheers

Describe alternatives you've considered

Autoformatting of such message would be best Else, a toggle/button that formats if when clicked on

Version you're running

1.3.0

Additional context

No response

Contributor guide

Research direction
Locate the 'Produce Message' modal component. Find where the example JSON from Schema Registry is displayed and add pretty printing/formatting for the JSON value.
Tech stack
typescript
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75