JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div>
<button id="btn-1" class="btn btn-primary m-4">Save Locally</button>
<button id="btn-2" class="btn btn-danger m-4">Open in JSFiddle</button>
</div>
JavaScript
var $button1 = $("#btn-1");
var $button2 = $("#btn-2");
// Save Locally
$button1.on('click', function() {
if (typeof(Blob) !== "undefined" && !!new Blob()) {
var codeToSave = '<!doctype html>' +
'<html lang="en">' +
'<head>' +
'</head>' +
'<body>' +
'<h1>Hello, world!</h1>' +
'</body>' +
'</html>';
var codeBlob = new Blob([codeToSave], {
type: "text/html"
});
var codeSaveAsURL = window.URL.createObjectURL(codeBlob);
var fileNameToSaveAs = "temp-file.html";
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // For IE, Edge
window.navigator.msSaveOrOpenBlob(codeBlob, fileNameToSaveAs);
} else {
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.href = codeSaveAsURL;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
window.URL.revokeObjectURL(codeBlob);
codeSaveAsURL = null;
codeBlob = null;
}
return false;
});
// Open in JSFiddle
$button2.on('click', function() {
var form = document.createElement("form");
form.id = "submitToFiddle";
form.style.display = "none";
form.method = "post";
form.action = "https://jsfiddle.net/api/post/library/pure/";
form.target = "check";
// form.target = "_blank";
var input = document.createElement("textarea");
input.name = "html";
input.innerHTML = '<h1>Fiddle!</h1>';
document.body.appendChild(form);
form.appendChild(input);;
input = document.createElement("input");
input.type = "submit";
form.appendChild(input);
form.submit();
document.body.removeChild(form);
return false;
});