New Service

RTCode.io (formerly SyncHTML.io)

The no-reload web playground with two-way, editor โ†” output, sync.

Elefunc Team

Elefunc Team

โ€” 6 min read
RTCode.io (formerly SyncHTML.io)
Table of Contents

New playground

At Elefunc, we needed a way to edit the live DOM tree without state resets caused by reloads.

CodePen, JSFiddle and their kind were comically bad at meeting our requirements. So we built: SyncHTML.io.

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

SyncHTML.io is where

  • you use Visual Studio Code
  • to edit DevTools / Elements
  • in real-time, with no reloads!
โฌ‡๏ธ
Our playground is embedded below.

โ€ข What you see here is a live demo!
โ€ข The demo uses our programmable embeds.
โ€ข It is our blog page driving the demo!
โ€ข Scroll it into full view to activate.
โ€ข Click in one of the panes to take control!
โ†—๏ธ
Now click on one of our four icons!

โ€ข You will see sync back in action.
โ€ข The output will update the input!
โ†˜๏ธ
See the pain in legacy playgrounds.
CodePen, etc. โ€“ nothing but delays โณ and resets ๐Ÿ›‘!

Inner workings

Legacy playgrounds โ€ฆ

work one-way ( โ†’ )
with delays ( โณ ),
and resets ( ๐Ÿ›‘ ).

After each edit, you wait for up to 4 seconds while they upload your code to their servers. Their bad design garbles up your code and reset-loads it into the output frame. You lose speed, privacy, flow, and hygiene.

โฌ†๏ธ โŒ CodePen output โ€“ arbitrary non-sense ๐Ÿคฎ

Next-gen SyncHTML.io โ€ฆ

works two-ways ( โ†“ โ†‘ ),
no delays or resets ( โšก )!

You edit the live DOM tree you see in DevTools / Elements. Nothing is ever uploaded to a server. You never wait. Changes sync in real-time from editor to output and back from output to editor. DOM state is preserved between edits. The output has no impurities. You gain speed, privacy, flow, and hygiene.

โฌ†๏ธ โœ”๏ธ SyncHTML.io is ๐Ÿ˜ƒ zero-pollution!

Introduced in November 2021

Our playground was born as try.WebPDF.pro.

It was first made for our PDF web components.

A real-time playground
with two-way sync
that preserves state
is priceless for
every web developer.

That's why we are turning it into a full-fledged, independent service.

WebPDF.pro โ€“ November 2021
New playground; file IO via handles, source from any origin; page controls.
Elefunc BlogElefunc Team
The blog post introducing try.WebPDF.pro.

Changes in December 2021

SyncHTML domains

We have secured many.
We launch with

  • SyncHTML.io
  • SyncHTML.com โ†–

SyncHTML โ† derived from โ† WebPDF

A lightning-like S for sync, and <>.

It is derived from our WebPDF.pro logo.

We made it ourselves in our playground!

now persist and keep you in context.

๐Ÿ†• Panel controls ( )

๐Ÿ’ก
If you focus the splitter, you get simpler shortcuts.
Show Controls
Focus Splitter

๐Ÿ†• Adjust numbers ( / โ†‘ โ†“ )

by selecting them and pressing arrow keys.

๐Ÿ†• JavaScript console ๐Ÿ“œ ( )

now has a place in the UI.

Our console is zero-pollution.

console
in output		 SyncHTML CodePen JSFiddle
<script> 0 1 1
characters 0 863 4798
characters
(executed)		 541 863 6258
= 1460
+ 4798
variables 0 2
HUB_โ‹ฏ
โ‹ฏingify		 2
pushโ‹ฏ
stringify
console
message		 SyncHTML CodePen JSFiddle
counters 4 0 4
styling โœ”๏ธ โŒ โŒ

๐Ÿ†• Add <script>, <style> ( / )

via context menu or keyboard shortcuts.

๐Ÿ†• Remote output ... ( ) ( / Alt+Q )

opens one new window.

๐ŸŽ‰
Use multiple external output windows to target multiple viewport sizes and media preferences all at once.

๐Ÿ†• Paste URL Content ... ( / Alt+U )

to work on existing web assets.

โš ๏ธ
CORS restrictions currently apply.
๐Ÿ“‚
File System Access is coming next!

๐Ÿ†• Input curtain ( )

prevents selection loss on focus.

๐Ÿ˜€
No other playground has this!

๐Ÿ†• Output sandbox ( )

blocks access to parent window.

๐Ÿ†• Infinite Loop Guard โ™พ๏ธ ( )

recovers no matter the source.

infinite loop
recovery
in pane		 SyncHTML CodePen JSFiddle
HTML โœ”๏ธ โŒ โŒ
JS โœ”๏ธ โœ”๏ธ โŒ

๐Ÿ†™ Error handling ( )

indicates issues, such as invalid characters in attribute names (e.g. @), with a red dot ๐Ÿ”ด; recovers after user correction.

๐Ÿ†™ Boolean attributes ( )

do not repeat name as value in output.

<video controls></video>

Read more