Current project WYSIWYG Editor

Insert link

Web link E-mail (mailto)

URL Display text (optional)

Open in new tab

Link as button

Insert image

Image URL Or choose a local file

Width

Height

Keep aspect ratio

Compress local image (JPEG)

Max. width when compressing (px)

Insert image as link

Use in e-mail as Alternative text (recommended for e-mail)

Special characters

Emoji

Insert VBA code

Dark mode Light mode

Font family

Font size (px)

Paste your VBA code here

Border (1px black)

Block background

Colour

Insert table

2 × 2

Rows

Columns

With borders

First row as header

Cell border

Which edge(s)? (boxes show the current colour)

top

left

all

right

bottom

Width (px) Style Colour

Cell background

Colour

Size

Value

Outlook compatibility check

Click a row to highlight the element in the editor.

E-mail export (Outlook-safe)

Content width (px)

Base font size (px)

Base font

Page background

Content background

Text colour

Images

Wrap in a table layout (required by Outlook)

Preheader – hidden text shown next to the subject in the inbox

Result

About

HTML Studio – WYSIWYG Editor
Version

Author
www.DIETERLE-programmierung.de

E-mail
marcus@dieterle-programmierung.de

Help – all features

HTML Studio is a WYSIWYG editor: you write and format as in a word processor while clean HTML is produced in the background. The editor consists of the menu bar (top), the toolbar (clusters of buttons), the editor area (WYSIWYG) and – via a toggle – the HTML source view.

Quick start

Type text and format it with the Text cluster (bold/italic/…).
Use Insert to add links, images, tables, special characters, emoji or VBA code.
Use </>HTML (cluster “View”) to switch between WYSIWYG and source at any time.
Pick the theme on the right in the View cluster – your choice is remembered.
Save via File → Save (HTML) or Ctrl+S.

“File” menu

New – empty document (with confirmation).
Open – loads an .html/.htm/.txt file.
Save (HTML) – saves the HTML exactly as shown in the HTML view (Ctrl+S).
Save as text / Save as PDF / Print (HTML) / Print (HTML source).
E-mail export… – builds Outlook-safe HTML: every rule becomes an inline style, the content is wrapped in a table layout with a fixed width, CSS that Outlook cannot render is removed and embedded images become cid: attachments. Copy, save or show the source.
E-mail HTML on save (✓) – normal saving and the VBA bridge then deliver the e-mail HTML too.
The export dialog also holds the preheader: the hidden line the inbox shows next to the subject. Padding characters keep the first words of the mail out of that preview.
Sanitize on save (✓) – cleans automatically on save (safe tags/attributes).
Complete HTML document (✓) – saves a full document including <html><head><body>.

“Edit” menu

Undo/Redo, Cut/Copy/Paste (paste strips Word clutter).
Find & Replace (Ctrl+F), Remove formatting.

“Insert” menu

Link (web/mailto, optionally as a button), Image (size, compression, as link, and Use in e-mail as: attachment cid: / embedded data: / linked URL).
Bulletproof button – in the link dialog tick “Link as button”. Outlook renders neither padding nor rounded corners on a link, so the button is built as a one-cell table with a bgcolor attribute. That is the variant that survives everywhere.
Special characters, Emoji (groups + search).
VBA code – coloured code block; dark/light, font family & size, optional border. Jump labels are rendered as normal text. Editable again via right-click and resizable/alignable via the handles.
Horizontal rule / block background / table.

“Format” menu

Paragraph and Heading 1–6 – the block style of the current paragraph.
Block quote, Inline code – both are inserted with inline CSS so they survive in HTML e-mail.
Line height 1.0 / 1.15 / 1.5 / 2.0 – applies to every paragraph the selection touches.
The same is available in the Paragraph cluster of the toolbar.

“Table” menu

Insert – choose the number of columns/rows in the matrix.
Rows/columns – insert above/below or left/right, delete individually.
Merge cells / split cell.
Toggle header row and zebra stripes.
Alignment of the cell (top/middle/bottom).
Borders (cell border per edge with colour picker) and cell background.
Measurements – row height, column width, table height/width.

“View” menu

Toggle HTML view (Ctrl+Shift+H), Format HTML.
Preview width – full / desktop (the width set for the e-mail export) / mobile 320 px. Shows straight away where the mail breaks on a phone.
Dark-mode simulation – Outlook and Apple Mail invert colours in dark mode. The preview simulates that (images stay as they are) so you can see what becomes unreadable.

“Check” menu

Check HTML (tag structure), Clean HTML (sanitizer).
Outlook compatibility… – a traffic light showing what Outlook will break. Red = breaks (flex/grid, position, negative margins, background images, <style>, web fonts, blocked data: images), amber = works with compromises (border-radius, shadows, missing alt text, image without width, links styled as buttons, dark text without a background), green = handled automatically. Click a row to highlight the element in the editor.

Image & VBA block directly in the editor

Click it → frame with corner handles and a bar: block left/centre/right, wrap left/right, border on/off, delete. (Images keep their aspect ratio, VBA blocks scale freely.)

Right-click

On an image / link / button / block background / VBA block → opens the matching editor (with delete).
Inside a table → context menu. On an emoji/special character → picker (selected; clicking replaces it).

Toolbar (clusters)

History – undo, redo, remove formatting.
Text – bold, italic, underline, strikethrough.
Font – font family, size, text colour, highlight. The font list is grouped (sans-serif, serif, monospace, display & handwriting) and only shows fonts that are actually installed on this PC.
Lists – bullets, numbers (1.,2.,3.), letters (a.,b.,c.).
Align – left/centre/right, indent/outdent.
Paragraph – block style (paragraph / heading 1–6), line height, block quote, inline code.
Insert – link, image, special character, emoji, VBA code, rule, block background, table.
View – HTML toggle, find, preview width, dark-mode simulation, Outlook check, theme picker.

Themes / colour schemes

Light, Dark – classic light and dark.
Glass Light / Glass Dark – blue glass look (translucent, blurred).
Glass Light Grey / Glass Dark Grey – neutral grey glass look.
Glass Sepia – warm, easy-on-the-eyes glass tone.
The last chosen variant is saved automatically and restored on the next start.

“Help” menu

Help – this window. About – version and contact.

Keyboard shortcuts

Ctrl+B / Ctrl+I / Ctrl+U – bold / italic / underline.
Ctrl+Z / Ctrl+Y – undo / redo.
Ctrl+S – save (HTML).
Ctrl+F – find & replace.
Ctrl+Shift+H – toggle HTML view.
Esc – close dialogs/menus/find.

Tips & troubleshooting

Word/web content is stripped of superfluous code automatically on paste.
Paste an image (e.g. a screenshot) with Ctrl+V – the image dialog opens straight away so you can set size, alt text and compression.
Paste VBA code with Ctrl+V – it is recognised automatically and the VBA dialog opens prefilled. Cancel inserts it as plain text instead.
If the HTML looks “untidy”: View → Format HTML or Check → Clean HTML.
Table functions appear on right-click inside a cell.
Click images/VBA blocks to position them (corner handles + bar).
In very large documents (e.g. embedded images) syntax highlighting in the HTML view switches off automatically so that opening and typing stay fast.
Writing an e-mail? Images must not stay embedded as data: – Gmail and Outlook block them. Leave them on Attachment (cid:) and let VBA add the files from getMailAttachments() to the message.

WYSIWYG Editor

YouTube

Preview