This guide walks you through the TritonParse web interface, helping you effectively analyze and visualize Triton kernel compilation traces.

Visit: https://pytorch-labs.github.io/tritonparse/

✅ Advantages:

• Always up-to-date with latest features
• No installation required
• Works on any device with a browser
• Supports all file formats

For contributors or custom deployments:

cd website
npm install
npm run dev

Access at http://localhost:5173

1. Click "Browse Files" or drag-and-drop files
2. Select .gz files from your parsed_output directory
3. The interface will automatically process and display kernels

1. Click "Load from URL"
2. Enter the URL to your trace file
3. Click "Load"

Direct link with parameters:

https://pytorch-labs.github.io/tritonparse/?json_url=YOUR_FILE_URL&view=ir_code_comparison&kernel_hash=KERNEL_HASH

This may not work for (Cross-Origin Resource Sharing) CORS restricted files.

Parameters:

• json_url: URL to your trace file
• view[optional]: overview or ir_code_comparison
• kernel_hash[optional]: Specific kernel to highlight

The interface consists of two main tabs:

1. 📊 Overview Tab - Kernel metadata and navigation
2. 🔍 Comparison Tab - Side-by-side IR code comparison

• Kernel List: Browse all kernels in the trace
• Kernel Details: Click any kernel to view detailed information
• Direct Navigation: Use IR links to jump to specific views

Basic Information:

• Kernel Name: Function name and signature
• Hash: Unique identifier for the kernel
• Grid Size: Launch configuration (e.g., (1024,))
• Block Size: Thread block dimensions
• Device: Target GPU device

Compilation Metadata:

• Compile Time: Time taken for compilation
• Memory Usage: Shared memory, register usage
• Optimization Flags: Compiler settings used

Python Source Context:

• File Path: Source file that triggered compilation
• Line Numbers: Exact location in your code
• Function Names: Call hierarchy
• Stack Trace: Complete compilation trigger path

Example Call Stack:

test_add.py:52 in test_tensor_add
  c_triton = tensor_add(a, b)
tensor_add.py:38 in tensor_add
  add_kernel[grid](a, b, c, n_elements, BLOCK_SIZE)

Quick access to different IR representations:

• 🔤 TTGIR - Triton GPU IR (high-level)
• 🔤 TTIR - Triton IR (language-level)
• 🔤 LLIR - LLVM IR (low-level)
• ⚡ PTX - NVIDIA assembly
• 🔥 AMDGCN - AMD assembly

Click any link to view the full IR code in a dedicated viewer.

Supported Data Types:

• Lists FP8, FP16, FP32 support
• Shows tensor type compatibility

Optimization Information:

• Vectorization settings
• Memory coalescing details
• Register allocation stats

The comparison tab shows two IR representations side-by-side:

Left Panel: Source IR (e.g., TTGIR) Right Panel: Target IR (e.g., PTX)

• Click any line in either panel
• Corresponding lines in the other panel will highlight
• Color-coded mapping shows transformation relationships

• Line-by-line correspondence between IR stages
• Transformation visualization shows how code changes
• Multi-line mappings for complex transformations

• Scroll synchronization (optional)
• Line number display
• Search functionality within code panels

Dropdown Menus:

• Left Panel: Choose source IR format
• Right Panel: Choose target IR format

Popular Combinations:

• TTGIR ↔ PTX - High-level to assembly
• TTIR ↔ LLIR - Language to LLVM IR
• LLIR ↔ PTX - LLVM to assembly

• Language-specific highlighting for each IR type
• Keywords, operators, and literals clearly distinguished
• Comment and annotation support

• Absolute line numbers for each IR
• Clickable lines for source mapping
• Highlighted regions for mapped sections

• Ctrl+F for in-panel search
• Jump to line functionality

Generate shareable links for specific views:

https://pytorch-labs.github.io/tritonparse/?json_url=YOUR_FILE&view=ir_code_comparison&kernel_hash=abc123

• Tab: Switch between Overview and Comparison
• Ctrl+F: Search within code panels
• Ctrl+G: Go to line number
• Esc: Close search/dialog boxes

• Copy Code: Right-click to copy IR code
• Save View: Bookmark current analysis state
• Screenshot: Browser screenshot for reports

Goal: Learn how Triton compiles kernels

Steps:

1. Start with simple kernel trace
2. Follow the pipeline: TTIR → TTGIR → LLIR → PTX
3. Use source mapping to see transformations
4. Understand:
   • How high-level operations become instructions
   • Where optimizations are applied
   • GPU-specific adaptations

• Chrome/Chromium 100+ (recommended)
• Firefox 100+
• Safari 14+
• Edge 100+

• Use latest browser for best performance
• Enable hardware acceleration for large files
• Clear browser cache if experiencing issues
• Use incognito mode for sensitive traces

• Browser dependent (typically 100MB+)
• Gzip compression helps with large traces
• Split large traces if needed

Symptoms: "Failed to load trace file" error

Solutions:

• Ensure using .gz files from parsed_output
• Check file isn't corrupted: zcat file.gz | head
• Try with smaller trace file first
• Clear browser cache and cookies

Symptoms: Click doesn't highlight corresponding lines

Solutions:

• Use .ndjson.gz files instead of .ndjson
• Ensure parsing completed successfully
• Check browser console for JavaScript errors

Symptoms: Interface is sluggish or unresponsive

Solutions:

• Use smaller trace files
• Enable hardware acceleration in browser
• Close other browser tabs
• Try different browser

Symptoms: Layout problems or missing elements

Solutions:

• Refresh the page
• Clear browser cache
• Try different browser
• Check browser console for errors

Enable debug logging in browser console:

// Open browser console and run:
localStorage.setItem('tritonparse-debug', 'true');
// Refresh page

• Dark/Light mode (respects system preference)
• Syntax highlighting themes
• Font size adjustment

• Panel sizing (drag to resize)
• Scroll synchronization toggle
• Line number display options

• Code formatting options
• Include metadata in exports
• File naming preferences

• Always check kernel metadata first
• Understand the compilation context
• Note any warnings or unusual values

• Click lines to see transformations
• Follow optimization patterns
• Identify transformation hotspots

• TTGIR → PTX: See final result
• TTIR → TTGIR: Understand GPU adaptation
• LLIR → PTX: Check code generation

• Memory access patterns
• Vectorization opportunities
• Register pressure indicators

• Take screenshots of important views
• Note line numbers for reference
• Share URLs with team members

After mastering the web interface:

1. Practice with Basic Examples
2. Explore Advanced Examples
3. Learn about File Formats
4. Check Performance Optimization guide
5. Join GitHub Discussions

• Usage Guide - Generating traces
• Installation Guide - Setup instructions
• Troubleshooting - Common issues
• FAQ - Frequently asked questions