WebPDF.pro

New playground; file IO via handles, source from any origin; page controls.

File open and page controls

Elefunc announces the new WebPDF.pro features of November.


try.WebPDF.pro

โ†˜๏ธ
We are launching this as SyncHTML.io โ€“ an independent, general-purpose, next-generation, no-reload web playground with two-way real-time editor โ‡„ output sync.

We built our own HTML/CSS/JS playground!

Public ones take too long to reflect changes, and reset DOM state on edit.

change updates
editor โ†’ output
try.WebPDF.pro CodePen, etc.
HTML ๐ŸŸข sync 1ms ๐ŸŸ  loadโณ4s
CSS ๐ŸŸข sync 1ms ๐ŸŸ  syncโณ2s
JS ๐ŸŸข sync 1ms
๐ŸŸ  load 1ms
๐ŸŸ  loadโณ4s
change updates
editor โ† output
try.WebPDF.pro CodePen, etc.
HTML
CSSโ†‘
JS โ†‘
๐ŸŸข sync 1ms โŒ impossible

We developed ๐ŸŸข sync for instant updates that preserve the DOM state.

Videos

The first video below shows how we differ from all other public playgrounds.

  1. You never wait.
  2. Output never reloads.
  3. DOM state never resets.
    (The flower keeps blooming.)
    (The video is 5s long, it loops.)

๐Ÿ‘‰๐Ÿป try the same yourself live ๐Ÿ‘ˆ๐Ÿป


The next two videos below compare our playground vs CodePen.

Please notice,
with try.WebPDF.pro,

  1. DOM changes sync back into the editor,
    (Button clicks update line 2 in the editor.)
  2. you never wait for changes to appear,
    (They happen instantly in both directions),
  3. there is no reload, DOM never resets.
    (The picture is always the same.)

with CodePen and the like,

  1. The editor is unaware of DOM changes,
    (Button clicks do not update the editor.)
  2. you wait for 4 seconds on each edit,
    (Breaks immersion; C++ compiles faster.),
  3. each edit reloads the output, resets DOM.
    (The picture changes on each edit.)

try.WebPDF.pro vs CodePen

(click on one to watch; click away to show both)


Features

Our playground packs unique features:

  • the Monaco editor (from VS Code)
  • HTML/CSS/JS in a single panel
  • edits sync without reloads (mostly)
  • changes sync back (editor โ† output)
  • infinite customization possibilities
    (We are in full control of everything.)
  • output can be same-origin (enabling
    newer APIs like File System Access)
  • editor can control a parent window,
    output can reside outside the editor
  • output consists purely of your input
    (No bloat in the generated HTML.)
โฌ‡๏ธ โœ”๏ธ try.WebPDF.pro output โ€“ equals the input ๐Ÿ˜ƒ
โฌ‡๏ธ โŒ CodePen output โ€“ arbitrary non-sense ๐Ÿคฎ
๐Ÿ“ฐ
Our playground was featured on Hacker News โ€“ A no-reload HTML/CSS/JS playground with instant editor / output sync.

Live Playground

No-reload, real-time web playground

Try Now โ€บ

๐Ÿ“‚ <pdf-file> IO methods

Accessing the file system is now easier than ever.


โŒจ๏ธ <pdf-page controls>

A single page is now an interactive window into an entire file.

Here is a page you can control:

  1. Click on the page.
  2. Press โ†/โ†’ to navigate.
  3. Press A/D to navigate.
  4. Press Home/End to navigate.
  5. Press Q/E to rotate.
  6. Press CTRL+S to save the .pdf file.
  7. Press CTRL+O to open a .pdf file.
  8. Press CTRL+C to copy page image.

โ˜๏ธ <pdf-file>.proxy

Our built-in distributed file proxy makes it possible to load .pdf/.xfdf files from any domain. It eliminates CORS restrictions, is on by default and works transparently. This service is hosted on Cloudflare Workers and runs at the edge close to users. ๐Ÿ“–

Here is a cross-origin embed:


๐Ÿงญ Browsers.page

Our page to declare which browsers you support as a company or project.

Browsers.page has latest browser versions and download links synchronized with MDN/browser-github-data. When a new browser version gets released, we live-patch the MDN data with that update and send a pull request to the upstream repository. This ensures that our page is always very fresh.

Here are the browsers we support for WebPDF.pro:

๐Ÿ“–
You can now read our Frontend API &
see interactive customization demos.

We are also planning an advanced version at *.browsersupport.page. It will let you list the specific Web APIs you depend on and generate a live feature support matrix per browser. This matrix will differยน from caniuse.com in that it will:

  • show one column per browser
  • highlight the user browser ยน
  • show one row per feature ยน
  • show what present/missing feature support means for your project ยน

See you soon with more updates!

Thank you for reading.