How to Use HeyHTML Editor: A Complete Guide to the Visual HTML Editor (Drag & Drop)

Welcome to

Visit:

Click the Edit button to enter editing mode. Three things happen:

1. The Edit button highlights in indigo — edit mode is now active.


2. A feature-rich floating toolbar appears below the control bar — this is your main control panel.


3. The page content becomes interactive — you can click to select elements, drag to move them, and double-click to edit text.

Click Edit again to exit editing mode and return to normal browsing.

Your First Edit — Three Steps

1. 
   Click any element on the page (a paragraph, button, or card) to select it.


2. 
   Double-click the text area to edit the content directly.


3. Press Ctrl+S (Mac: Cmd+S) to save the edited HTML file to your computer.

That's it — you've completed your first edit. (If your imported HTML file briefly appears blank, give it a moment to load — this depends on the complexity of the file.)

2. Interface Overview

In edit mode, the interface is composed of the following areas:

3. Selecting & Navigating Elements

Click to Select

Move your mouse over any element on the page (text, images, buttons, cards, etc.). A purple dashed outline appears around it. Click to select. The outline turns solid, and the toolbar activates all buttons relevant to that element.

Note: if clicking doesn't select an element, try pressing and holding the mouse button while dragging slightly within the element.

Select Parent (Esc Key)

Sometimes the element you want is nested inside others. Press Esc to step upward from the current element to its parent:

Text inside a paragraph → Paragraph → Container div → Section → ...

Each press of Esc moves the selection one level outward. When the outermost element is selected, pressing Esc again deselects everything.

So if you want to select a deeply nested element, you can first select something inside it, then press Esc repeatedly until you reach the desired parent.

Insert Modes

HeyHTML supports two insert modes: Float and Flow:

• 
  Float mode: The new element is absolutely positioned. It floats above the page layout without affecting surrounding elements. After inserting, you can drag it anywhere.
  

Note: If you insert via double-clicking the page in Flow mode, the element is inserted at the click position. However, if that position falls outside the page layout, it will be inserted at the end of the page.

We recommend using the toolbar Insert... button. When using Flow mode, select an element first — this ensures the new element lands exactly where you want it.

Inserting a Table

Choosing Table opens a dialog where you can set:

• Rows


• Columns

After confirmation, a table with the specified dimensions is inserted immediately. You can then:

• Drag the table to reposition it


• Double-click any cell to edit its content


• Right-click the table area for row/column operations

9. Right-Click Context Menu

In edit mode, right-clicking any element opens a context menu with the following shortcuts:

Table Operations

Insert Row Above: Add a new row above the selected cell's row

Insert Row Below: Add a new row below the selected cell's row

Insert Column Left: Add a new column to the left of the selected cell's column

Insert Column Right: Add a new column to the right of the selected cell's column

Delete Current Row: Remove the row containing the selected cell

Delete Current Column: Remove the column containing the selected cell

Toggle Table Style: Cycle through table style presets

Dragging to Resize Tables

Select the entire table, then drag the resize handles to change its dimensions. Column widths adjust proportionally to maintain a balanced layout.

Editing Cell Content

Double-click any cell to enter editing mode. You can:

• Type and modify text content.


• Press Shift+Enter to insert a line break (<br>) within a cell.


• Use the toolbar to format text inside the cell.

12. Chart Typography — Data Visualization Layout

Click the Chart Typography button (the grid icon) on the toolbar to open a panel on the right side of the page. This panel is designed for building data visualization and infographic layouts.

Preset Templates

Click any template to insert it onto the page:

Fine-Tuning Controls

Below the templates, the panel provides typography controls:

Template Features

• All templates include complete CSS styles and are ready to use immediately.


• Template text is double-clickable for editing.


• Template elements can be freely dragged and resized.


• All operations are undoable.

13. Undo & Redo

HeyHTML has a full history system — nearly every action can be undone and redone.

Actions That Support Undo

• Moving elements (both drag and arrow key nudge)


• Resizing elements


• Style changes (colors, fonts, border radius, shadow, etc.)


• Text content edits


• Inserting and deleting elements


• Changing tag types (e.g., P → H1)


• Duplicate, paste, and delete


• Grouping and ungrouping


• Locking and unlocking


• Layer reordering


• Table row/column operations


• Inserting/clearing page break markers

How to Undo & Redo

You can also click the Undo and Redo buttons at the right end of the toolbar.

Note: When editing text inline (double-click mode), Ctrl+Z and Ctrl+Y are handled by the browser for text-level undo/redo. They do not trigger the editor's element-level undo/redo at that time.

