JavaScript Viewer

Read JavaScript with syntax highlighting, line numbers and an outline.

JavaScript Viewer – Read JS Code Comfortably

The JavaScript Viewer turns a wall of plain text into readable, colored source code. Paste a snippet or open a .js, .mjs, .cjs or .jsx file and the viewer highlights keywords, strings, numbers, comments and function names instantly. Nothing is uploaded: the file is read and rendered entirely in your browser.

What you see

  • Syntax highlighting powered by highlight.js, with five themes: GitHub Light, Monokai, Dracula, Visual Studio and Nord.
  • Line numbers that are not copied along with the code, so you can reference a line in a code review or bug report.
  • Wrap lines for long minified lines or embedded data URIs.
  • Outline – a list of imports, functions, classes, constructors, methods and arrow functions assigned to variables, each with its line number. It is the fastest way to understand the shape of an unfamiliar file.
  • Syntax check and statistics – the code is parsed with Acorn (latest ECMAScript, module or script). You get the number of lines, file size, functions, classes, imports and exports, or the exact line and column of the first syntax error.

Beautify before reading

Minified or badly indented code is hard to follow. Click Beautify to reformat it with Prettier (2-space indentation, consistent quotes and semicolons). The viewer then highlights the formatted result, and the outline points to the new line numbers.

When to use it

Use the viewer to inspect a script before adding it to your site, to read a bundle chunk from DevTools, to review a snippet someone sent you in chat, or to prepare a readable screenshot for documentation. If you want to run the code, switch to the JavaScript Tester; for a full HTML/CSS/JS sandbox use the JavaScript Playground. To only check for errors, the JavaScript Validator gives a detailed report.

Frequently Asked Questions

No. The file is read with the browser's FileReader, and highlighting, parsing and formatting all run locally in JavaScript. You can even use the page offline once it has loaded.

The outline is built from a real parse of the code, so it needs syntactically valid JavaScript. When there is a syntax error, the viewer still highlights the code and tells you the line and column of the error so you can fix it.

Highlighting works for JSX and most TypeScript, because the JavaScript grammar of highlight.js is tolerant. The syntax check and outline follow standard ECMAScript, so type annotations and JSX are reported as errors there.

Copy copies the plain source text. Line numbers are excluded from selection, so selecting the highlighted block also gives you clean code.