We built our own
Public ones take too long to reflect changes, and reset DOM state on edit.
editor → output
editor ← output
We developed 🟢
sync for instant updates that preserve the DOM state.
The first video below shows how we differ from all other public playgrounds.
- You never wait.
- Output never reloads.
- DOM state never resets.
(The flower keeps blooming.)
(The video is 5s long, it loops.)
The next two videos below compare our playground vs CodePen.
- DOM changes sync back into the editor,
(Button clicks update line 2 in the editor.)
- you never wait for changes to appear,
(They happen instantly in both directions),
- there is no reload, DOM never resets.
(The picture is always the same.)
with CodePen and the like,
- The editor is unaware of DOM changes,
(Button clicks do not update the editor.)
- you wait for 4 seconds on each edit,
(Breaks immersion; C++ compiles faster.),
- each edit reloads the output, resets DOM.
(The picture changes on each edit.)
(click on one to watch; click away to show both)
Our playground packs unique features:
- the Monaco editor (from VS Code)
JSin 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.)
No-reload, real-time web playgroundTry Now ›
<pdf-file> IO methods
Accessing the file system is now easier than ever.
A single page is now an interactive window into an entire file.
Here is a page you can control:
- Click on the page.
- Press ←/→ to navigate.
- Press A/D to navigate.
- Press Home/End to navigate.
- Press Q/E to rotate.
- Press CTRL+S to save the
- Press CTRL+O to open a
- Press CTRL+C to copy page image.
Our built-in distributed file proxy makes it possible to load
.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:
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:
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.Tweet