Welcome to HeyHTML — a WYSIWYG HTML editor that runs right in your browser. Build web pages by dragging, dropping, and clicking, just like making a slide deck — no coding required.
HeyHTML packs a lot of features and keyboard shortcuts into a compact interface. If you're using it for the first time, some of them might not be immediately obvious.
This guide walks you through every major feature and shares practical tips to help you get productive fast.
Visit: HeyHTML
1. Quick Start
Entering Edit Mode
When you open the HeyHTML website, you'll see a Control Bar fixed at the very top of the page:
Click the Edit button to enter editing mode. Three things happen:
- The Edit button highlights in indigo — edit mode is now active.
- A feature-rich floating toolbar appears below the control bar — this is your main control panel.
- 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
- Click any element on the page (a paragraph, button, or card) to select it.
- Double-click the text area to edit the content directly.
- 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:
Top Control Bar
Always fixed at the top of the page, providing global actions:
| Button | Function |
|---|---|
| Edit | Toggle between Edit Mode and View Mode |
| Open | Open a local HTML file for editing |
| Save As | Download the current document as an HTML file |
Floating Toolbar
Located below the control bar, organized into functional groups separated by vertical dividers:
| Group | Tools |
|---|---|
| Text Format | Bold, Italic, Underline, Strikethrough |
| Font & Heading | Font Family, Font Size, Heading Level (Paragraph, H1–H4) |
| Alignment | Align Left, Align Center, Align Right |
| Colors | Text Color, Background Color |
| Visual Effects | Border Radius, Shadow, Opacity |
| Insert | Insert... (Container, Text Box, Heading, Table, Image, Button, Divider, Link, List, Quote) |
| Format Brush | Copy styles from one element and apply them to others |
| Element Actions | Duplicate Element, Bring Forward, Send Backward, Lock/Unlock, Delete |
| Panels | Page Sorter, PDF Pagination & Export, Chart Typography |
| History | Undo, Redo |
Tip: When no element is selected, most element-action buttons appear dimmed (except Insert..., Page Sorter, Chart Typography, Undo, and Redo). Once you select an element, all buttons become active.
The Page Canvas
The HTML content you're editing. In edit mode:
- Hovering over an element shows a purple dashed outline — it's selectable.
- Clicking selects it — the outline becomes a solid indigo line with 8 blue resize handles at the corners and edges.
If clicking doesn't select an element, try pressing and holding the mouse button while dragging slightly.
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.
Quick Targeting
- As you move your mouse around the page, the element under the cursor is automatically highlighted — this helps you know what will be selected when you click.
- The editor intelligently identifies editable HTML elements and avoids selecting unnecessary internal structures.
4. Drag & Move with Smart Alignment
Free Drag
Select any element, then hold the mouse button and drag to move it anywhere on the page.
During movement:
- The element follows your cursor in real time with a subtle transparency and shadow, so you can see the target position.
- As you approach other elements, magenta alignment guides appear automatically.
Smart Alignment Guides
HeyHTML calculates alignment relationships in real time as you drag:
| Guide Type | Meaning |
|---|---|
| Horizontal line | Top, bottom, or center alignment with a nearby element |
| Vertical line | Left, right, or center alignment with a nearby element |
| Equal-spacing markers | Shown when three or more elements have equal spacing |
| Distance labels | Exact pixel values (px) displayed at key points on the guides |
This alignment system helps you:
- Line up multiple elements on the same horizontal axis
- Maintain equal spacing between elements
- Achieve pixel-precise positioning
Keyboard Nudge (Arrow Keys)
With an element selected, use the arrow keys for precise adjustments:
| Keys | Effect |
|---|---|
| ↑ ↓ ← → | Move 1 pixel in that direction |
| Shift + ↑ ↓ ← → | Move 10 pixels in that direction |
5. Resizing Elements
When an element is selected, 8 indigo handles appear on its border.
| Handle Position | Drag Effect |
|---|---|
| Four corners | Resize width and height simultaneously |
| Top / Bottom midpoints | Change height only |
| Left / Right midpoints | Change width only |
The element resizes in real time as you drag; release the mouse to finalize. All resize operations are recorded in the undo history.
6. Inline Text Editing
Entering Text Edit Mode
Double-click any text-containing element to enter inline editing mode. In this mode:
- The element border turns solid blue (distinct from the selection indigo).
- You can type, select, copy, and paste — just like in a word processor.
- Standard cursor positioning, text selection, and clipboard operations are fully supported.
Text Formatting
You can format text in two ways while editing:
Method 1: Toolbar Buttons
Select some text, then click a formatting button on the toolbar:
- B — Bold
- I — Italic
- U — Underline
- S — Strikethrough
Method 2: Keyboard Shortcuts (while editing text)
| Windows / Linux | Mac | Effect |
|---|---|---|
| Ctrl+B | Cmd+B | Bold |
| Ctrl+I | Cmd+I | Italic |
| Ctrl+U | Cmd+U | Underline |
Exiting Text Edit Mode
- Click anywhere outside the element.
- Press Esc.
Changing Font, Size, and Heading Level
Select the element (click once — no need to enter text edit mode), then:
Change Font — Click the Font Family dropdown on the toolbar and choose from 13 fonts.
Change Font Size — Click the Font Size button and pick a size from 10px to 48px.
Change Heading Level — Click the Heading Level button to convert the element to Paragraph (P), Heading 1 (H1), Heading 2 (H2), Heading 3 (H3), or Heading 4 (H4).
Changing Text Color & Background Color
Click the Text Color (letter A icon) or Background Color (square icon) button on the toolbar:
- Pick from 40 preset colors for quick selection.
- Use the native color picker for any custom color.
- Type a hex color value (e.g.,
#4F46E5) and press Enter.
7. Format Brush — One-Click Style Copy
The Format Brush is a major productivity feature. It lets you copy styles from one element and apply them to others instantly.
How to Use
- Select a styled element (the source).
- Click the Format Brush button (paintbrush icon) on the toolbar — the button lights up in light indigo.
- Click another element (the target) — the source element's styles are applied immediately.
Continuous Mode
Double-click the Format Brush button to enter continuous mode:
- The button turns deep indigo, indicating continuous mode is active.
- You can click one target element after another — each receives the same styles.
- Click the Format Brush button again, or press Esc, to exit continuous mode.
8. Inserting New Elements
Click the Insert... button (the + icon) on the toolbar, or double-click an empty area of the page — a + marker appears. Click it to open the Insert Panel.
Before inserting, make sure you understand the two insertion modes!
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.
- Flow mode: If an element is already selected, the new element is inserted right after it. If nothing is selected, it goes to the top of the page. In Flow mode, we recommend selecting the element above your desired insertion point first.
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:
Basic Operations
| Menu Item | Description |
|---|---|
| ✏️ Edit Text | Enter inline text editing mode (same as double-click) |
| 📋 Duplicate Element | Create a copy of the element right below the original |
Style Operations
| Menu Item | Shortcut | Description |
|---|---|---|
| 🎨 Copy Style | Ctrl+Shift+C |
Copy all inline styles from the current element |
| 🖌️ Paste style | Ctrl+Shift+V |
Apply previously copied styles to the selected element(s) |
| 🧹 Clear style | — | Remove all inline CSS styles from the element(s) |
Tip: Copied styles stay in memory and won't be lost when you select other elements. You can copy a button's style, then select multiple elements and paste.
Layer Operations
| Menu Item | Description |
|---|---|
| ⬆️ Bring forward | Swap the element with its previous sibling |
| ⬇️ Send backward | Swap the element with its next sibling |
| ⏫ Bring to Front | Move the element to the very front of its parent container |
| ⏬ Send to Back | Move the element to the very back of its parent container |
Lock & Group
| Menu Item | Shortcut | Description |
|---|---|---|
| 🔒 Lock Element / 🔓 Unlock Element | Ctrl+L |
Lock prevents moving, resizing, or deleting; unlock restores editability |
| 🔗 Group | Ctrl+G |
Combine selected elements into one group |
| 🔓 Ungroup | Ctrl+Shift+G |
Split a group back into individual elements |
Visual indicator for locked elements: A small lock icon 🔒 appears at the top-right corner, and the selection outline turns gray.
Delete
| Menu Item | Shortcut | Description |
|---|---|---|
| 🗑️ Delete element | Del |
Remove the selected element(s) — supports batch delete |
10. Multi-Select & Grouping
Selecting Multiple Elements
Hold Ctrl (Mac: Cmd) and click additional elements to add them to the current selection.
When multiple elements are selected:
- Each selected element shows an indigo outline.
- A multi-select toast appears at the bottom-right corner, showing the element count and quick-action buttons.
- You can drag, duplicate, delete, lock, or group all selected elements at once.
Multi-Select Toast
The toast panel at the bottom-right shows:
- The number of selected elements (e.g., "3 elements selected")
- Quick-action buttons: Copy Style, Paste style, Delete, Group, and Deselect
- Available keyboard shortcut hints
Grouping (Ctrl+G)
Select multiple elements, then press Ctrl+G (Mac: Cmd+G) or choose Group from the context menu:
- The elements are wrapped inside a container.
- Clicking any part of the group selects the entire group; dragging the group moves everything together.
- The group's selection outline is a purple dashed line (distinct from the solid outline of individual elements).
Ungrouping (Ctrl+Shift+G)
Select a group, then press Ctrl+Shift+G (Mac: Cmd+Shift+G) or choose Ungroup from the context menu. The group is dissolved back into independent elements.
11. Table Editing
HeyHTML provides full table editing capabilities:
Selecting Tables and Cells
- Click a cell — Selects that individual cell.
- Click the table's outer border — Selects the entire table. If this is hard to target, press Esc repeatedly to step up to the table level.
- Right-click — Choose Select Entire Table from the menu.
With a table or cell selected, right-click to see the table operations menu:
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:
| Template | Use Case | Content |
|---|---|---|
| Data Card | Single large metric display | Large number + label + trend indicator |
| Metric Row | Metric with progress bar | Label + progress bar + percentage |
| Comparison Data | Side-by-side value comparison | Left value + VS label + right value |
| Table Heading | Table header section | Main title + subtitle + update timestamp |
| Legend | Color-coded legend list | Color dots + names + values |
| Annotation | Text annotation | Arrow + description text |
| Badge | Status badges | 4 color-coded status badges |
| KPI Grid | 2×2 metric matrix | Grid of 4 metric cards |
Fine-Tuning Controls
Below the templates, the panel provides typography controls:
| Control | Function |
|---|---|
| Font Size slider | Adjust the font size of numeric text |
| Font Weight selector | Switch between Light / Regular / Medium / Bold |
| Color theme | Switch between preset color schemes |
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
| Action | Windows / Linux | Mac | Note |
|---|---|---|---|
| Undo | Ctrl+Z |
Cmd+Z |
Step backward through history |
| Redo |
Ctrl+Y or Ctrl+Shift+Z
|
Cmd+Y or Cmd+Shift+Z
|
Recover an undone operation |
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+ZandCtrl+Yare 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.htmlif 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)
| Action | Windows / Linux | Mac |
|---|---|---|
| Undo | Ctrl+Z |
Cmd+Z |
| Redo |
Ctrl+Y or Ctrl+Shift+Z
|
Cmd+Y or Cmd+Shift+Z
|
| Save As | Ctrl+S |
Cmd+S |
| Open File | Ctrl+O |
Cmd+O |
| Duplicate Element | Ctrl+D |
Cmd+D |
| Copy Style | Ctrl+Shift+C |
Cmd+Shift+C |
| Paste style | Ctrl+Shift+V |
Cmd+Shift+V |
| Group | Ctrl+G |
Cmd+G |
| Ungroup | Ctrl+Shift+G |
Cmd+Shift+G |
| Lock/Unlock | Ctrl+L |
Cmd+L |
| Page Sorter | Ctrl+Shift+P |
Cmd+Shift+P |
| Delete element |
Del or Backspace
|
Del or Backspace
|
| Deselect / Select Parent | Esc |
Esc |
| Nudge 1px |
↑ ↓ ← →
|
↑ ↓ ← →
|
| Nudge 10px | Shift+↑↓←→ |
Shift+↑↓←→ |
Text Editing Shortcuts (while double-click editing)
| Action | Windows / Linux | Mac |
|---|---|---|
| Bold | Ctrl+B |
Cmd+B |
| Italic | Ctrl+I |
Cmd+I |
| Underline | Ctrl+U |
Cmd+U |
| Line break in cell | Shift+Enter |
Shift+Enter |
Mouse Operations
| Action | Effect |
|---|---|
| Click element | Select element |
| Ctrl/Cmd + Click | Add to selection (multi-select) |
| Double-click text | Enter inline text editing mode |
| Right-click element | Open context menu |
| Drag selected element | Move element |
| Drag resize handle | Resize element |
| Double-click Format Brush | Enter continuous format brush mode |
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
Precise Layout — Use drag + alignment guides for rough positioning, then fine-tune with arrow keys (1px) or Shift+arrow (10px) for pixel-perfect placement.
Batch Formatting — Use continuous Format Brush mode to quickly unify the appearance of all similar elements (all buttons, all cards) across the page.
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.
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.
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.
| Action | Windows / Linux | Mac |
|---|---|---|
| Undo | Ctrl+Z |
Cmd+Z |
| Redo | Ctrl+Y |
Cmd+Y |
| Save As | Ctrl+S |
Cmd+S |
| Duplicate Element | Ctrl+D |
Cmd+D |
| Copy Style | Ctrl+Shift+C |
Cmd+Shift+C |
| Paste style | Ctrl+Shift+V |
Cmd+Shift+V |
| Group | Ctrl+G |
Cmd+G |
| Ungroup | Ctrl+Shift+G |
Cmd+Shift+G |
| Lock/Unlock | Ctrl+L |
Cmd+L |
| Delete |
Del / Backspace
|
Del |
| Select Parent / Deselect | Esc |
Esc |
| Nudge 1px |
↑ ↓ ← →
|
↑ ↓ ← →
|
| Nudge 10px | Shift+↑↓←→ |
Shift+↑↓←→ |
| Edit Text | Double-click | Double-click |
| Multi-Select | Ctrl+Click |
Cmd+Click |
| Page Sorter | Ctrl+Shift+P |
Cmd+Shift+P |
This guide applies to HeyHTML as of May 2026. Features are continuously being updated.
HeyHTML — free online HTML editing for everyone.
Top comments (0)