@jsonpath-tools/jsonpath-editor-react

Documentation | NPM Package

Advanced JSONPath (RFC 9535) editor for React.

Quickstart

Installation:

npm install @jsonpath-tools/jsonpath-editor-react

Basic usage:

import { useState } from "react";
import { JSONPathEditor } from "@jsonpath-tools/jsonpath-editor-react";
import { defaultQueryOptions, jsonSchemaToType } from "@jsonpath-tools/jsonpath";

const queryArgumentType = jsonSchemaToType({ schema: queryArgumentSchema });

export default function Example() {
    const [value, setValue] = useState(`$..inventory.*`);
    return (
        <JSONPathEditor
            value={value}
            onValueChange={setValue}
            queryOptions={defaultQueryOptions}
            queryArgument={queryArgument}
            queryArgumentType={queryArgumentType} />
    );
}

It should look like this:

More information