Json Viewer

Display a JSON in a beautiful way with custom styles.

View on GitHubTry APP

Framework guides

Astro

Next.js

Getting Started

  1. Install the library:
bash
  1. Add the component:
jsx
// 📃 app.jsx
 
import { JsonViewer } from "@franmella/json-viewer";
 
export default function App() {
  return (
    <div>
      <JsonViewer />
    </div>
  );
}
  1. Usage:
jsx
// 📃 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>
  );
}