SLDS JSON Schema Renderer

A CLI tool that generates beautiful, interactive documentation from JSON schema files. The tool parses your JSON schemas and creates a static HTML site powered by Vue.js and the Salesforce Lightning Design System (SLDS). Demo

Features

• Schema Parsing: Automatically parses and validates JSON schema files
• SLDS Styling: Professional look and feel using Salesforce Lightning Design System
• Vue.js Frontend: Modern, component-based interface with Vue 3
• Static Output: Generate completely static HTML that can be hosted anywhere
• CLI Tool: Easy to use from the command line or as part of your build process
• Direct Icon Usage: Uses SLDS icons directly as SVG file for better performance

Installation

# Install globally
npm install -g slds-json-schema-renderer

# Or install locally in your project
npm install --save-dev slds-json-schema-renderer

Usage

Basic Usage

# Generate documentation from JSON schemas
json-schema-docs generate -i ./schemas -o ./docs

Command Options

Usage: json-schema-docs generate [options]

Generate documentation from JSON schema files

Options:
  -i, --input <directory>      Input directory containing JSON schema files (default: "./schemas")
  -o, --output <directory>     Output directory for the generated documentation (default: "./docs")
  -t, --title <title>          Documentation title (default: "JSON Schema Documentation")
  -d, --description <description>  Documentation description (default: "")
  -v, --verbose                Enable verbose output (default: false)
  -h, --help                   Display help for command

Examples

Generate documentation with a custom title and description:

json-schema-docs generate -i ./schemas -o ./docs -t "API Documentation" -d "Documentation for our REST API endpoints"

Development

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Setup

# Clone the repository
git clone https://github.com/yourusername/slds-json-schema-renderer.git
cd slds-json-schema-renderer

# Install dependencies
npm install

# Link for local development
npm link

Development Workflow

# Start the Vue development server (with hot reloading)
npm run dev

# Build the frontend only
npm run build:frontend

# Build the CLI code only
npm run build:cli

# Build everything
npm run build

Project Structure

slds-json-schema-renderer/
├── bin/                      # CLI executable
│   └── cli.js
├── src/                      # All source code
│   ├── frontend/            # Vue.js frontend application
│   │   ├── components/      # Vue components
│   │   ├── assets/          # Static assets
│   │   └── index.js         # Frontend entry point
│   └── templates/           # HTML templates
└── lib/                      # Compiled code (generated)

License

MIT

Author

PhyberApex