JPKCom DB

Source Viewer — Examples

Hands-on runs with the Source Viewer: view a URL's source, preview HTML live, convert it to Markdown, extract links, minify code, keep snapshots.

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, with button and menu names exactly as the tool shows them.

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) — not Enter, because Enter in the URL field starts the connection analysis. The source is fetched server-side via the JPKCom proxy and written into the editor (toast "Content loaded from URL.").
  3. The language sets itself: for a page address like https://example.com/ to HTML, for …/style.css to CSS, for …/app.js to JavaScript. Highlighting kicks in immediately: tags, attributes, and values are color-coded, with line numbers down the left. The status bar below the editor shows size, line count, language, and file name.
  4. Use Find (Ctrl+F) or the More tools menu to search for a specific spot, jump to a line with Go to Line (Ctrl+G), and collapse large blocks with code folding.
  5. The URL now sits in the Recent URLs list (clock icon next to the URL field), so you can bring it back later with one click.

What you will not see this way: anything loaded later via JavaScript in the browser, and anything behind a login. What you get is the delivered raw HTML, not the fully rendered DOM. If the page is larger than 950 KB, the fetch aborts with "The file is too large.".

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 in the toolbar — say PHP, Python, or YAML. The highlighting switches instantly.
  3. If the rendering bothers you, open More tools → Settings: there you can adjust font size, tab size, invisible characters, and the theme — besides Dracula and Monokai there are the light GitHub and Solarized.

Pasting doesn't trigger language detection — unlike opening a file or loading a URL. Here, picking the language by hand is the decisive step — see also Example 3.

Example 3: Switch the language

The highlighting is off because the language is wrong — typical after pasting or when a URL has no telling extension. Detection on load only looks at the file name or URL path and, if that says nothing, at a few content markers (HTML, XML, SVG, PHP, JSON, otherwise Text).

  1. Open the language selector (dropdown in the editor toolbar).
  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. It also decides the extension when you save (File → Save).

If, say, a URL without an extension serves a stylesheet, it lands in the editor as Text — switch it to CSS and the selectors, properties, and values get colored correctly. Conversely, a page under …/index.php lands in PHP mode; switch it to HTML if you want to format it, minify it, or look at it in the live preview.

Example 4: Convert HTML to Markdown

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

  1. Load the page from its URL via Load — the editor is then in HTML mode. If you paste the HTML instead, make sure the language selector is on HTML: in non-HTML modes such as Text or Markdown the tool refuses to convert.
  2. Click the Markdown button (Markdown icon). The html-to-markdown converter (WebAssembly, Rust core) converts the HTML in the browser. Beforehand the tool makes relative links and image sources absolute (against the load URL) and strips skip links and heading permalinks.
  3. The editor now holds Markdown, and the language mode has switched to Markdown automatically. At the top sits a YAML frontmatter block built from the page's meta data — title, description, Open Graph, Twitter, other meta and link tags, JSON-LD, the heading outline, and link and image statistics.
  4. 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, save, or print the result as HTML.
  5. File → Save stores the Markdown — the file name gets the .md extension automatically.
  6. If you only need the bare text without markup, use the plain-text button (text icon) instead — no frontmatter, and the editor switches to Text.

Example 5: Format code (Beautify)

A minified or sloppily indented file should become readable again.

  1. Paste or load the code and check the language: the HTML routine handles HTML, XML, SVG, and template languages such as Twig or Vue, the CSS routine CSS, SCSS, and LESS, the JavaScript routine JavaScript, TypeScript, JSX/TSX, and JSON. For any other language the tool refuses to format.
  2. Click Beautify (magic wand). The JS Beautifier indents with tabs, puts statements and blocks on their own lines, and so restores the structure — it does not wrap long lines. For files over 50 KB a note tells you it will take a moment.
  3. If the JavaScript is packed with P.A.C.K.E.R. (eval(function(p,a,c,k,e,…)) or URL-encoded, the tool unpacks it first — without executing the code.
  4. If you don't like the result, Ctrl+Z undoes the whole step.

The opposite direction — shrinking code — is Example 9. If you need this often, or want 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 with a percentage score land as a Markdown report in the editor.
  2. For a technical check click Analyze connection (shield icon) instead, or just press Enter in the URL field: you get IP, protocol/HTTP version, timing, security and caching headers, the raw HTTP headers, and the SSL part — trust check, certificate details, SANs, and the certificate chain. The details appear even when the certificate is expired or self-signed; the Verification line then names the error.
  3. The editor is now in Markdown mode automatically — click Preview to read the report rendered, or keep it with File → Save (file name seo-…md or connection-…md).
  4. For a second opinion, the External validation tools menu (box-with-arrow icon) opens the URL directly in the W3C validator, PageSpeed Insights, the Schema.org validator, or the SSL Server Test.

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.

Example 7: See a page rendered (HTML live preview)

You have an HTML file or a loaded page in the editor and want to see what it looks like — without letting foreign code run.

  1. Load the page via Load or open an HTML file; the editor needs to be in HTML (or SVG) mode.
  2. Click Preview (eye). The HTML Preview renders the code in a fullscreen dialog inside a sandboxed frame — badge "Scripts off": scripts, forms, and pop-ups are disabled. The page's stylesheets, web fonts, and images do load as long as they are served over HTTPS; the tool resolves relative paths against the load URL.
  3. Switch at the top right between full width, Tablet (768 px), and Phone (390 px) to check the responsive behavior.
  4. Change something in the editor — a heading or a class — and open the preview again: it always shows the current state.

If the preview stays mostly empty, the page builds its content with JavaScript. That is exactly what a crawler without rendering gets to see.

Example 8: Extract all links and images from a page

You need a list of all links, images, or embedded scripts of a page — for a link check or an inventory, say.

  1. Load the page from its URL via Load. This matters: only then does the tool know the base address and can make relative paths absolute.
  2. Open More tools → Extract links, images, scripts….
  3. Pick the type at the top: Links, Images, Scripts, Stylesheets, or Headings. Each button shows the number of entries.
  4. Leave Remove duplicates on if you need each address only once; switch it off if you want to see how often a link occurs.
  5. Click Copy — the list (one address per line) is on the clipboard, ready for a spreadsheet or a check script.

The Headings variant gives you the page's outline, indented by level — a quick way to see whether the heading hierarchy holds up.

Example 9: Minify code

A stylesheet or a JSON document should be as small as possible for delivery.

  1. Paste the code or open the file and check the language (HTML, XML, SVG, CSS, SCSS, LESS, JSON, or JavaScript).
  2. Open the format menu (arrow to the right of the magic wand) and choose Minify (HTML, CSS, JS, JSON).
  3. A toast reports the size before and after, for example "Minified: 12.4 KB → 8.1 KB (−35 %) · Ctrl+Z to undo.".
  4. Keep the result with File → Save — or undo it with Ctrl+Z.

The tool is deliberately careful here: license comments (/*! … */) in CSS stay, whitespace in HTML is only collapsed, never removed entirely, and <pre>, <script>, and <style> are left alone. JavaScript goes through Terser.

Example 10: Keep checkpoints with snapshots

You are reworking a page and want to be able to go back to an earlier state at any time — even after closing the tab.

  1. Open File → Snapshots…, enter a name (e.g. "before the rework"), and click Save current code.
  2. Keep working. If you load another URL or file in between, the tool asks first because you have changed the code, and takes an automatic snapshot beforehand.
  3. To go back, open Snapshots… again and click Restore on the entry you want. Language and file name come along; the state before that is itself saved as an automatic snapshot.

Snapshots only live in this browser, 20 at most — for lasting backups, File → Save remains the right way.

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.