# 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.

Source: https://www.jpkc.com/db/en/tools/source/manual/

Back to the overview: [Source Viewer](https://www.jpkc.com/db/en/tools/source/) · Open the tool live: [www.jpkc.com/tools/source/](https://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](#proxy-architecture-server-side-fetch)) 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](https://ace.c9.io/) — the same engine that powers the *Source Code* tab of the [SEO & GEO Analyzer](https://www.jpkc.com/db/en/tools/seo/).

### 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](https://beautifier.io/). 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](https://www.jpkc.com/db/en/tools/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](https://github.com/Goldziher/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](https://github.com/markdown-it/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](https://highlightjs.org/). 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](https://www.jpkc.com/db/en/tools/seo/), 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](https://www.jpkc.com/db/en/tools/source/), for concrete workflows the [examples](https://www.jpkc.com/db/en/tools/source/examples/), and for tricks the [tips & tricks](https://www.jpkc.com/db/en/tools/source/tips/). You can try everything directly in the [tool](https://www.jpkc.com/tools/source/).