JPKCom DB

Source Viewer — Examples

Hands-on runs with the Source Viewer: view a URL's source, paste and highlight code, switch language, convert HTML to Markdown.

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

The manual explains every function and the proxy architecture in detail. This page adds concrete workflows — typical tasks walked through step by step. The tool's interface is in English, so button and menu names are given in their original spelling.

Example 1: View the source of a URL

The classic — you want to see how a remote page is built.

  1. Open the Source Viewer and enter an absolute address in the URL field at the top (e.g. https://example.com/).
  2. Click Load (download icon). The source is fetched server-side via the JPKCom proxy and written into the editor (toast "Content loaded from URL.").
  3. The editor is now in HTML mode — that's the case after every URL load. Highlighting kicks in immediately: tags, attributes, and values are color-coded, with line numbers down the left.
  4. Use Find (Ctrl+F) or the More tools menu to jump to a specific spot, and collapse large blocks with code folding.

What you will not see this way: anything loaded later via JavaScript in the browser, and anything behind a login. What is loaded is the delivered raw HTML, not the fully rendered DOM.

Example 2: Paste and highlight code

You have a snippet from a log file, a chat, or an email and want to read it cleanly.

  1. Click into the editor and paste the code with Ctrl+V (or via the Paste button).
  2. Pick the right language in the selector at the top right — say PHP, Python, or YAML. The highlighting switches instantly.
  3. If the rendering bothers you, open Settings: there you can adjust font size, tab size, visible whitespace, and the theme (Dracula or Monokai).

Because there is no content-based auto-detection, picking the language manually is the decisive step — see also Example 3.

Example 3: Switch the language

The highlighting is off because the language is wrong — typical right after a URL load, which always assumes HTML.

  1. Open the language selector (dropdown at the top right of the editor bar).
  2. Pick the correct language. The common languages are at the top for quick access, with the full rest listed alphabetically below (100+ entries).
  3. Highlighting and linting switch instantly; the chosen language is saved alongside the content in browser storage and restored on your next visit.

If you load a style.css by URL, for instance, the editor starts in HTML — switch it to CSS and the selectors, properties, and values get colored correctly.

Example 4: Convert HTML to Markdown

You want to extract a clean Markdown version from an HTML page — say as a low-noise source for an AI system or for your wiki.

  1. Load the page via Load from its URL (or paste the HTML) — the editor is then in HTML mode.
  2. Click the Markdown button (Markdown icon). The html-to-markdown converter (WebAssembly, Rust core) converts the HTML in the browser.
  3. The editor now holds Markdown — with a leading YAML frontmatter block that the tool built from the page's meta data (title, description, Open Graph, Twitter, and so on).
  4. Set the language selector to Markdown and click Preview (eye): the fullscreen preview renders the Markdown as HTML, code blocks get highlighted, and the frontmatter appears as a yaml block. From the preview you can copy or save the result as HTML.
  5. If you only need the bare text without markup, use the plain-text button instead.

Example 5: Format code (Beautify)

A minified or sloppily indented file should become readable again.

  1. Paste or load the code, and pick the matching language (HTML, CSS, or JavaScript — that determines which beautify routine runs).
  2. Click Beautify (magic wand). The JS Beautifier indents, wraps, and restores the structure.
  3. For heavily obfuscated JavaScript the bundled unpackers also kick in, so packed code becomes readable again.

If you need this often, or for SASS/SCSS compilation, the specialized Compiler or the Beautify tool is the sharper choice.

Example 6: Check a URL's meta data and connection

You don't want the source but a quick evaluation of a page.

  1. Enter the URL. For an on-page/meta analysis click SEO (bar-chart icon): title, meta tags, headings, links, images, keyword density, and SEO recommendations land as a Markdown report in the editor.
  2. For a technical check click Analyze connection (shield icon) instead: you get IP, protocol/HTTP version, timing, SSL certificate, security and caching headers, and the raw HTTP headers — also as Markdown.
  3. Set the language selector to Markdown and use Preview to read the report rendered.

For a complete, scored analysis with two scores and tabs, the SEO & GEO Analyzer is the bigger tool — the Source Viewer delivers the compact variant right in the editor.

There's more depth elsewhere: the overview for the big picture, the manual for every function in detail, and the tips & tricks for the clever bits. You can try everything directly in the tool.