Today, at the build conference, we have introduced an exciting new flavor of Expression Blend – Blend for HTML, designed to help you create great UI for Windows 8 apps based on HTML, CSS and JavaScript. An early preview is available for you as part of the Windows Developer Preview:

There are five threads in the design of Expression Blend for HTML:

• Blend for HTML inherits its idea of visual authoring from Expression Blend
• Blend for HTML speaks HTML/CSS as its first language
• Blend for HTML is a visual authoring tool for applications, not websites
• Blend for HTML introduces visual authoring of metro-style apps for Windows 8
• Blend for HTML is designed to work with dynamic, code-driven UX

Expression Blend has been designed primarily as a visual authoring tool for production assets, with unfiltered access to the power of the underlying platform and a strong workflow between design and development: Blend offers the design-centric complement to Visual Studio’s code-centric view of the world. Blend for HTML inherits this same core idea – enable visual creation of production quality markup throughout the development process, while cooperating effectively with the coding side of the process.

While Blend inherits core concepts from previous flavors of Expression Blend, it speaks HTML and CSS as its native tongue, with a wide range of sophisticated tools for creation, layout and styling of HTML/CSS-based user experience.

As HTML was originally designed as a language to describe text-centric documents, traditional HTML editors are document editors at heart. Applications have different authoring needs: UIs are typically designed around controls that in turn rely on code, app layout plays by different rules, and different UX design patterns dominate. Blend for HTML is designed specifically for the challenges of creating rich client apps using HTML, CSS and JavaScript as a platform. For example, there is extensive visual editing support for the new CSS3 Grid and Flexbox layout techniques that make the creation of dynamically resizable app UI significantly easier, faster and more robust. Very importantly, Blend for HTML also focuses on Metro-style apps for Windows 8, with full support for a wide variety of Windows 8 UX features.

Blend for HTML: Visual Authoring for Code-Centric Applications

The fifth and last of the threads is perhaps the most interesting one to talk about. In a nutshell, it comes down to this: Expression Blend lets you visually edit and style UI even if all the underlying DOM is partially or entirely generated dynamically in JavaScript. This enables a wide variety of visual authoring scenarios that traditionally a reserved for coders entirely. Let us dive deeper into this.

Because HTML was originally designed as a markup language for documents, rather than applications, many important aspects of app UI cannot be expressed with markup only, but need substantial JavaScript code that fills HTML tags with content and behavior. Effectively, the tags become placeholders for what in other UI toolkits would be a control or user control, and JavaScript code provides the control implementation.

Traditional HTML authoring tools largely ignore the JavaScript code that backs the markup. As a result, the rendition of the app on the design surface is largely meaningless, as not even layout can be determined correctly without the dynamically generated content. As a result, visual editing of such pages is severely limited.

Blend for HTML, in contrast, runs JavaScript code on the design surface, and therefore can accurately render app UI (with only few limitations) that heavily relies on elements and content dynamically generated with client-side JavaScript, including even <canvas> tags. Under the covers, Blend uses the same rendering engine that HTML-based apps run on in Windows 8 – there is no emulation or custom rendering.

The following screenshots show the difference this can make: The first screen shot shows a client-side, JavaScript-centric HTML app in a traditional HTML editor (in this case, our own Expression Web), the other shows the same app in Expression Blend for HTML. The app uses JavaScript to create data lists, UI and a graph (with a canvas tag), yet it still appears accurately on the design surface.

Of course, Blend cannot just render JavaScript-driven UI correctly. It also lets you apply its extensive set of CSS styling tools to the dynamically generated content, as long as the CSS markup is available as a style sheet or within style blocks.

But that is still not all. Client-side apps also usually have many dynamic states that cannot be expressed in markup. An example might be a fly-out that is displayed by an event handler and filled with generated content that might in turn depend on previous computations by the app. How do you ever visually author an element that is not even part of the UI visible in the app? Blend for HTML has an answer for that problem: Interactive Mode.

Using interactive mode, users can interact with the app as if it was actually running (with very few limitations) and bring it in any desired state, including transient visuals such as hover and complex application-defined states. A single keystroke can then freeze the state and return the user to editing mode. This extends visual authoring to many scenarios previously entirely inaccessible to a visual authoring tool.

We believe that Expression Blend for HTML will make a big difference in your productivity creating HTML-based apps for Windows 8. With the Windows Developer Preview, we have made a preview version available that is not feature complete yet, so there will still be many changes. As always, we are looking forward to hear from you.