Source Viewer — Manual

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. Button and menu labels are given exactly as they appear in the tool, so you can find your way around the real interface.

The three input paths

There are three ways to get content into the editor:

Paste or type. Click into the editor and paste code with Ctrl+V, or just start typing. Dedicated Cut, Copy, and Paste buttons sit in the toolbar: Cut and Copy work on the current selection (without one you get "No text selected."), Paste reads through the browser's Clipboard API — so the browser may ask for permission.
Open a local file. Choose Open file… in the File menu (Ctrl+O inside the editor), or simply drag and drop the file onto the editor. The file is read as UTF-8 text entirely in the browser — it never leaves your machine.
Load from URL. Enter an absolute http(s) address in the Load from URL card at the top and click Load. The source is fetched server-side (see proxy architecture) and written into the editor.

Watch the Enter key: pressing Enter in the URL field starts the connection analysis (Analyze connection), not the source fetch. For the source, click Load.

What happens on load

The language is set automatically. When you open a file, drop one, or load a URL, the tool first derives the language mode from the file name or the URL path (style.css → CSS, app.ts → TypeScript, also Dockerfile and Makefile). Without an extension the content decides: <?xml becomes XML (or SVG if it contains an <svg>), <?php becomes PHP, any other start with < becomes HTML, valid JSON becomes JSON, and everything else becomes Text. One exception: if you load a bare domain with no path and no trailing slash (https://example.pl), the tool treats the domain ending as a file extension — .pl gives Perl, .io Io, .sh SH. With a trailing / (https://example.pl/) the content decides. If detection finds a language that is missing from the selector, the tool adds it there.
Edited code is never silently overwritten. If you have changed the content yourself, every action that replaces it (Load, SEO, Analyze connection, Open file…, drag and drop, New file, Clear editor) asks first — and takes a snapshot automatically. Unchanged content that was just loaded is replaced without a prompt.
The file name is remembered — from the opened file or from the last path segment of the URL (for a bare domain, the host name, e.g. example-com). It appears in the status bar and is used when saving.
Successfully fetched URLs go into the "Recent URLs" list (clock icon next to the URL field). It keeps the last 10 addresses in browser storage; a click puts a URL back into the field, Clear list empties it. The tool also writes the address into the address bar as ?url=…: such a link pre-fills the URL field when opened, but does not load anything automatically.

Your work is auto-saved to local browser storage (localStorage) — content, chosen language, and the last URL you entered. The content is saved about a second after your last change; the language and the URL are saved immediately. The badge with the disk icon next to "Code Editor" shows the state: green = saved, red = saving failed (in that case a one-time note says browser storage is full or disabled and you should save your code as a file). On your next visit the editor restores the content (toast "Content restored from local storage.").

All file operations live in the File menu (leftmost in the toolbar):

New file — starts a new file with an empty HTML skeleton and sets the language to HTML.
Open file… (Ctrl+O) — opens a local file (see above).
Save (Ctrl+S) — downloads the editor content as a file. The name is the remembered file name with the extension of the current language mode — untitled.ts for TypeScript, .md after a Markdown conversion, .txt for Text. The reports are named seo-<name>.md and connection-<name>.md. With an empty editor you get "Nothing to save.".
Snapshots… — opens snapshot management (see below).
Print source… — opens a print window with the source in a monospaced font, with the language and print date in the header.
Clear editor — empties the editor, resets the language to HTML, and deletes the auto-saved state. Snapshots and the "Recent URLs" list are kept.

Snapshots

Snapshots are named checkpoints in browser storage — with code, language, and file name. In the Snapshots dialog you optionally enter a name (up to 80 characters) and click Save current code. Each entry shows date, language, and size; Restore brings it back (undoable with Ctrl+Z), the trash icon deletes it.

On top of that the tool takes automatic snapshots: before replacing code you have edited, and before restoring a different snapshot. At most 20 snapshots are kept; when space runs short — in count or in the browser's storage quota — the oldest automatic ones go first.

The editor and syntax highlighting

The editor is built on the ACE Editor (opens in a new tab) — the same engine that powers the Source Code tab of the SEO & GEO Analyzer.

Languages and highlighting

You pick the language mode in the language selector (dropdown in the toolbar). 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. A fresh editor starts in HTML mode.

On open and load the tool sets the language automatically; pasted code, on the other hand, is not reassigned — there you pick the mode yourself. Highlighting comes from ACE's language modes. Also active: linting (syntax checking via workers), autocomplete (basic, snippets, and live suggestions), highlighting of the word under the cursor, and code folding. Indentation uses real tabs.

Themes

The settings dialog offers four themes: Dracula (Dark) (default), Monokai (Dark), GitHub (Light), and Solarized (Light). The Markdown/text preview renders on a light background regardless.

Editing, navigating, searching

Undo/Redo, Indent/Outdent, font size −/+, line wrap (Toggle line wrap), and fullscreen (Toggle fullscreen) are toolbar buttons. In fullscreen the URL bar gets its own compact version above the editor.
The More tools menu (three dots) gives you Go to Line (Ctrl+G), Find (Ctrl+F), Replace (Ctrl+H), the Extract links, images, scripts… dialog (see Extract), plus Keyboard Shortcuts and Settings. Go to Line opens a small dialog that shows the valid line range and pre-fills the current line.
The Keyboard Shortcuts dialog lists the shortcuts in groups — File Operations, Navigation, Search & Replace, Editing, Selection, and Code Folding. Examples that work this way in the editor: Ctrl+S save, Ctrl+O open, Ctrl+G go to line, Ctrl+F find, Ctrl+H replace, Ctrl+K next match, Alt+↑/↓ move line, Ctrl+/ toggle comment, Alt+0 fold everything except the cursor position, Alt+Shift+0 unfold all. A few entries in the dialog differ from what the editor actually does — watch out above all for Ctrl+D: it deletes the line, duplicating is on Ctrl+Shift+D. Ctrl+Shift+K jumps to the previous match, Ctrl+Shift+L selects the whole line, and Ctrl+Alt+K selects all occurrences. Ctrl+click adds an extra cursor, Alt+drag creates a block selection, and F3 is not bound to search on Windows and Linux. In addition, Ctrl+L does not open go-to-line (only Ctrl+G does), Alt+←/→ jumps to the start or end of the line on Windows and Linux instead of moving by word (by word: Ctrl+←/→), and Ctrl+Shift+[/] does not fold — folding is on Alt+L there, unfolding on Alt+Shift+L. The shortcuts for save, open, and go-to-line work while the editor has focus (Cmd on a Mac).

Status bar and keyboard operation

A status bar below the editor shows size (bytes or KB), line count, language, and file name, with the cursor position next to it. If the content came from a URL, its tooltip names the source ("Loaded from …").

The toolbar is a single tab stop: Tab takes you in, and the arrow keys ←/→ plus Home/End move between the buttons. On narrow touch screens (below 768 px) it becomes a horizontally swipeable strip. The editor height adapts to the window; long files scroll inside the editor.

Settings

The Editor Settings dialog (More tools → Settings) controls: Font Size (8–32 px, default 15), Tab Size (2/4/8 spaces, default 4), Theme (see above), and the switches Word wrap, Show invisible characters, Show indent guides, Show line numbers, Highlight active line, Autocomplete, and Syntax validation (linting) — all on by default. Settings are stored in the browser; Reset to Defaults restores the standard values.

Convert and preview

Beautify

The Beautify button (magic wand) — and the Beautify entry in the format menu next to it — formats the content with the JS Beautifier (opens in a new tab). The language mode decides which routine runs:

Routine	Language modes
HTML	HTML, XML, SVG, Vue, Twig, Handlebars, Django, Liquid, EJS
CSS	CSS, SCSS, LESS
JavaScript	JavaScript, JSON, JSX, TypeScript, TSX, Hjson

For every other language — Markdown, YAML, Python, or SASS (indented syntax), say — the tool refuses with a note instead of mangling the code. If the mode is a JavaScript language but the content starts with an HTML tag, the HTML routine takes over. Indentation uses tabs. For files over 50 KB a toast appears first, because formatting can then take a few seconds; the result is a single undo step.

On the JavaScript route two unpackers run first: one for code packed with Dean Edwards' P.A.C.K.E.R. (eval(function(p,a,c,k,e,…)) — it decodes without executing the code — and one for URL-encoded code. Other obfuscation is not undone. With an empty editor you get "Nothing to beautify.".

Minify

The format menu (arrow to the right of Beautify) contains Minify (HTML, CSS, JS, JSON). The routine follows the language mode and is deliberately conservative:

HTML, XML, SVG: comments are removed (conditional comments stay), runs of whitespace collapse to one space — not removed entirely, because whitespace between inline elements is visible. The contents of <pre>, <textarea>, <script>, and <style> are left alone.
CSS, SCSS, LESS: strings stay verbatim, comments disappear except license comments (/*! … */), and whitespace is only removed around {, }, ;, and , — never around :, because a :hover is not the same as a:hover.
JSON: re-serialized compactly; invalid JSON aborts with an error message.
JavaScript: via Terser (opens in a new tab) with compression and renaming of local names; the library is only loaded on first use.

Other modes (TypeScript and JSX included) get a note instead. After minifying, a toast shows the size before and after plus the saving in percent; Ctrl+Z undoes it.

HTML → Markdown

The button with the Markdown icon converts HTML to Markdown. For this the html-to-markdown (opens in a new tab) converter runs as a WebAssembly module (Rust core) directly in the browser; it produces CommonMark with GFM tables, and subscript/superscript as ~x~ and ^x^. Conversion only works in the HTML, XML, SVG, PHP, Twig, and Vue modes and only if the content contains tags — otherwise you get "Convert works on HTML …". Afterward the editor switches to Markdown mode automatically.

Before converting, the tool cleans up the HTML:

Relative links and image sources become absolute — resolved against a <base href> or the URL the page was loaded from, so the links in the Markdown still work outside the original site. Without a <base>, the URL last loaded via Load applies until New file, Open file… (drag and drop included), Clear editor, or an SEO or connection report resets it. So if you paste other HTML after a load, the tool resolves its relative links against the old load URL; only without a load URL do they stay relative.
Skip links ("Skip to content", "Zum Inhalt" …) and heading permalinks (#, ¶, 🔗) are removed so they don't end up in every Markdown heading.
<details>/<summary> becomes a heading with the content below it, and <dl> definition lists become - **term** — definition.
Inline SVG is dropped rather than embedded as a Base64 image.

From the meta data the tool also builds a valid YAML frontmatter block and prepends it to the Markdown. Where available it contains title, description, author, canonical_url, base_href, language, text_direction, keywords, open_graph, and twitter_card, the remaining meta tags under meta, the head's <link> elements under link_tags (such as alternate with hreflang, icons, manifest), structured data under structured_data (format, schema type, and the raw JSON — in practice only JSON-LD is captured), the heading outline under outline, link counts under links (total, internal, external, anchor, and — if present — others such as mailto: under other), and under images the image count, the number of images without alt, and the image list. In one step a fetched HTML page becomes a clean Markdown file with an analysis header.

HTML → plain text

The button with the text icon converts HTML to plain text — formatting stripped, no frontmatter, with the same requirements and cleanup steps as the Markdown conversion. Afterward the editor is in Text mode.

HTML live preview

With the editor in HTML or SVG mode, the Preview button (eye) opens the HTML Preview: the code is rendered in a fullscreen dialog — inside a sandboxed frame (sandbox) where no scripts, no forms, and no pop-ups run (badge "Scripts off"). External stylesheets, web fonts, and images are loaded as long as they are served over HTTPS; embedded frames, video, and audio from other servers are not loaded. The tool resolves relative addresses against the load URL or <base href>, and it removes any meta-refresh redirect. Three buttons switch the width: full width, Tablet (768 px), and Phone (390 px).

Because scripts are off, you see the page as it looks without JavaScript — a client-rendered app stays largely empty here.

Markdown/text preview

In Markdown and Text mode, Preview opens the Text/Markdown Preview instead: the Markdown is rendered as HTML with markdown-it (opens in a new tab) (plus plugins for footnotes, definition lists, sub/sup, mark, ins, emoji, abbreviations, and task lists); code blocks within it are highlighted with highlight.js (opens in a new tab). A leading YAML frontmatter block appears as a yaml code block. Text that doesn't look like Markdown is shown as a preformatted block. The rendered HTML is sanitized with DOMPurify before display — so scripts from loaded pages don't run here either.

From the dialog — or directly from the dropdown next to the Preview button with Copy as HTML, Save as HTML, and Print Preview — you can copy the result as a complete HTML document, save it as preview.html, or print it. That dropdown is only active in Markdown and Text mode.

Extract: links, images, scripts, stylesheets, headings

More tools → Extract links, images, scripts… opens the Extract from HTML dialog. It reads the HTML in the editor and lists, as you choose:

Links — every href of <a> elements (without javascript:),
Images — every src of <img>,
Scripts — every external script (<script src>),
Stylesheets — every <link rel="stylesheet">,
Headings — headings H1–H6, indented by level.

Each type shows its count on its button. The Remove duplicates switch (on by default) drops repeated entries (not for headings); Copy copies the list. Relative addresses are resolved against the load URL or <base href> — if you only pasted the HTML, the dialog points out that the page has to be loaded by URL to get absolute addresses. Without tags in the editor you get "Extract works on HTML …".

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 (language Markdown, file name seo-…md or connection-…md):

SEO (bar-chart icon, SEO button) — an on-page evaluation of the page: title and length, language, all meta tags, <link> attributes, tag counters for <head> and <body>, heading hierarchy, all links and images with attributes, copy-ready lists of every href and src value, an accessibility overview, keyword density, a plain-text version with word and character counts, and concrete SEO recommendations (Critical Issues, Improvements Recommended, What's Good) with a percentage score. This is the same analysis family as the SEO & GEO Analyzer, delivered here into the editor.
Analyze connection (shield icon, also Enter in the URL field) — a connection and header analysis via a GET request that reads only the headers (the body is not downloaded): final URL after redirects, IP, protocol and HTTP version, HTTP status, timing (DNS, TCP, SSL handshake, pretransfer, starttransfer, total), security headers (HSTS, CSP, X-Frame-Options, Referrer-Policy, Permissions-Policy, the cross-origin policies, and more), server info, caching headers, and the raw HTTP headers.

The SSL/TLS part of the connection analysis keeps two things apart. The Verification line says whether the certificate was validated as trusted against the CA store (or which error occurred — expired, self-signed, wrong host name, and so on). The certificate details come from a separate handshake without validation — which is why you see them even for broken certificates: common name, organization, issuer, validity with days remaining (warning from 30 days), signature algorithm, public key, serial number, SHA-256 fingerprint, whether the host name is covered, TLS version and cipher, the list of SANs, and the certificate chain as the server sends it — each link labeled (a "cross-signed root" is called out as such) and with the result of its signature check. If no HTTP response comes back at all, the report opens with an error diagnosis, and the header sections are marked "unknown" rather than "missing".

There's also Open URL in new tab (arrow icon next to the URL field, hidden on very narrow screens), which simply opens the entered URL in a new tab, and the External validation tools menu in the toolbar (box-with-arrow icon): W3C Markup Validator, PageSpeed Insights, Structured Data Testing (leads to the Schema.org validator), SSL Server Test, IP Geolocation, and Redirect Checker. The entries are pre-filled with the last URL you used and open 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 a regular browser user agent), not your IP address. Everything else — editor, detection, formatting, conversion, preview, extraction — runs in your browser. There is one privacy exception: the HTML live preview loads the page's external stylesheets, web fonts, and images, and the Markdown preview loads embedded images — your browser fetches both directly from the respective servers, which see 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 turns it into a Markdown report, and a token-based endpoint that hands the tool's JavaScript a fresh token pair before each fetch. Neither is a public API you can call yourself — the endpoints exist only 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-step, timestamped token (V2) with daily rotating secrets prevents the endpoints from being addressed without the tool.

Proxy error messages (invalid or blocked URL, expired token, file too large) appear as an error notice — they don't end up in the editor.

SSRF protection and limits

SSRF / private-IP protection: internal, local, and private IP addresses are blocked. Only HTTP and HTTPS are allowed, and only the ports 80, 443, 3000, 5000, 8000, 8008, 8080, and 8443 — the proxy rejects a URL with any other port as invalid ("Invalid URI."). The proxy follows redirects (at most 5) itself and checks every target again. localhost, intranet, and dev instances therefore cannot be loaded.
Size limit: the fetch is capped at 950 KB. If the response is larger, the proxy aborts with "The file is too large." — the source is not delivered truncated.
Timeout: 15 seconds per fetch (the same for the connection analysis), at most 5 seconds to connect, and 30 seconds in total across all redirects.
Rate limit in the browser: the URL buttons share a throttle of one request per second and are briefly disabled meanwhile. Fire faster and you get "Please wait … second(s) before the next request.".
Rate limit on the server: each IP address may make 120 fetches per minute; beyond that the server answers with HTTP 429 and names the waiting time.

Expert Mode (optional)

The Expert switch in the tool page's header (gear icon for its settings) lets you plug in a self-hosted local proxy (localproxy, reachable at something like http://127.0.0.1:8765, secured with a token). When it is active, it fetches the page for Load instead of the JPKCom server — without the browser throttle and, according to the tool, with files up to 50 MB. SEO and Analyze connection still run through the JPKCom server, with its limits. Setting it up is advanced and not needed for normal use.

Limits — in brief

Language detection only on load. It applies to open, drag and drop, and URL loading — via file name/URL path, otherwise via a few content markers. Pasted code is yours to assign; a URL without an extension that serves CSS lands as Text, and a page under ….php lands in PHP mode — Beautify, Minify, and the live preview only work there after switching to HTML.
URL loading only for public http(s) pages. No login areas, no localhost/intranet, only ports 80, 443, 3000, 5000, 8000, 8008, 8080, and 8443, max. 950 KB, 15 s timeout, one request per second, 120 per minute.
Only the delivered HTML. Neither Load nor the live preview runs JavaScript — whatever a page builds in the browser is missing.
Beautify and Minify depend on the language. Beautify knows the HTML, CSS, and JavaScript families, Minify knows HTML/XML/SVG, CSS/SCSS/LESS, JSON, and JavaScript — everything else is refused.
Convert and extract only for HTML. Markdown/text conversion needs an HTML-like mode; absolute URLs only come with a load URL or <base href>.
Preview only for HTML, SVG, Markdown, and Text. For every other language the Preview button is disabled; copying, saving, and printing the preview is only available for Markdown and Text.
Everything local stays in the browser. Auto-save, snapshots (max. 20), Recent URLs (max. 10), and settings live in this browser's localStorage.
No AI in the tool. The Source Viewer uses no AI itself; the HTML-to-Markdown function is merely AI-friendly because Markdown carries less 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.