2013 was a huge milestone year for Coherence Labs, and it’s with great excitement and anticipation that we look forward to the year to come.

The first release of TypeMetal, in June, marked the culmination of a year and a half of tireless development — striving to produce an intuitive, professional-grade HTML editing experience unlike anything else on the Mac. To do that, we started from scratch, and built an entirely new editing engine that lives and breathes modern, standards-compliant HTML as its native representation. With its keyboard-navigable UI, fully styled content-focused view, and extensibility via snippet sets to support your own semantic markup conventions, TypeMetal provides a revolutionary and more productive way to write for the Web. In a time when many have retreated to plain text and shorthand markup languages, we felt certain that there had to be a better way — one that makes it easy to tap the full expressiveness and extensibility of modern HTML, while working directly with fully CSS-styled pages. TypeMetal achieves that — embracing HTML as its native document model, while escaping the need for a separate “preview” by making rendered pages fully editable.

We set out to build a writing app that meets exacting standards of HTML craftsmanship, and have been delighted to see meticulous, demanding content developers start to adopt TypeMetal as part of their workflow. We’re proud to say that TypeMetal’s first release has achieved many of our goals — garnering enthusiastic reviews, while defying expectations and redefining what’s possible for WYSIWYG HTML editing. But we’re just getting started.

We’ve been working nonstop on a major TypeMetal update. The new version — which will be a free upgrade — adds functionality that’s been part of TypeMetal’s long-term design from the beginning. We can’t say more just yet, but this release is the beginning of expanding TypeMetal’s usefulness to a broader audience, while maintaining and enhancing its existing capabilities for those who work with standalone HTML files. The new version is nearly feature complete, and we can’t wait to take the wraps off and release it to the world. Watch for news to appear in February.

More than anything, we look back on 2013 with tremendous gratitude for you: TypeMetal’s pioneering first users. Your support, enthusiasm, and feedback have made the realization of longtime dreams possible, and are fueling the ongoing development of still greater advances to come. Thank you, and stay tuned via our News and Twitter feeds. We look forward to giving you even more reasons to enjoy crafting your content using TypeMetal.

Happy New Year!

I’m a bit obsessive, when it comes to my work. I like to craft things with attention to detail that goes beyond the strictly necessary, to produce results that are aesthetically pleasing to me. Whether it’s Objective-C source code, HTML, CSS, or anything else of the sort, I strive for elegant simplicity, clarity of structure, expression and presentation, and pleasing formatting down to the last character. All of this has made me a difficult customer to please, and set a very high bar for the app I ventured to create.

It seemed to me there had to be a better way to write content for the Web — especially in an era when CSS-styled HTML offers nearly unlimited possibilities for beautiful, flexible layout and styling. Tinkering with raw HTML markup might always be the way to go for building page templates, but producing a site’s content — articles such as this one — accounts for a great deal of what we do, and sometimes even an HTML expert and inveterate angle bracket nudger can be forgiven for wanting to escape markup mechanics for a bit and just write.

I’ve been especially interested in supporting the ways that authors can semantically extend HTML to annotate documents with useful, stylable meaning. This potential — expressed as the freedom to qualify any standard <element> with “class” and “id” attributes — was quite deliberately designed into HTML, and we routinely take advantage of it to style our work using CSS. But developing, maintaining, and consistently applying a CSS-triggering semantic vocabulary without a little help from our writing tools is challenging. I’ve used Markdown to great benefit for years — it’s an elegant shorthand that produces pleasingly streamlined HTML — but Markdown starts to lose its elegant simplicity when saddled with semantic markup extensions.1

It seemed possible to create a dedicated HTML editor that lets authors work with fully styled content — much as one would in a word processor — without having to sacrifice the kind of control over markup quality that someone like me insists on. There was no fundamental technical reason why it couldn’t be done (though there would be many technical challenges to tackle along the way). The main hurdle, it seemed, would be overcoming the precedent and expectation that most “WYSIWYG” HTML editors had established to date: seemingly unavoidable loss of control over markup structure, and inelegant results that were unsuited to professional use.

