JSON Tools

Four components help while you build pages. They are meant for development and test pages, not for end users.

EccGenerateJsonOutputButton

Copies the current output of the page (all valueOut fields) as JSON to the clipboard - the fastest way to check your paths.

 
import { EccGenerateJsonOutputButton } from "@/ecc/components/forms/EccGenerateJsonOutputButton";

<EccGenerateJsonOutputButton />
<EccGenerateJsonOutputButton label="Copy output" />

EccGenerateJsonOutputButton is an EccButton with a fixed action: it accepts all props of EccButton except onClick, shows a confirmation after copying and uses the icon fa-solid fa-code by default. The output it copies is the same JSON the page submits - see Output in Component Basics.

EccOutputButton

A plain button with the same purpose and no props: it copies the page output as JSON and shows a confirmation for two seconds.

 
import { EccOutputButton } from "@/ecc/components/forms/EccOutputButton";

<EccOutputButton />

EccJsonEditor

A JSON editor with syntax highlighting, validation and folding.

 
import { EccJsonEditor, tryParseJson } from "@/ecc/components/forms/EccJsonEditor";

const [json, setJson] = useState("{}");
const [valid, setValid] = useState(true);

<EccJsonEditor label="Output" value={json} onChange={setJson} onValidChange={setValid} height={400} showPathCopy />
<EccJsonEditor label="Task" value={JSON.stringify(task, null, 2)} readOnly validate={false} />

tryParseJson(text) returns the parsed object or null.

EccJsonQuery

Try JSONPath expressions against any object - useful to find the right path for a field.

 
import { EccJsonQuery } from "@/ecc/components/forms/EccJsonQuery";

<EccJsonQuery data={task} defaultQuery="$.inputs.purchase.title" />

The dot path for a component is the JSONPath without $.: $.inputs.purchase.title becomes value="inputs.purchase.title".

Related