Chrome Web Store: API Response Formatter
Firefox Add-ons: API Response Formatter

npm install @api-formatter/core

npm install -g @api-formatter/cli

# Format a JSON file
api-format input.json --output formatted.json --indent 2
 
# Validate JSON from URL
api-format --url https://api.example.com/users --validate
 
# Generate TypeScript interfaces
api-format response.json --generate-types --output types.ts
 
# Compare two API responses
api-format --diff response1.json response2.json

import { JSONFormatter, SchemaGenerator } from '@api-formatter/core';
 
const formatter = new JSONFormatter({
  indent: 2,
  sortKeys: true,
  removeEmpty: false
});
 
// Format JSON response
const apiResponse = `{"users":[{"id":1,"name":"John","email":"john@example.com"}]}`;
const formatted = formatter.format(apiResponse);
 
console.log(formatted);
// Output: Pretty-printed JSON with proper indentation
 
// Generate schema
const schemaGenerator = new SchemaGenerator();
const schema = schemaGenerator.generate(JSON.parse(apiResponse));
 
console.log(schema);
// Output: JSON Schema definition

import { JSONViewer, SchemaViewer } from '@api-formatter/react';
 
function APIDebugger({ response }) {
  return (
    <div>
      <h3>API Response</h3>
      <JSONViewer 
        data={response}
        theme="dark"
        expandLevel={2}
        showLineNumbers={true}
        enableClipboard={true}
      />
      
      <h3>Generated Schema</h3>
      <SchemaViewer 
        data={response}
        showTypes={true}
        generateExamples={true}
      />
    </div>
  );
}

const response = {
  "users": [
    {
      "id": 1,
      "name": "John Doe",
      "email": "john@example.com",
      "active": true,
      "profile": {
        "age": 30,
        "location": "New York"
      }
    }
  ]
};
 
const schema = schemaGenerator.generate(response);
// Generates comprehensive JSON Schema with types, required fields, etc.

// Generated from API response
interface User {
  id: number;
  name: string;
  email: string;
  active: boolean;
  profile: {
    age: number;
    location: string;
  };
}
 
interface APIResponse {
  users: User[];
}

const differ = new ResponseDiffer();
const diff = differ.compare(response1, response2);
 
console.log(diff);
// Output: Detailed diff showing added, removed, and modified fields

const analyzer = new ResponseAnalyzer();
const analysis = analyzer.analyze(response);
 
console.log(analysis);
// Output: {
//   size: "2.3 KB",
//   fields: 15,
//   depth: 3,
//   suggestions: ["Remove empty fields", "Compress nested objects"]
// }

const formatter = new JSONFormatter({
  indent: 2,                    // Indentation spaces
  sortKeys: true,              // Sort object keys alphabetically
  removeEmpty: false,          // Remove empty objects/arrays
  maxDepth: 10,               // Maximum nesting depth
  theme: 'dark',              // Syntax highlighting theme
  showTypes: true,            // Show data types in comments
  compactArrays: false        // Keep arrays on single line if short
});

const validator = new JSONValidator({
  strict: true,               // Strict JSON parsing
  allowComments: false,       // Allow JavaScript-style comments
  allowTrailingCommas: false, // Allow trailing commas
  maxSize: '10MB',           // Maximum file size
  schema: customSchema       // Validate against custom schema
});

# Format JSON file
api-format file.json
 
# Format from stdin
echo '{"name":"John"}' | api-format
 
# Validate JSON
api-format --validate response.json
 
# Minify JSON
api-format --minify large-response.json

# Generate TypeScript types
api-format --types response.json --output types.ts
 
# Compare responses
api-format --diff old.json new.json --format html
 
# Analyze performance
api-format --analyze response.json --report
 
# Convert to other formats
api-format --convert yaml response.json

const { formatMiddleware } = require('@api-formatter/express');
 
app.use('/api', formatMiddleware({
  development: true,
  prettyPrint: true
}));

const APIFormatterPlugin = require('@api-formatter/webpack');
 
module.exports = {
  plugins: [
    new APIFormatterPlugin({
      formatResponses: true,
      generateSchemas: true
    })
  ]
};