Edit your website without writing code. Click anything on the page to change it, then publish to GitHub so Cloudflare updates your live site. Choose where to start:
Tip: if you only have index.html,
How to use this editor
Everyday changes
Change text: double-click it on the page and type. Press Enter when done.
Change anything else: click it once, then open Edit selected. You can change text, links, pictures, icons, colours, sizes and spacing.
Move or remove a section: open Sections. Use the arrows, the Hide button, or Duplicate.
Phone numbers, emails, location, brand colours: open Settings.
Add or remove gallery photos: open Photos.
Test buttons and forms: press Try it live at the top.
Making it live
Open Publish and fill in your GitHub details once (username, repository, and an access token).
Press Publish to GitHub. Cloudflare then updates your site in about a minute or two.
No GitHub access? Press Download backup (zip), unzip it, and upload the files to GitHub by hand.
If something goes wrong
Press Undo at the top, as many times as you need.
Open Publish, find Saved versions and restore an earlier one.
Still broken? Reset to built-in copy (in Publish) brings back the version this tool shipped with.
On GitHub, you can also open the repository's History and revert the last change.
Live previewButtons, menu and forms work here. Nothing is saved.
1){path=parts.slice(1).join('/');}
if(parts.some(x=>x.startsWith('.')||x==='node_modules'))continue;
addFile(path,new Uint8Array(await f.arrayBuffer()),{origin:false});
}
const idx=S.files.get('index.html');
if(!idx){toast('index.html was not found. Pick the folder that contains it.');return;}
loadHTML(textOf(idx),{first:true});$('#welcome').classList.remove('on');
}
$('#cBuiltin').onclick=loadBuiltin;
$('#cFolder').onclick=()=>$('#fFolder').click();
$('#cFiles').onclick=()=>$('#fFiles').click();
$('#fFolder').onchange=e=>openFiles(e.target.files);
$('#fFiles').onchange=e=>openFiles(e.target.files);
$('#cGit').onclick=()=>{$('#welcome').classList.remove('on');showTab('publish');
// need a loaded page for panels; use built-in as the editing shell first
if(!S.ready){loadBuiltin();setTimeout(()=>showTab('publish'),600);}
toast('Fill in your GitHub details, then press "Load latest from GitHub".');};
$('#bOpen').onclick=()=>{$('#welcome').classList.add('on');renderDraft();};
$('#bPublish').onclick=()=>showTab('publish');
$('#bHelp').onclick=()=>$('#help').classList.add('on');
$('#hClose').onclick=()=>$('#help').classList.remove('on');
$('#bUndo').onclick=undo;$('#bRedo').onclick=redo;
document.addEventListener('keydown',e=>{if((e.ctrlKey||e.metaKey)&&e.key==='z'&&!/INPUT|TEXTAREA|SELECT/.test(document.activeElement.tagName)){e.preventDefault();e.shiftKey?redo():undo();}});
$$('[data-dev]').forEach(b=>b.onclick=()=>{$$('[data-dev]').forEach(x=>x.classList.toggle('on',x===b));$('#fw').className='fw '+(b.dataset.dev==='desktop'?'':b.dataset.dev);});
function renderDraft(){
const box=$('#draftBox');box.innerHTML='';
try{const d=JSON.parse(localStorage.getItem('mte_draft')||'null');
if(d&&d.html)box.append(h('div',{class:'msg info',style:'margin-top:12px'},'You have an unfinished draft from '+new Date(d.t).toLocaleString()+'. ',
h('button',{class:'btn small pri',onclick:()=>{if(!S.files.size){loadBuiltin();}setTimeout(()=>{loadHTML(d.html,{commit:true});$('#welcome').classList.remove('on');},S.ready?0:500);}},'Restore draft')));}catch(e){}
}
window.addEventListener('beforeunload',e=>{if(S.hi>0){e.preventDefault();e.returnValue='';}});
loadGH();renderDraft();
S.gitSha=gitSha;window.__MTE=S; // for support/debugging
})();