14. File Operations

Opening an HTML File

Method 1: Control Bar Button

Click the Open button in the top control bar and select a .html file from the file picker.

Method 2: Keyboard Shortcut

Press Ctrl+O (Mac: Cmd+O).

Once opened, the file content loads into the editing area and you can start editing immediately.

Saving an HTML File

Method 1: Control Bar Button

Click the Save As button in the top control bar.

Method 2: Keyboard Shortcut

Press Ctrl+S (Mac: Cmd+S).

When saving:

• The editor automatically strips all editor-injected attributes and elements (such as data-hve-* markers, editor UI components, etc.).


• The output is a clean, ready-to-use HTML file.


• The file retains its original name, or defaults to untitled.html if unnamed.

About Data Privacy & Security

HeyHTML runs entirely in your browser:

• 
  No sign-up required — Open and start editing.


• 
  No file uploads to any server — All your HTML content and edits stay local.


• 
  Offline support — Once the page is loaded, you can disconnect from the internet and keep editing.


• 
  Data never leaves your device — Nothing is ever sent to the cloud.

15. Full Keyboard Shortcuts Reference

Global Shortcuts (Edit Mode)

Text Editing Shortcuts (while double-click editing)

Mouse Operations

16. FAQ & Tips

Q1: How do I select a deeply nested element?

Use the Esc key to step upward through parent elements. Each press moves the selection one level outward. Stop when you reach the desired layer.

Q2: I moved an element and want to restore its original position. What do I do?

Press Ctrl+Z (Mac: Cmd+Z) to undo the move. All moves, resizes, and style changes are undoable.

Q3: How do I quickly unify the styling of multiple elements?

Use the Format Brush: select a well-styled element → click the Format Brush button → click each target element. Double-click the Format Brush for continuous mode to batch-apply styles.

Alternatively, use Ctrl+Shift+C to copy styles → select target element(s) → Ctrl+Shift+V to paste.

Q4: I accidentally moved an element to the wrong position and did many other things first. Can I still fix it?

Yes. Press Ctrl+Z (Mac: Cmd+Z) repeatedly to step backward through your edit history (up to 100 steps) until you reach the desired state.

Q5: How do I protect an element from being accidentally modified?

Select the element and press Ctrl+L (Mac: Cmd+L) to lock it. A locked element:

• Cannot be selected, moved, or resized.


• Cannot be deleted.


• Shows a lock icon 🔒 at its top-right corner.

Press Ctrl+L again to unlock.

Q6: Will my edits overwrite the original file on my computer?

No. The editor runs in your browser — all edits happen in memory. Only when you click Save As and download the file are changes written to a new file. Your original local file is never automatically overwritten.

Q7: Can I use HeyHTML on a phone or tablet?

Yes. HeyHTML is a responsive web application. On touch devices:

• 
  Tap to select (replaces mouse click).


• 
  Double-tap to enter text editing mode.


• 
  Long-press to trigger the context menu.


• The toolbar automatically adapts to the screen width.

Q8: Which browsers are supported?

We recommend the latest versions of Chrome, Edge, Firefox, or Safari. All modern browsers work well.

Q9: Is the exported HTML code clean?

Yes. When you save, the editor automatically strips all editor-related markers (data-hve-* attributes, editor-injected styles and elements, contenteditable attributes, etc.). The exported HTML file contains only your page content.

Q10: Can I edit multiple pages at the same time?

The editor works on one document at a time. To edit multiple files simultaneously, open each in a separate browser tab.

Pro Tips

1. Precise Layout — Use drag + alignment guides for rough positioning, then fine-tune with arrow keys (1px) or Shift+arrow (10px) for pixel-perfect placement.




2. Batch Formatting — Use continuous Format Brush mode to quickly unify the appearance of all similar elements (all buttons, all cards) across the page.




3. Layer Management — Use the context menu's Bring forward, Send backward, Bring to Front, and Send to Back commands to control stacking order. Combine with Group for complex layouts.




4. Build Data Visualizations — Use the Chart Typography panel to rapidly assemble data presentation pages. Insert a template, edit the text, then fine-tune typography — 10× faster than building from scratch.




5. Lock Key Elements — After finalizing your layout, lock structural elements (headers, footers) with Ctrl+L to avoid accidentally moving them while editing surrounding content.

Shortcut Quick Reference Card

Bookmark or print this card for quick access to the most-used shortcuts.

This guide applies to — free online HTML editing for everyone.