@pardnchiu/nanojson/dist/NanoJSON.css

A lightweight JSON editor built with pure JavaScript and native APIs. It features visual editing, dynamic type switching, and file import/export capabilities. Suitable for website embedding and JSON data editing.

.pd-json-editor{position:relative;display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;width:100%;box-sizing:border-box;-webkit-overflow-scrolling:touch;touch-action:manipulation;-ms-overflow-style:none;scrollbar-width:none;overflow:scroll}.pd-json-editor button{position:relative;display:flex;justify-content:center;align-items:center;background:none;border:none;min-width:2rem;height:2rem;line-height:2rem;cursor:pointer}.pd-json-editor button *{pointer-events:none}.pd-json-editor button[data-collapsible="1"][data-collapsed="0"]{transform:rotate(90deg)}.pd-json-editor button[data-collapsible="0"]{padding-left:1px}.pd-json-editor button[data-collapsible="0"]::before{content:"";position:absolute;top:0;left:15px;width:2px;background-color:#ddd;height:100%}.pd-json-editor button[data-collapsible="0"]::after{content:"";position:absolute;top:calc(50% - 1px);left:50%;width:.75rem;height:2px;background-color:#ddd}.pd-json-editor::-webkit-scrollbar{display:none}.pd-json-editor[data-fill="1"]{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;overflow:scroll}.pd-json-editor *{flex-shrink:0;margin:0;padding:0;border:none;outline:none;box-sizing:border-box;font-family:monospace,sans-serif;border:none;outline:none;object-fit:cover;appearance:unset;-webkit-appearance:unset;-moz-appearance:unset}.pd-json-editor>header{display:flex;flex-flow:column;gap:.5rem;margin-bottom:.5rem}.pd-json-editor>header strong{font-size:1.25rem}.pd-json-editor>header p{line-height:1.5rem;font-size:.875rem;letter-spacing:1px;color:rgba(0,0,0,.8)}.pd-json-editor>footer{display:flex;justify-content:flex-start;align-items:center;gap:.5rem}.pd-json-editor section.pd-json-editor-child{display:flex;align-items:flex-start;gap:.5rem}.pd-json-editor section.pd-json-editor-child section.pair-wrapper{display:flex;flex-direction:column;width:100%}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group{display:flex;align-items:flex-start;padding:.125rem 0}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group:has(select:focus) select,.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group:has(select:focus) textarea,.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group:has(textarea:focus) select,.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group:has(textarea:focus) textarea{border:1px solid rgba(0,0,0,.5019607843)}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group:has(select:focus) button:last-child,.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group:has(textarea:focus) button:last-child{opacity:1}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group:hover select,.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group:hover textarea{border:1px dashed rgba(0,0,0,.2039215686)}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group:hover button:last-child{opacity:1}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group>span{height:2rem;line-height:2rem}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group label{position:relative;display:flex;flex-flow:column;justify-content:center;align-items:center;gap:.25rem;margin:0;padding:0;min-height:2rem}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group label:has(textarea){min-width:2.75rem;background-color:#fff}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group label:has(svg){margin:0 .25rem;background-color:#fff}@media(hover: hover){.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group label:has(svg):hover{cursor:pointer}}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group label>svg{fill:#fff;width:2rem;height:2rem}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group label>svg path{fill:rgba(0,0,255,.5019607843)}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group label>select{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;background-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group pre{position:relative;z-index:0;padding:0 .5rem;line-height:2rem;min-height:2rem;font-size:.875rem;border-radius:.5rem;text-align:left}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group select{padding:0 .5rem;font-size:.875rem;line-height:1.875rem;min-height:1.875rem;box-sizing:border-box;border:1px dashed rgba(0,0,0,0);border-radius:.25rem;cursor:pointer}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group textarea{z-index:1;position:absolute;top:0;left:0;bottom:0;right:0;padding:0 .375rem;width:100%;line-height:2rem;min-height:2rem;color:rgba(0,0,0,0);caret-color:red;background-color:rgba(0,0,0,0);resize:none;font-size:.875rem;border-radius:.25rem;border:1px solid rgba(0,0,0,0);overflow:hidden}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group span.array-index{min-width:2rem;height:2rem;line-height:2rem;color:rgba(0,0,0,.8);text-align:center}.pd-json-editor section.pd-json-editor-child section.pair-wrapper section.input-group button:last-child{opacity:0;transform:rotate(45deg)}.pd-json-editor section.pd-json-editor-child section.pd-json-editor-nested-child{margin-left:calc(.875rem + 1px);border-left:.125rem solid #ddd;padding-left:1.5rem}.pd-json-editor .pd-json-editor-child[data-last="1"]>section.pair-wrapper>section.input-group>button[data-collapsible="0"]::before{height:50%}