This guide shows how to add real-time LaTeX math rendering to an ASP.NET app using Aspose.TeX for .NET. You will build a small web API that accepts LaTeX input, renders it to PNG, returns the image bytes with the correct content type, and caches results on disk. The walkthrough includes exact NuGet packages, minimal working code, security guards, and performance tips.
What you will build
An ASP.NET Core app with:
- Endpoint
POST /api/latex/png
that accepts LaTeX and returns a PNG image - Simple HTML page where users type an equation and see a live preview
- Disk caching keyed by a content hash and DPI
- Basic input validation and sandboxed working directories
- Endpoint
You can copy the code and run it as is.
Prerequisites
Windows, Linux, or macOS with .NET 6 or later
Visual Studio 2022 or VS Code with C# extension
NuGet package Aspose.TeX
dotnet add package Aspose.TeX
Aspose.TeX exposes
TeXOptions
,TeXConfig.ObjectLaTeX
,PngSaveOptions
,ImageDevice
,TeXJob
,InputFileSystemDirectory
, andOutputFileSystemDirectory
. You will use these to render LaTeX to PNG.
Project layout
Create an ASP.NET Core Web API project, then add a lightweight service plus a minimal HTML page.
AsposeTexDemo/
Program.cs
Services/
LatexRenderer.cs
wwwroot/
index.html
Service: LaTeX to PNG renderer
This service writes the LaTeX to a temporary .tex
file, runs the Aspose.TeX job, and returns the PNG bytes. It also implements a simple on-disk cache.
// File: Services/LatexRenderer.cs
using System.Security.Cryptography;
using System.Text;
using Aspose.TeX;
namespace AsposeTexDemo.Services;
public sealed class LatexRenderer
{
private readonly string _cacheRoot;
private readonly ILogger<LatexRenderer> _log;
public LatexRenderer(IWebHostEnvironment env, ILogger<LatexRenderer> log)
{
_cacheRoot = Path.Combine(env.ContentRootPath, "tex-cache");
Directory.CreateDirectory(_cacheRoot);
_log = log;
}
// Public entry point. Renders LaTeX to PNG and returns bytes.
public async Task<byte[]> RenderPngAsync(string latexBody, int dpi = 200, CancellationToken ct = default)
{
// Validate and normalize input
var normalized = NormalizeLatex(latexBody);
ValidateLatex(normalized);
// Cache key depends on content and dpi
var key = Hash($"{normalized}\n{dpi}");
var cacheDir = Path.Combine(_cacheRoot, key);
var cachePng = Path.Combine(cacheDir, "out.png");
if (File.Exists(cachePng))
{
_log.LogDebug("Cache hit: {Key}", key);
return await File.ReadAllBytesAsync(cachePng, ct);
}
Directory.CreateDirectory(cacheDir);
// Prepare a minimal document that wraps the math
var texDoc = BuildStandaloneDocument(normalized);
// Write the .tex source into an isolated working folder
var workDir = Path.Combine(cacheDir, "work");
Directory.CreateDirectory(workDir);
var texPath = Path.Combine(workDir, "doc.tex");
await File.WriteAllTextAsync(texPath, texDoc, Encoding.UTF8, ct);
// Configure Aspose.TeX conversion options
var options = TeXOptions.ConsoleAppOptions(TeXConfig.ObjectLaTeX);
options.InputWorkingDirectory = new InputFileSystemDirectory(workDir);
options.OutputWorkingDirectory = new OutputFileSystemDirectory(workDir);
var png = new PngSaveOptions
{
// If you want higher fidelity on HiDPI displays, raise this number
Resolution = dpi,
// When false, the ImageDevice buffers PNG bytes in memory so you can capture them without file I/O
// You can also leave the default (true) and read the file from disk. Both modes are shown below.
DeviceWritesImages = false
};
options.SaveOptions = png;
// Run the job; capture PNG bytes from the device
var device = new ImageDevice();
new TeXJob(texPath, device, options).Run();
if (device.Result == null || device.Result.Length == 0)
throw new InvalidOperationException("No PNG output generated by TeX engine.");
var pngBytes = device.Result[0];
// Persist into cache for the next request
await File.WriteAllBytesAsync(cachePng, pngBytes, ct);
// Clean up working files except cachePng if you want to keep cache slim
TryDeleteDirectory(workDir);
return pngBytes;
}
private static void TryDeleteDirectory(string dir)
{
try { if (Directory.Exists(dir)) Directory.Delete(dir, true); }
catch { /* swallow to avoid noisy logs in high traffic */ }
}
// Minimal, safe preamble for math using Object LaTeX
private static string BuildStandaloneDocument(string latexBody)
{
// With standalone class, the output image is tightly cropped around content
return
$@"\documentclass{{standalone}}
\usepackage{{amsmath}}
\usepackage{{amssymb}}
\begin{{document}}
{latexBody}
\end{{document}}";
}
// Allow plain math snippets like x^2 + y^2 = z^2 and also wrapped forms like \[ ... \]
private static string NormalizeLatex(string input)
{
input = input.Trim();
// If user did not wrap math, wrap in display math to get proper spacing
if (!(input.StartsWith(@"\[") && input.EndsWith(@"\]"))
&& !(input.StartsWith(@"$$") && input.EndsWith(@"$$")))
{
return $"\\[{input}\\]";
}
return input;
}
// Very conservative validation to avoid file inclusion or shell escapes
private static void ValidateLatex(string input)
{
// Disallow commands that can touch the filesystem or process environment
string[] blocked = {
@"\write18", @"\input", @"\include", @"\openout", @"\write", @"\read",
@"\usepackage", // preamble is fixed in BuildStandaloneDocument; avoid arbitrary packages
@"\loop", @"\csname", @"\newread", @"\newwrite"
};
foreach (var b in blocked)
{
if (input.Contains(b, StringComparison.OrdinalIgnoreCase))
throw new ArgumentException($"The LaTeX contains a forbidden command: {b}");
}
if (input.Length > 4000)
throw new ArgumentException("Equation too long. Please keep input under 4000 characters.");
}
private static string Hash(string s)
{
using var sha = SHA256.Create();
var bytes = sha.ComputeHash(Encoding.UTF8.GetBytes(s));
return Convert.ToHexString(bytes).ToLowerInvariant();
}
}
Web API: minimal ASP.NET Core endpoint
This defines a JSON contract, registers the renderer, and exposes a POST
endpoint that returns PNG.
// File: Program.cs
using System.Text.Json.Serialization;
using AsposeTexDemo.Services;
var builder = WebApplication.CreateBuilder(args);
// Optional: serve a simple static page for testing
builder.Services.AddDirectoryBrowser();
// Add the renderer
builder.Services.AddSingleton<LatexRenderer>();
// Configure Kestrel limits for small payloads
builder.WebHost.ConfigureKestrel(opt =>
{
opt.Limits.MaxRequestBodySize = 256 * 1024; // 256 KB per request is plenty for math
});
var app = builder.Build();
// Serve wwwroot for quick manual testing
app.UseDefaultFiles();
app.UseStaticFiles();
// DTOs
public record LatexRequest(
[property: JsonPropertyName("latex")] string Latex,
[property: JsonPropertyName("dpi")] int? Dpi
);
app.MapPost("/api/latex/png", async (LatexRequest req, LatexRenderer renderer, HttpContext ctx, CancellationToken ct) =>
{
if (string.IsNullOrWhiteSpace(req.Latex))
return Results.BadRequest(new { error = "Missing 'latex'." });
int dpi = req.Dpi is > 0 and <= 600 ? req.Dpi.Value : 200;
try
{
var bytes = await renderer.RenderPngAsync(req.Latex, dpi, ct);
ctx.Response.Headers.CacheControl = "public, max-age=31536000, immutable";
return Results.File(bytes, "image/png");
}
catch (ArgumentException ex)
{
return Results.BadRequest(new { error = ex.Message });
}
catch (Exception ex)
{
// Hide engine details from clients; log the exception server-side if needed
return Results.StatusCode(500);
}
});
// Health check
app.MapGet("/health", () => Results.Ok(new { ok = true }));
app.Run();
Simple test page
Drop this into wwwroot/index.html
to try the API in a browser without any front-end framework.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Aspose.TeX LaTeX Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:2rem;line-height:1.4}
textarea{width:100%;height:8rem}
.row{display:flex;gap:1rem;align-items:flex-start;margin-top:1rem;flex-wrap:wrap}
.card{border:1px solid #ddd;border-radius:8px;padding:1rem;flex:1 1 320px}
img{max-width:100%;height:auto;border:1px solid #eee;border-radius:4px;background:#fff}
label{font-weight:600}
input[type=number]{width:6rem}
.muted{color:#666;font-size:.9rem}
.error{color:#b00020}
</style>
</head>
<body>
<h1>Real-time LaTeX to PNG with Aspose.TeX</h1>
<p class="muted">Type LaTeX math and click Render. The server returns a PNG image rendered by Aspose.TeX.</p>
<div class="card">
<label for="latex">LaTeX</label><br />
<textarea id="latex">x^2 + y^2 = z^2</textarea><br />
<label for="dpi">DPI</label>
<input id="dpi" type="number" min="72" max="600" value="200" />
<button id="btn">Render</button>
<div id="msg" class="error"></div>
</div>
<div class="row">
<div class="card">
<h3>Preview</h3>
<img id="preview" alt="Rendered equation will appear here" />
</div>
<div class="card">
<h3>cURL</h3>
<pre id="curl" class="muted"></pre>
</div>
</div>
<script>
const btn = document.getElementById('btn');
const latex = document.getElementById('latex');
const dpi = document.getElementById('dpi');
const img = document.getElementById('preview');
const msg = document.getElementById('msg');
const curl = document.getElementById('curl');
function updateCurl() {
const payload = JSON.stringify({ latex: latex.value, dpi: Number(dpi.value) }, null, 0);
curl.textContent =
`curl -s -X POST http://localhost:5000/api/latex/png \
-H "Content-Type: application/json" \
-d '${payload}' --output out.png`;
}
updateCurl();
[latex, dpi].forEach(el => el.addEventListener('input', updateCurl));
btn.addEventListener('click', async () => {
msg.textContent = '';
img.src = '';
try {
const payload = { latex: latex.value, dpi: Number(dpi.value) };
const res = await fetch('/api/latex/png', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
msg.textContent = err.error || `Error ${res.status}`;
return;
}
const blob = await res.blob();
img.src = URL.createObjectURL(blob);
} catch (e) {
msg.textContent = 'Request failed.';
}
});
</script>
</body>
</html>
Run the project
dotnet run
Open http://localhost:5000
or http://localhost:5173
depending on your launch profile. Type an equation and click Render. The preview updates with server-side PNG output.
Configuration and deployment notes
Aspose.TeX license If you have a license file, set it during startup to remove evaluation limits.
// in Program.cs, before first use // new Aspose.TeX.License().SetLicense("Aspose.Total.lic");
Cache location The renderer writes cache files under
tex-cache/
in the content root. On Linux or containerized deployments you can mount this path on a persistent volume. Clean it on a schedule if needed.Request size limits The example caps request size at 256 KB. Increase if you support larger inputs.
Cross-origin access If you serve the API from a different origin than the site, enable CORS accordingly.
Security checklist
- The service rejects potentially dangerous commands like
\input
,\include
, and\write18
. Keep the allowlist tight and keep the preamble fixed inBuildStandaloneDocument
. - Restrict input length to block pathological payloads.
- Render in a unique working directory per request and delete the directory after success. The sample keeps only the cached PNG.
- Consider rate limiting at the reverse proxy or API gateway level for public sites.
Performance tips
- Use disk cache to avoid recomputing the same equations. The sample hashes LaTeX plus DPI to deduplicate results.
- Keep DPI between 150 and 300 for most UI needs. Higher DPI increases render time and image size.
- Warm up the app by rendering a common formula at startup if you want the first user request to be instant.
- If you need vector output for zoomable content, switch to
SvgSaveOptions
andSvgDevice
, then embed the SVG. The rest of the pipeline is the same.
Troubleshooting
- Blank output or errors
Check server logs. If the LaTeX uses packages outside the fixed preamble, remove them. The sample blocks
\usepackage
in user input by design. - Clipping or large margins
The
standalone
document class usually trims margins tightly. If you still see extra space, wrap with\[
and\]
for display math or remove them for inline size. - Jagged text
Increase
PngSaveOptions.Resolution
. At 200 to 300 DPI most UI cases look crisp.
API quick reference used in code
TeXOptions.ConsoleAppOptions(TeXConfig.ObjectLaTeX)
: creates options for the Object LaTeX enginePngSaveOptions
: controls PNG output withResolution
andDeviceWritesImages
ImageDevice
: buffers PNG results in memory whenDeviceWritesImages = false
TeXJob(texPath, device, options).Run()
: compiles the.tex
file into the deviceInputFileSystemDirectory
andOutputFileSystemDirectory
: define the working directories for input and output
With these building blocks your ASP.NET app can render LaTeX on demand, cache results, and serve crisp PNG equations reliably.