We’ve come a long way in HTML email coding and design…but the tools still feel a bit dull and hindering at times.
If you’ve used Dreamweaver recently, you know what I’m talking about. It has limited modern support and just hasn’t kept pace with developer’s evolving needs.
On the flip side, there are platforms out there that attempt to modernize the email coding process. Some offer features like live preview, focus, and inspect modes. Too often, though, these cool tools come at a buggy expense: features that crash without warning, preview windows that don’t render consistently, or interfaces that freeze up the moment you really need them most.
Even Visual Studio Code needs a little help to become the ultimate HTML editor. The usual go-to is the Live Server extension, but it opens your preview in a separate browser window—which feels like a missed opportunity (because previewing inside VS Code would be too convenient…). And maybe it’s just me, but being able to click a spot in the preview and jump straight to that line in the code (or vice versa) is super helpful.
It seemed like we were stuck between software that feels outdated and modern tools that feel unfinished.
So, we built our own solution: Email Editing Tools—a free Visual Studio Code extension designed specifically for HTML email developers who want a smooth and reliable coding experience.
If you’re reading this, well, you likely already know that coding, modifying, or just hacking HTML code can be quite tedious and frustrating. You write or edit code in one tab, maybe you have to preview it in another tab or on a browser separate from your app, hope your changes appear, and then try to locate exactly where the alignment (or other common issue) is coming from, then repeat 20-30+ times…it can be just simply annoying and clunky!
We set out to solve all the annoyances with our extension: no more bugs, freezing, or slamming your hand on your desk.
Here’s what our extension does:
➡️ Live email preview: See your email edits update in real time. No separate browser tabs and no manual refreshes. Just instant feedback!
➡️ Focus Mode: Let’s say you want to locate a specific <table> (or other element) on your preview. Click the code element, and the preview jumps to the matching section and outlines it (or your table, in this case). No more hunting through tons of code to find the visual result of your changes.
➡️ Inspect Mode: On the flip side, maybe you are seeing a layout issue and want to find where in your code it is coming from. Click any section or element in the live preview, and immediately get taken to the source of the issue in your code.
➡️ Wrap: This feature formats your email with the proper HTML structure, adds critical tags for client compatibility, and ensures table-based layouts render correctly.
➡️ Format: This feature will indent your code properly, normalize inconsistent spacing, and overall, just helps maintain clean HTML.
We know there are other tools out there. We’ve used them. We’ve tried to get their customer support to debug them. And we’ve definitely sworn at them!
Take some of the modern tools, for example (we won’t name names). They promise a smooth and polished experience—and they do some things well—but we have found that most are riddled with bugs, render previews inconsistently, and completely crash out. And ultimately, customer support for some of these tools is just poor.
And, Dreamweaver? Ah, the old relic. It’s been a part of the developer landscape for decades, but at this point it is just that: a relic. Something to respect, but leave behind.
Email Editing Tools is different because it:
– Lives inside VS Code, the editor lots of email devs already use.
– Syncs preview and code seamlessly.
– Works with your existing files and repositories.
– Works natively with GitHub for version control.
You’ll immediately see the preview pane open alongside your code. Toggle Focus or Inspect modes using the buttons in the preview pane.
Another note: Snippets are crucial to quickly insert common structures like tables, components, etc. Visual Studio Code supports comprehensive snippet functionality, and we recommend a few settings to enhance your experience.
To modify your settings (within VS Code):
“snippets.viewer.expandSnippetFiles”: true,
“snippets.viewer.focusOnActiveEditorSnippets”: true,
“snippets.viewer.showOnlyActiveEditorLanguageSnippets”: true,
“snippets.viewer.skipLanguageSnippets”: “vb,swift,php,java,fsharp,csharp,cpp,c,coffeescript,bat,groovy,typescript,typescriptreact,javascriptreact,javascript”,
“editor.tabCompletion”: “onlySnippets”,
“editor.snippetSuggestions”: “top”,
“emmet.showAbbreviationSuggestions”: false
These settings ensure that:
I will note, it took a little but of messing around to get my snippets functioning the way I needed them to, only because I had other default settings in place before customization.
HTML email development is already challenging enough with inline styles, table layouts, and inconsistent rendering across clients. Your development software or tools shouldn’t make it harder! Dreamweaver feels outdated and other modern platforms promise a lot (and some do things well enough) but still often crash and underdeliver. That’s why we built Email Editing Tools, a free Visual Studio Code extension made specifically for HTML email developers. It features a live preview, Focus mode to jump from code to preview, Inspect mode to jump from preview to code, and a few formatting tools to keep things clean.
We hope you find as much value in the extension and VS code combo as we do!
Let us know what you think.
