Serilog.Viewer 1.2.0

<div align="center"> <img src="src/Serilog.Viewer.React/src/log-viewer-icon.png" alt="Serilog.Viewer" width="120" /> <h1>Serilog.Viewer</h1> <p>A lightweight, embeddable log viewer for ASP.NET Core applications using Serilog structured logging.<br/>Browse, filter, and search log files through a modern React UI — served directly from your running application.</p>

</div>

Screenshots

Features

• Dashboard — at-a-glance stats with charts for errors, warnings, and log volume over time
• Log Explorer — paginated log browser with full-text search, level filtering, and date range selection
• Live Tail — real-time streaming of new log entries via SignalR (optional add-on)
• Multiple log formats — parses plain-text (.log/.txt) and CLEF compact JSON (.clef/.json)
• Basic Authentication — optional username/password gate for the /logviewer route
• Multi-framework — targets .NET 8 and .NET 9

Packages

Package	NuGet	Description
Serilog.Viewer		Core middleware, log reading, and React UI
Serilog.Viewer.Realtime	(coming soon)	Optional SignalR extension for live log tailing

Getting Started

1. Install the NuGet package

dotnet add package Serilog.Viewer

2. Configure Serilog to write log files

Log.Logger = new LoggerConfiguration()
    .WriteTo.File(
        new CompactJsonFormatter(),
        "Logs/log-.clef",
        rollingInterval: RollingInterval.Day)
    .CreateLogger();

var builder = WebApplication.CreateBuilder(args);
builder.Host.UseSerilog();

3. Register services and map middleware

builder.Services.AddLogViewer(options =>
{
    options.LogFolder = "Logs";
});

var app = builder.Build();

app.UseLogViewer();
app.Run();

4. Open the viewer

Navigate to /logviewer in your browser.

Configuration

All options are set via the LogViewerOptions lambda passed to AddLogViewer:

Example — custom path and Basic Auth

builder.Services.AddLogViewer(options =>
{
    options.LogFolder = Path.Combine(AppContext.BaseDirectory, "Logs");
    options.BasePath = "/admin/logs";
    options.EnableBasicAuth = true;
    options.Username = "admin";
    options.Password = "s3cr3t";
});

Real-time Log Tailing

Install the optional SignalR add-on:

dotnet add package Serilog.Viewer.Realtime

Chain .AddLogViewerRealtime() onto the builder:

builder.Services.
    .AddLogViewer(options => { options.LogFolder = "Logs"; })
    .AddLogViewerRealtime();

A Live Tail tab will appear in the UI. No SignalR client code is required — the bundled React app handles it automatically. Applications that do not call AddLogViewerRealtime incur zero SignalR overhead.

Supported Log Formats

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes following Conventional Commits: git commit -m "feat: add my feature"
4. Push to your fork: git push origin feature/my-feature
5. Open a Pull Request against main

Building locally

# Backend
dotnet build

# Frontend (inside src/Serilog.Viewer.React)
npm install
npm run build

Run the sample host to see the viewer in action:

dotnet run --project src/SampleHost
# then visit http://localhost:<port>/logviewer

License

MIT © Sreejith — see LICENSE for details.