TUF Explorer

A modern web application to visualize and explore TUF (The Update Framework) metadata files directly in your browser.

Features

• Browser-based visualization of TUF JSON files – no server required
• Drag-and-drop interface for easy file upload
• Human-friendly display of TUF metadata structures
• Interactive visualization of:
  • Root metadata
  • Targets metadata
  • Snapshot metadata
  • Timestamp metadata
  • Key information
  • Delegations
• Real-time validation of required files and integrity checks
• Dark mode support for better readability
• Structured view of repository state
• Detailed metadata inspection with expandable sections

Screenshots

Before: Old TUF Explorer

After: Updated TUF Explorer

Home Page – This is the home page where users are prompted to upload files.

File Upload Confirmation – The uploaded file gets a green checkmark, indicating successful upload.

TUF Repository State – Displays details such as "Role, Type, Signing starts, Expires, Version, Signers, and Actions."

JSON File Details – Shows detailed information about each JSON file.

Raw JSON Data Option – A checkbox to toggle the display of raw JSON data.

TUF Explorer Evolution: Technical Comparison

1. File Handling

Aspect	Old Version	New Version
Implementation	Server-side file reading	Client-side file processing
Code Example	typescript export function readFile(path: string) { return readFileSync(rootDir + "/" + path); }	typescript async function handleFiles(files: FileList) { for (const file of files) { const content = await file.text(); } }
Dependencies	Node.js fs module	Browser File API
Security	File system access required	Sandboxed browser environment
Performance	Disk I/O dependent	Memory-based processing
Scalability	Limited by server resources	Limited by browser resources
Error Handling	Server-side errors	Client-side validation
File Size Limits	Server configuration dependent	Browser limitations
Access Control	File system permissions	User selection only
Real-time Updates	Requires file system monitoring	Immediate on upload

Quick Start

Option 1: Direct Browser Usage

1. Visit TUF Explorer
2. Drag and drop your TUF JSON files
3. Explore your TUF metadata structure

Option 2: Local Development

# Clone the repository
git clone https://github.com/YourOrg/tuf-explorer.git
cd tuf-explorer

# Install dependencies
npm install

# Start development server
npm run dev

Option 3: Docker

# Build the container
docker build -t tuf-explorer .

# Run the container
docker run -p 3000:3000 tuf-explorer

Required Files

TUF Explorer expects the following files:

• root.json - Root of trust metadata
• targets.json - Target files metadata
• snapshot.json - Snapshot metadata
• timestamp.json - Timestamp metadata
• delegations.json - (Optional) Delegated targets metadata
• keyinfo.json - (Optional) Key information

Usage

1. Upload Files:

   • Drag and drop your TUF JSON files into the upload area
   • Or use the "Browse Files" button to select files

2. View Repository State:

   • Once all required files are uploaded, you'll see the repository state
   • View details of each metadata file
   • Inspect key relationships, roles, and delegations

3. Explore Metadata:

   • Click "View Details" on any file to see its structured content
   • Toggle between raw JSON and structured view
   • Examine signatures, delegations, and key information
   • Use the dark mode for improved readability

Security Considerations

• TUF Explorer runs entirely in your browser
• No data is sent to any server – all processing happens locally
• No persistent storage – files are only used in your session
• Metadata integrity checks ensure file consistency
• Always verify TUF metadata from trusted sources

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the Apache-2 License – see the LICENSE file for details.

Acknowledgments

• The Update Framework (TUF)
• Built with SvelteKit