Online WYSIWYG HTML Editor

Visual rich text editing with live preview and one-click HTML export

Zero Dependencies · Works Offline
intext
📝 Rich Text Editor
🔒 All content processed locally in your browser, never uploaded to any server

What Can the WYSIWYG HTML Editor Do?

The online WYSIWYG (What You See Is What You Get) HTML editor is a pure frontend rich text editing tool that lets you create formatted HTML content without writing code. All editing happens in real-time in your browser, with support for rich text formatting, image insertion, table creation, and one-click HTML source code export.

Core Features

How to Use

  1. Type or paste text content in the editing area
  2. Use toolbar buttons to format text (bold, color, alignment, etc.)
  3. Click 🔗 to insert a link with a URL
  4. Click 🖼️ to insert a local image file
  5. Click the source code button to view and edit the generated HTML
  6. Click "Copy HTML" or "Download HTML" to export the result

Use Cases

Blog Post Editing

Blog authors can quickly write formatted content without knowing HTML. The WYSIWYG approach makes layout intuitive. Copy the HTML source and paste it into your blog CMS for publishing.

Email Template Creation

Marketing professionals can create HTML email templates using the toolbar for quick formatting, inserting links and images, then copy the HTML source to their email platform.

Rapid Prototyping

Developers can quickly build page content prototypes, format in visual mode, and fine-tune HTML structure in source mode for improved development efficiency.

Extended Knowledge

WYSIWYG (What You See Is What You Get) is an editing paradigm where the display during editing matches the final output. Modern browsers provide native rich text editing via the contentEditable API and execCommand methods. Compared to third-party editor libraries like TinyMCE and CKEditor, native API-based editors are lighter and require no additional loading, ideal for quick editing tasks. Note that execCommand has been marked as deprecated by W3C, but all major browsers still fully support it.

FAQ

Which browsers are supported?
All modern browsers including Chrome, Firefox, Safari, and Edge are supported. Mobile browsers also work, but desktop provides the best editing experience.
Is there a size limit for inserted images?
Images are converted to Base64 encoding embedded in HTML, so images under 2MB are recommended. Larger images will bloat the HTML file and affect loading speed.
Is content auto-saved?
The editor automatically saves content to the browser's localStorage. Content persists across page refreshes. Clearing browser data will delete saved content.
What can I edit in source code mode?
Source mode displays the full HTML source code. You can directly modify any HTML tags and attributes. Switching back to visual mode automatically renders your changes.
Does the editor support keyboard shortcuts?
Common editing shortcuts are supported: Ctrl+B for bold, Ctrl+I for italic, Ctrl+U for underline, Ctrl+Z for undo, Ctrl+Y for redo, Ctrl+Shift+C to copy HTML, Ctrl+Enter to toggle source mode.

🔗 Related Tools

Age CalculatorBody Shape CalculatorComplaint Letter

WYSIWYG HTML Editor | No Signup, Client-Side · No Server Uploads

Feedback: dexshuang@google.com

Insert Table
\n\n'+html+'\n \n'; var blob=new Blob([fullHTML],{type:'text/html'});var a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='document.html';a.click();URL.revokeObjectURL(a.href);showToast('HTML file downloaded'); } function insertLink(){var url=prompt('Enter link URL:','https://');if(url)execCmd('createLink',url);} function insertImage(){var input=document.createElement('input');input.type='file';input.accept='image/*';input.onchange=function(e){var file=e.target.files[0];if(!file)return;var reader=new FileReader();reader.onload=function(ev){execCmd('insertImage',ev.target.result);};reader.readAsDataURL(file);};input.click();} function showTableDialog(){document.getElementById('tableDialog').classList.add('show');} function hideTableDialog(){document.getElementById('tableDialog').classList.remove('show');} function insertTable(){ var rows=parseInt(document.getElementById('tableRows').value)||3;var cols=parseInt(document.getElementById('tableCols').value)||3; var html=''; for(var c=0;cHeader '+(c+1)+''; html+=''; for(var r=0;r';for(var c=0;cCell';html+='';} html+='

';editor.focus();document.execCommand('insertHTML',false,html);hideTableDialog();saveToStorage(); } function loadExample(){ editor.innerHTML='

Welcome to the WYSIWYG HTML Editor

'+ '

This is a What You See Is What You Get rich text editor. You can:

'+ ''+ '

Sample Table

'+ '
FeatureDescription
Rich TextBold, italic, colors, etc.
Source ModeView and edit HTML source
'+ '

Click Copy HTML to export your work!

'; saveToStorage(); } function clearEditor(){if(confirm('Clear all content?')){editor.innerHTML='';sourceArea.value='';saveToStorage();}} function saveToStorage(){try{localStorage.setItem('wysiwyg-content-en',editor.innerHTML);}catch(e){}} function loadFromStorage(){try{var saved=localStorage.getItem('wysiwyg-content-en');if(saved)editor.innerHTML=saved;}catch(e){}} function showToast(msg){var t=document.createElement('div');t.style.cssText='position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#10b981;color:#fff;padding:10px 24px;border-radius:10px;font-size:.9rem;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3)';t.textContent=msg;document.body.appendChild(t);setTimeout(function(){t.remove()},2000);} editor.addEventListener('input',saveToStorage); document.addEventListener('keydown',function(e){if(e.ctrlKey&&e.shiftKey&&e.key==='C'){copyHTML();e.preventDefault();}if(e.ctrlKey&&e.key==='Enter'){toggleSource();e.preventDefault();}}); loadFromStorage();