React JSON Editor (Tailwind)

Beautiful and customizable JSON editor for React with Tailwind CSS design, editable fields, and theme customization.
Supports editing, adding/removing fields, changing types (string, number, boolean, null, object, array) and nested structures.

🚀 Installation

npm install react-json-editor-tw

yarn add react-json-editor-tw

📦 Usage

import React, { useState } from "react";
import JsonEditor from "react-json-editor-tw";

export default function App() {
  const [data, setData] = useState({
    name: "John",
    age: 30,
    active: true,
    tags: ["react", "tailwind"],
    profile: { email: "test@example.com" }
  });

  return (
    <div className="p-4">
      <JsonEditor
        value={data}
        onChange={setData}
        defaultCollapsed={false}
      />
    </div>
  );
}

🎨 Features

📂 Expandable/collapsible objects & arrays
🖊 Editable fields (strings, numbers, booleans, nulls)
➕ Add/remove keys & array items
🔄 Change field type (string, number, boolean, null, object, array)
🎨 Tailwind-based design with theme customization
⚡ Lightweight, React-friendly component

⚙ Props

Prop	Type	Default	Description
`value`	`any`	—	JSON data to display
`onChange`	`(newVal: any) => void`	—	Callback when value changes
`defaultCollapsed`	`boolean`	`false`	Collapse all by default
`theme`	`object`	built-in	Customize colors, fonts, spacing
`expandedPaths`	`string[]`	—	Force expand/collapse nodes
`onDelete`	`(key: string) => void`	—	Handle deletion
`onRename`	`(oldKey: string, newKey: string)`	—	Handle rename of keys

🎨 Theme Example

const theme = {
  fontSize: 14,
    step: 8,
    fontFamily: "monospace",
    lineHeight: 1.4,
    colors: {
        key: "#61afef",
        string: "#a0d57a",
        number: "#e79b55",
        boolean: "#c678dd",
        null: "#c678dd",
        brackets: "#6c6c6c",
        colon: "#abb2bf",
        border: "#3e4451",
        type: "#6c6c6c",
        array: "#6c6c6c",
        object: "#6c6c6c",
        index: "#6c6c6c",
        pick: "#61afef",
    }
}

Package detail

react-json-editor-tw

readme