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

or

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: "[email protected]" }
  });

  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",
    }
}

📜 License

MIT © 2025 [stalk94]