This led to some bedrock principles that would guide TypeMetal’s design and development:

  • Produce exactly the markup the author requests — yielding minimal, modern, streamlined, standards-compliant HTML that isn’t burdened by formatting annoyances or needless extra baggage.2
  • Adapt to the author’s formatting preferences, without making the temptation to obsess over markup formatting a constant distraction.
  • Make the user’s semantic extensions (“class” and “id” vocabulary) first-class peers to the standard HTML element set.
  • Provide guidance as the user writes, to ensure valid, standards-compliant results.
  • Help in ways that are actually helpful, when there is little doubt about the author’s intent (automatically creating and splitting <p>aragraph elements, for example) — but for the most part, don’t meddle or make inflexible assumptions.

It also led to the design of TypeMetal’s “Source Loupe”, which is as much a means for earning trust as it is a useful tool. I knew there needed to be a convenient way for someone like me to peek at the HTML that their writing in TypeMetal’s visual UI was producing, without overly shifting the focus away from content and back to the HTML markup syntax that we’re striving in some way to escape.

Easily summoned and dismissed with a familiar ⌥⌘U, TypeMetal’s Source Loupe does exactly that, while also providing a handy way to inspect HTML that you may have inherited. Tracking the insertion point or mouse pointer over your fully rendered page, the Source Loupe highlights the corresponding HTML markup fragment with character-level precision, leaving no doubt as to what will be written to the saved HTML file. (The Source Loupe’s content is generated by exactly the same code path as the file’s final HTML, and thus produces the same result — taking your HTML formatting preferences and all other relevant factors into account.)

If what you see in the Source Loupe differs in any way from what you intend, TypeMetal’s Path Bar and Block Mode stand ready to help you grasp and manipulate the individual HTML elements and subtrees that need editing. TypeMetal’s insertion point positioning has been carefully crafted to understand the important distinction between a position at the edge of an element’s interior and the equivalent-looking position just outside the element. And TypeMetal gives special attention to whitespace — cleanly condensing it when appropriate, while offering the means to insert explicit non-breaking spaces, and to easily convert spaces between breaking and non-breaking, where desired. When it comes to the formatting of your HTML markup — something many of us have very particular preferences about — TypeMetal’s HTML formatting preferences model combines flexibility with “set it and forget it” convenience, making it easy to produce markup you can take pride in without having to constantly obsess over markup typesetting.

All this is designed to produce a writing instrument of exacting precision — a trustworthy tool that’s right at home on a meticulous HTML craftsman’s workbench, while offering the same ease of use, convenience, and content-focused experience to casual content authors. That’s a wide range of users to design for, but there turned out to be no inherent contradiction in striving to please most everyone. TypeMetal’s unifying principle — that we’re crafting clean, streamlined HTML whose styling and layout are to be determined by CSS stylesheet rules, instead of attempting an auto-code-generating drag-objects-around-arbitrarily-on-a-canvas experience — is what makes that possible. TypeMetal is a WYSIWYG HTML editor that breaks free of the conventional limitations of its genre, yielding professional-grade results and the degree of control and precision that those of us who love well-written markup insist on.

TypeMetal is available now on the Mac App Store. It was praised by this month’s MacFormat magazine as “a great value” and “an excellent addition to the toolkit of any web designer or writer for online publications”. There’s a free demo build you can try to get a firsthand feel for what they mean, and you can learn even more about TypeMetal by browsing its product page and online User Guide.

  1. For example: The “Discount” parser extends Markdown with a “pseudo-protocol” syntax, to allow writing [some text](class:thing) to get <span class="thing">some text</span> in the HTML result. It’s a workable partial solution, but is limited to generating <span> elements, and a Markdown document laden with many such annotations quickly starts to lose its elegant, near-plain-text readability. An author who wants to be able to focus on content at this point is better served by a writing tool that gets markup mechanics out of the way.
  2. TypeMetal adds only two custom metadata elements to an HTML files’s <head>, to enable association of a snippet set and per-file HTML formatting preferences (if any). Beyond that, TypeMetal tries to help out by auto-creating <p>aragraphs, but otherwise leaves you in the driver’s seat and strives to stay out of your way.