• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
wolf

wolf

PinoViewer

Public
Like
PinoViewer
Home
Code
4
backend
2
frontend
3
shared
1
README.md
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Code
/
Search
index.ts
https://wolf--573bd59c472111f0aa7476b3cceeab13.web.val.run
README.md

Log Viewer

A beautiful, interactive log viewer for structured JSON logs with filtering, search, and real-time capabilities.

Features

  • πŸ“Š High-Density Table View: Ultra-compact table showing maximum logs with all data visible
  • πŸ”„ Reverse Chronological Order: Most recent logs appear at the top
  • πŸ“‹ Complete Data Display: Shows ALL log data in a compact format, not just method names
  • πŸ” Advanced Filtering: Filter by log level, method, time range, and custom fields
  • 🎨 Syntax Highlighting: Color-coded log levels and JSON formatting
  • ⚑ Maximum Information Density: See 50+ logs at once in table view
  • πŸ“± Responsive Design: Works on desktop and mobile devices
  • πŸ”— Deep Linking: Share specific log views with URL parameters

Usage

  1. Visit the application at the deployed URL
  2. Paste your logs in the input area or upload a log file
  3. Click "Parse Logs" or use "Load Sample" to see example data
  4. Use the filters to narrow down the logs you want to see:
    • Filter by log level (trace, debug, info, warn, error, fatal)
    • Search across all log content
    • Filter by specific methods or hostnames
    • Set time range filters
  5. Switch between Table View (high-density) and List View (detailed)
  6. Click on individual log entries to expand and see detailed JSON view
  7. Use "Expand All" / "Collapse All" for bulk operations in List View

Log Format

The viewer supports structured JSON logs with fields like:

  • level: Log level (info, warn, error, debug)
  • time: Timestamp
  • method: Method name
  • msg: Log message
  • params: Additional parameters
  • Custom fields

Project Structure

β”œβ”€β”€ backend/
β”‚   β”œβ”€β”€ index.ts          # Main Hono server
β”‚   └── routes/
β”‚       └── logs.ts       # Log processing endpoints
β”œβ”€β”€ frontend/
β”‚   β”œβ”€β”€ index.html        # Main HTML template
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ App.tsx       # Main application component
β”‚   β”‚   β”œβ”€β”€ LogViewer.tsx # Log display component
β”‚   β”‚   └── LogFilters.tsx # Filter controls
β”‚   └── utils/
β”‚       └── logParser.ts  # Log parsing utilities
└── shared/
    └── types.ts          # Shared TypeScript types
HTTP
  • index.ts
    wolf--57…13.web.val.run
Code
backendfrontendsharedREADME.md
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
Β© 2025 Val Town, Inc.