Preview JSON in a beautiful way

Documentation   ✦   Getting Started   ✦   Contribute   ✦   License

🪐 Features

• 🍂 Lightweight.
• ✅ Accessible.
• 🎨 Full customizable.
• 💙 Built completely with Typescript.

🚀 Getting Started

Important

This library requires React v18 or higher.

1. Install the library:

# Using npm:
npm install @franmella/json-viewer

# Using pnpm:
pnpm add @franmella/json-viewer

# Using yarn:
yarn install @franmella/json-viewer

2. Add the component:

// 📃 app.jsx

import { JsonViewer } from "@franmella/json-viewer";

export default function App() {
  return (
    <div>
      <JsonViewer />
    </div>
  );
}

3. Usage:

// 📃 app.jsx

import { JsonViewer } from "@franmella/json-viewer";

export default function App() {
  const json = {
    name: "John Doe",
    age: 30,
    cars: [
      { name: "Ford", models: ["Fiesta", "Focus", "Mustang"] },
      { name: "BMW", models: ["320", "X3", "X5"] },
      { name: "Fiat", models: ["500", "Panda"] },
    ],
  };

  return (
    <div>
      <JsonViewer data={json} />
    </div>
  );
}

Tip

📚 Visit the Documentation for more information.

🤝 Contributing

1. Click here to fork the repository.

2. Install dependencies:

# Install pnpm globally if you don't have it:
npm install -g pnpm

# and install dependencies:
pnpm install

3. Commands:

# Run all development server:
pnpm dev

# Build the library:
pnpm build

and create a pull request with your features or fixes 🚀✨.

📃 License

MIT License - franmella 2025.