JSON Formatter Tool

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools26.tsx instead.

Usage

The file also exports devtools26Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools26, devtools26Demo } from "@/components/blocks/devtools/devtools26";

export default function Page() {
  return <Devtools26 {...devtools26Demo} />;
}

Props

Behavior notes

• Validation is real: on every keystroke the current textarea value is run through JSON.parse in a try/catch, computed inline during render (not stored in its own state and not derived in an effect). The Valid/Invalid badge and the error text both come straight from that try/catch, so the message shown is whatever the JS engine's own parser reports, not a custom validator.
• Format runs JSON.stringify(JSON.parse(text), null, 2); Minify runs JSON.stringify(JSON.parse(text)). Both are wrapped in try/catch: if the current text fails to parse, the button click is a silent no-op and the text is left exactly as the user typed it, so they can see and fix the syntax error instead of having it discarded.
• Copy uses navigator.clipboard.writeText on the current textarea contents (not the initialValue), so it copies whatever state the editor is currently in, formatted, minified, or hand-edited.
• This block requires a browser clipboard API and local component state, so it is a "use client" component; initialValue is supplied once by the caller as the seed and is not re-synced afterward.