Postman JSON Path Picker visualizer

Postman-JSONPathPicker.js

const responseJson = pm.response.json();
const resJsonString = JSON.stringify(responseJson);

const template = `
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/jsonpath-picker.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/jsonpath-picker.min.js"></script>

    <style>
        pre {
            height: 90vh;
        }
        .path {

            height: 10vh;
            width: 100%;
        }

         ol, ul, li {
            font-size: 1.35rem;
        }

        li {
            margin-bottom: 0;
        }

        #json-renderer, pre, input {
            margin: 0;
            padding: 0;

            padding-left: 1em;
        }
    </style>
    
    <pre id="json-renderer"></pre>
    <input class="path" type="text" readonly>

    <script>
        const data = ${resJsonString};

        const jsonView = document.querySelector('#json-renderer');
        const pathDests = document.querySelectorAll('.path');

        JPPicker.render(jsonView, data, pathDests, {
            outputWithQuotes: true,
            pickerIcon: '#x7f7'
        });
        
    </script>
`;

pm.visualizer.set(template);