JPKCom DB

Source Viewer — Manual

Full feature reference for the Source Viewer: input paths, every editor function, the proxy architecture with SSRF protection and limits, and the highlighting.

Back to the overview: Source Viewer · Open the tool live: www.jpkc.com/tools/source/

This manual describes the Source Viewer in full: how content gets into the editor, what each function does, how the server-side proxy works when loading a URL, and what technical limits apply. The tool's interface is in English, so button and menu labels are given in their original spelling.

The three input paths

There are three ways to get content into the editor:

  1. Paste or type. Click into the editor and paste code with Ctrl+V, or just start typing. Dedicated buttons for Cut, Copy, and Paste sit in the toolbar; highlighting kicks in as soon as the right language is selected.
  2. Open a local file. The Open button (folder icon) opens a file dialog via the HTML5 File API. The file is read entirely in the browser — it never leaves your machine.
  3. Load from URL. Enter an absolute http(s) address in the URL field at the top and click Load. The source is fetched server-side (see proxy architecture) and written into the editor.

Important when loading a URL: after the fetch, the tool always sets the editor language to HTML, regardless of the actual file type. If you load a .css or .js file, for example, switch the language manually afterward via the language selector so the highlighting matches.

Your work is auto-saved to local browser storage (localStorage) — including the chosen language and the last URL you entered. The storageStatus badge (disk icon) shows the storage state. On your next visit the editor restores the content (toast "Content restored from local storage."). New starts an empty file, Clear (trash) empties the editor.

The editor and syntax highlighting

The editor is built on the ACE Editor — the same engine that powers the Source Code tab of the SEO & GEO Analyzer.

Languages and highlighting

You pick the language mode via the language selector (dropdown, top right). The list covers over 100 languages: a group of common languages at the top (HTML, CSS, JavaScript, TypeScript, JSON, JSX, TSX, Vue, LESS, SASS, SCSS, Markdown, MySQL, PHP, Python, Text, Twig, XML, YAML), followed alphabetically by the full rest — from ABAP, Assembly, and C/C++ through Dockerfile, Go, Kotlin, Lua, Rust, and Swift to Terraform, Verilog, and XQuery. The editor starts in HTML mode by default.

The highlighting itself is provided by ACE through its language modes; there is no content-based auto-detection of the language — you select the mode actively. Also active: linting (syntax checking via workers), autocomplete (basic, snippets, and live suggestions), and highlighting of the word under the cursor.

Themes

The settings dialog (Settings) offers two dark themes: Dracula (default) and Monokai. There is no light theme in the editor; the Markdown/text preview, by contrast, renders on a light background.

Editing, navigating, searching

  • Undo/Redo, Indent/Outdent, font size +/−, line wrap toggle, and fullscreen (toggle) are toolbar buttons.
  • The More tools menu (three dots) gives you Go to Line (Ctrl+G), Find (Ctrl+F), Replace (Ctrl+H), and Print, plus the Keyboard Shortcuts and Settings dialogs.
  • The Keyboard Shortcuts dialog lists every shortcut — file, navigation, search, editing, selection, and code folding. Examples: Ctrl+D duplicate line, Alt+↑/↓ move line, Ctrl+/ toggle comment, Ctrl+Shift+L select all occurrences, Alt+0 fold all.

Settings

The Settings dialog controls: font size (8–32 px), tab size (2/4/8 spaces), theme (Dracula/Monokai), word wrap, visible whitespace, indent guides, line numbers (gutter), active-line highlight, autocomplete, and linting. Reset to Defaults restores the standard values.

Convert and preview

Beautify

The Beautify button (magic wand) formats the content with the JS Beautifier. Which routine runs depends on the input: in CSS mode the CSS routine runs; otherwise the content decides — if it starts with a < tag the HTML routine kicks in, else the JavaScript routine (which also indents JSON sensibly). Other modes such as LESS/SASS/SCSS therefore trigger the JavaScript routine, not the CSS one — for real SASS/SCSS the Compiler is the better fit. The beautifier ships with unpackers and can therefore make obfuscated/minified JavaScript readable again. With an empty editor you get the note "Nothing to beautify.".

HTML → Markdown

The button with the Markdown icon converts HTML to Markdown. For this the html-to-markdown converter runs as a WebAssembly module (Rust core) directly in the browser. From the meta data found in the <head> (title, description, Open Graph, Twitter, other meta tags, and <link> entries) the tool additionally builds a YAML frontmatter block and prepends it to the Markdown. In one step a fetched HTML page becomes a clean, frontmatter-equipped Markdown file.

