HeyHTML User Guide

Quick Start

Entering Edit Mode

When you open the HeyHTML editor, you will see a Control Bar fixed at the top of the page:

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

1. The Edit button highlights in coral — edit mode is active.
2. A floating toolbar appears below the control bar with formatting and manipulation tools.
3. The page becomes interactive — click to select, drag to move, 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, image, or card) to select it.
2. Double-click the selected text to edit it inline.
3. Press Ctrl+S (Mac: ⌘+S) to save the edited HTML file to your computer.

Interface Overview

In editing mode, the interface has two main control areas plus the page content itself.

Top Control Bar

Always visible at the very top of the page, the control bar provides three global actions:

Floating Toolbar

Located below the control bar, the toolbar is organized into functional groups separated by vertical dividers:

The Page Canvas

In edit mode, the page content becomes interactive:

• Hovering over an element shows a dashed outline — it's selectable.
• Clicking selects the element — the outline becomes a solid coral line with 8 resize handles at the corners and edges.
• If clicking doesn't select the element, try pressing and holding the mouse button while dragging slightly.

Selecting & Navigating Elements

Click to Select

Move your mouse over any element — a dashed outline appears. Click to select it. The outline turns solid, and the toolbar activates all buttons relevant to that element.

Select Parent (Esc Key)

Elements are often nested. Press Esc to navigate upward from the current element to its parent:

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

Hover Preview

As you move your mouse around the page, the element under the cursor is automatically highlighted. This helps you understand which element will be selected when you click.

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.
• As you approach other elements, magenta alignment guides appear automatically.

Smart Alignment Guides

HeyHTML calculates alignment relationships in real time as you drag:

Keyboard Nudge (Arrow Keys)

With an element selected, use the arrow keys for precise positioning:

Resizing Elements

When an element is selected, 8 resize handles appear on its border — one at each corner and one at the midpoint of each edge:

All resize operations are recorded in the undo history.

Inline Text Editing

Entering Text Edit Mode

Double-click any text-containing element to enter inline editing. In edit mode:

• The element border shows a dark coral outline (instead of the regular selection outline).
• You can type, select text, copy, and paste just like in a word processor.

Text Formatting

Using the toolbar (select text first, then click a button):

Using keyboard shortcuts (while editing text):

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 use the toolbar dropdowns:

Text Color & Background Color

Click the Text Color (letter "A" icon) or Background Color button on the toolbar to open a color panel with:

• A grid of 40 preset colors for quick selection.
• A native browser color picker for any custom color.
• A hex code input field — type a value like #cc785c and press Enter.

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 in a single click.

How to Use

1. Select a styled element (the source).
2. Click the Format Brush button (paintbrush icon) on the toolbar — it highlights.
3. Click another element (the target) — the source element's styles are instantly applied.

Continuous Mode

Double-click the Format Brush button to enter continuous mode:

• The Format Brush button stays highlighted, indicating continuous mode.
• You can click one target after another — each receives the same styles.
• Click the Format Brush button again, or press Esc, to exit continuous mode.

Styles Copied by Format Brush

Inserting New Elements

Click the Insert... button (the + icon) on the toolbar, or double-click an empty area of the page to reveal a Quick Add "+" button. Click it to open the Insert Panel.

Insert Modes: Float vs. Flow

Available Elements

Inserting a Table

Choosing Table from the Insert Panel opens a dialog where you can set the number of Rows and Columns. After insertion, you can:

• Drag to reposition the table.
• Double-click any cell to edit its content.
• Right-click for table-specific operations (see Table Editing).

Right-Click Context Menu

In edit mode, right-click any element to open the context menu:

Basic Operations

Style Operations

Layer Operations

Lock & Group

Delete

Multi-Select & Grouping

Selecting Multiple Elements

Hold Ctrl (Mac: ⌘ Cmd) and click additional elements to add them to the current selection. You can also Shift+click to toggle individual elements in and out of the selection.

When multiple elements are selected:

• Each selected element shows an outline.
• A multi-select toast appears at the bottom-right corner showing the element count and quick-action buttons: Group, Delete, and a hint for "Shift+click to select more".
• You can drag, duplicate, delete, lock, or group all selected elements at once.

Grouping (Ctrl+G)

Select multiple elements, then press Ctrl+G (Mac: ⌘+G) or choose Group from the context menu:

• The elements are wrapped inside a container.
• Clicking any part of the group selects the whole group.
• Drag the group to move everything together.
• The group's selection outline is a teal dashed line (distinct from the solid coral line of individual elements).

Ungrouping (Ctrl+Shift+G)

Select a group, then press Ctrl+Shift+G or choose Ungroup from the context menu. The group is dissolved back into independent elements.

Table Editing

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 navigate up to the table level.
• Right-click → Select Entire Table — Another way to select the full table.

Table Context Menu

Right-click a selected table or cell to access table-specific operations:

Resizing Tables

Select the entire table, then drag any of the 8 resize handles. Column widths adjust proportionally.

Editing Cell Content

Double-click any cell to edit its text. Press Shift+Enter to insert a line break (<br>) within a cell.

Chart Typography Panel

Click the Chart Typography button (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: Font Size slider, Font Weight selector (300–800), Letter Spacing, Line Height, and Text Align.

All templates come with complete CSS styles, are ready to use immediately, and support double-click text editing, drag-and-move, and resize — all undoable.

Undo & Redo

HeyHTML has a full history system supporting up to 100 undo levels. Nearly every action can be undone and redone.

Actions That Support Undo

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

File Operations

Opening an HTML File

Using the button: Click Open in the top control bar and select a .html file from your computer.

Using the shortcut: Press Ctrl+O (Mac: ⌘+O).

Saving Your Work

Using the button: Click Save As in the top control bar.

Using the shortcut: Press Ctrl+S (Mac: ⌘+S).

When you save, the editor automatically strips all editor-injected attributes and elements (data-hve-* markers, contenteditable, editor UI components). The output is a clean, semantic HTML file ready to use anywhere. The file keeps its original name, or defaults to untitled.html if unnamed.

Data Privacy & Security

Keyboard Shortcuts Reference

Global Shortcuts (Edit Mode)

Text Editing Shortcuts (while double-click editing)

Mouse Operations

Frequently Asked Questions

Pro Tips