HTML → plain text

The button with the text icon converts HTML to plain text — formatting stripped, no frontmatter.

Markdown/text preview

The Preview button (eye) is only active for the Text and Markdown languages. It opens a fullscreen preview in which the Markdown is rendered as HTML with markdown-it (plus plugins for footnotes, definition lists, sub/sup, mark, ins, emoji, abbreviations, and task lists); code blocks within it are highlighted with highlight.js. A leading YAML frontmatter block is shown in the preview as a yaml code block. From the preview you can copy as HTML, save as HTML, or print the result.

URL analysis: SEO and connection

Beyond the plain source, the tool can load two analysis reports for a URL — both run through the same proxy and land as a Markdown report in the editor:

  • SEO (bar-chart icon, SEO button) — an on-page evaluation of the page: title and length, all meta tags, <link> attributes, tag counters for <head> and <body>, heading hierarchy, all links and images with attributes, an accessibility overview, keyword density, a plain-text version, and concrete SEO recommendations with a percentage score. This is the same analysis family as the SEO & GEO Analyzer, delivered here into the editor.
  • Analyze connection (shield icon) — a connection and header analysis: final URL, IP, protocol and HTTP version, HTTP status, timing (DNS, TCP, SSL handshake, total), SSL certificate (subject, issuer, validity, days left, SANs, chain, algorithm), security headers, server info, caching headers, and the raw HTTP headers. Connection and SSL errors are reported as diagnostics instead of simply aborting.

There's also Open URL in new tab (arrow icon), which just opens the entered URL in a new tab, and a Validate menu with external tools (W3C Markup Validator, PageSpeed Insights, Structured Data testing, SSL Server Test, IP geolocation, redirect checker) — each entry opens the external service in a new tab.

Proxy architecture: server-side fetch

As soon as one of the three URL functions (Load, SEO, Analyze connection) runs, the target page is fetched by the JPKCom server, not by your browser. The reason is CORS: a direct fetch of a remote domain from the browser fails. For privacy this means the target page sees a request from the JPKCom server (with its user agent), not your IP address.

Behind the scenes two server-side endpoints work together: a fetch proxy that retrieves the page via cURL and (depending on the mode) serves it raw or formats it as a Markdown analysis, and a token-based endpoint that hands the tool's JavaScript a fresh, daily-rotating token pair before each fetch. Neither is a public API you can call yourself — the endpoints are exclusively for the tool and are hardened:

  • Referer check: requests are only accepted when they demonstrably come from the tool page (/tools/source/); otherwise HTTP 403.
  • Token authentication: a two-factor, timestamped token (V2) prevents the endpoints from being addressed without the tool.

SSRF protection and limits

  • SSRF / private-IP protection: internal, local, and private IP addresses are blocked. Only HTTP and HTTPS are allowed as protocols. localhost, intranet, and dev instances therefore cannot be loaded.
  • Size limit: the fetch is capped at roughly 950 KB of response; larger content is truncated.
  • Timeout: the fetch runs with a 15-second timeout (the same for the header/connection analysis).
  • Rate limit (client-side): the URL buttons (Load, SEO, Analyze connection) share a throttle of about one request per second. Fire faster and you get the note "Please wait … second(s) before the next request.".

Expert Mode (optional)

There is an optional Expert Mode with a self-hosted local proxy (LocalProxy on http://127.0.0.1:<port>). When it is active, that local proxy fetches the page instead of the JPKCom server — and the client-side rate throttle is then skipped. Setting it up is advanced and not needed for normal use.

Limits — in brief

  • Language selection is manual. There is no content-based auto-detection; after a URL load the language is always HTML.
  • URL loading only for public http(s) pages. No login area, no localhost/intranet, HTTP/HTTPS only, max ~950 KB, 15 s timeout, ~1 request/second.
  • Beautify is language-dependent. The CSS, HTML, or JS routines apply — other languages are not "beautified".
  • Preview only for text/Markdown. For all other languages the preview button is disabled.
  • No AI in the tool. The Source Viewer uses no AI itself; the HTML-to-Markdown function is merely AI-friendly because Markdown is lower in noise.

For the starting point and the big picture see the overview, for concrete workflows the examples, and for tricks the tips & tricks. You can try everything directly in the tool.