Expression Blend for HTML

In my previous post, I highlighted how Windows Metro style apps can be developed utilizing the HTML, CSS, and JavaScript skills you already have. If your world is code, Visual Studio offers a great environment in which to write, edit, test, debug, and deploy these apps. Of course, great apps need great user interfaces. And when you need a visual, design-centric way to build your UIs, we have a brand new flavor of Expression Blend for you, built from the ground up for the visual authoring of Windows Metro style apps written with HTML5 and CSS. Unlike most other HTML editors, Blend for HTML is focused on app design, not on Web sites, with an unmatched ability to work on AJAX-style, JavaScript-centric UI.

Blend for HTML provides a rich toolset for authoring HTML and CSS-based user experiences, helping you to create, layout, and style visually on a high-fidelity design surface. In particular, Blend for HTML makes working with CSS a lot more enjoyable: you can focus on concepts rather than on syntax, and you get immediate visual feedback on anything you do. Building great user experiences is usually a multi-disciplinary effort, spanning development and design. Therefore, Blend for HTML is built on the same philosophy as our previous releases of Expression Blend for XAML: a rich, design-centric visual authoring environment paired with great developer-designer workflow. Where Blend for HTML takes a design-centric view, Visual Studio gives you the code-centric complement. Expression Blend and Visual Studio share the same project files, and they can be used simultaneously by a single person or across a team of people with specialized skills.

Here are a few highlights of the first preview of Blend for HTML:

  • A powerful visual CSS editing environment, with predictable and efficient CSS and HTML5 markup generation. CSS3 adds a range of new layout techniques that are much more appropriate for resizable, dynamic application scenarios. Blend for HTML provides a rich visual environment for the new CSS Grid and Flexbox layout modules.

  • Accurate rendering on the design surface, using the same rendering engine that is employed by the app at run time. Just as importantly, Blend can display and edit UI and content dynamically generated by JavaScript code. Because dynamically generated or modified content usually plays a central role in client-side HTML apps, traditional HTML authoring tools that only look at HTML and CSS markup cannot adequately render and edit such UI. Expression Blend, in contrast, runs the JavaScript code of your app right on the design surface, so that layout, controls, dynamic content, and other code-dependent parts of your app appear just as you intended. This gives visual authoring in Blend a lot more reach than in other visual tools. What you see really is what you get, even if it’s dynamically generated.

  • Styling of complex dynamic application states. Interactive apps invariably have complex states that modify the user interface of the app (a simple example would be a dynamically generated fly-out triggered by an event handler). Such states usually cannot be expressed in static markup, making them inaccessible to most visual authoring tools. Blend for HTML solves this problem with Interactive Mode, enabling users to interact with the app on the design surface, and freeze any state reached for subsequent editing. 

  • Visual editing for Windows 8-specific features such as controls and views. Most notably, Blend for HTML lets you preview and edit in full, portrait, fill, and snap views, making it easy to design user interfaces that shine regardless of how and where they’re presented.

Along with the Visual Studio 11 Express for Windows Developer Preview, we have also made available a developer preview of Blend for HTML (look for the Expression Blend 5 Developer Preview).   This is just the beginning, and the team and I are looking forward to hearing your feedback.


Comments (21)

  1. rlevy says:

    Where is the preview of Blend for XAML?

  2. Christian Schormann says:

    I am running the Blend PM team, and I can respond to your question.

    At this point, we unfortunately cannot talk about any releases or features beyond what we have introduced here at build. Stay tuned for future announcements. A good place to look is our new team blog, where the latest news will be posted:

    There is a visual XAML designer for Metro-style apps as part of Visual Studio Express in the Windows Developer Preview. As we unified our designer code bases, this visual designer is now based on the same code as Blend. There are two build sessions that describe the XAML designer in detail:

    A lap around Visual Studio 11 Express for Metro style apps using C++

    Date: September 14, 2011 from 2:00PM to 3:00PM  (TOOL-479T)

    A deep dive into Visual Studio 11 Express for designing Metro style apps using XAML – Date: September 15, 2011 from 1:00PM to 2:00PM (TOOL-504T)

    Recordings should be available on within 24 hours or so.

    We look forward to hearing your feedback about the Visual Studio XAML designer for Metro style apps.



  3. Mark Wisecarver says:

    Will it play well/behave on our Expression Studio 4 Dev systems?

  4. Don Burnett says:

    You really do not want my feedback on this…

    Don Burnett

    Expression Blend MVP

  5. Christian Schormann says:


    the preview of Blend for HTML is only available as part of the Windows Developer Preview. It requires Windows 8 and there is no separate installer at this point.

    The visual designer in VS does not interfere with a Blend 4 installation on the same machine.



  6. Christian Schormann says:


    we would like to hear your feedback. I believe you have my email address, please feel free to contact me directly.



  7. Nik Kokkinos says:

    When and why are not the Developer Tools(Windows SDK for Metro style apps, Microsoft Visual Studio 11 Express for Windows Developer Preview, Microsoft Expression Blend 5 Developer Preview) available to download for 32-bit Systems ?

  8. toub says:

    Hi Nik-

    Details on when and where these will be available are on Jason Zander's blog here:…/announcing-visual-studio-11-developer-preview.aspx



  9. Nik Kokkinos says:

    Hi Stephen,

    thanks for the Infos. I heard in the channel 9 during your conversation with Jason Zander, that we can found details about the tools on his Blog. But I just had the question why at this point of time are the tools only available for 64 bit systems. Well I have to wait until Friday to download the tools for my Super 32-bit system 🙂

  10., Ziad Ismail and MS... says:

    Dear Mr. Somasegar,

    I am reaching out to you as we would like your valuable input, insight and thoughts on our discussions on  I have signed an NDA with MS through Ziad Ismail and he told me to get ahold of others at MS as I need but won't provide contact details.  So here I am… We've have temporarily pointed to  As we all know, HTML5 is the one standard that allows for purchase once and use on Desktop, Tablet and Mobile, while over coming the limits of other ECO systems.  I cannot go into any further details, so please contact me directly at ((at))

    Kindest regards.

  11. Graeme says:

    Will this support dynamically executing MVC Razor etc?

  12. toub says:

    Hi Graeme-

    No, it currently supports running client-side JavaScript only.



  13. Ted Hildebrandt says:

    Will Blend 5 HTML do JQuery and animation?  How will the video and audio tags and controls be implemented?  When is the targeted release date?

    Keep up the good work of staying ahead of the curve.

  14. Christian Schormann says:


    Blend will execute client-side JavaScript code in the same way the running app does, with some minor exceptions. Therefore, our expectation is that any library that works at runtime in Windows 8 should also work at design time. I have tried the core jQuery library without any obvious problems.

    Regarding animation, if animation is driven by JavaScript, it would run whenever the related code runs. Typically, such code would fire in response to some event, so you could use interactive mode to trigger the event.

    CSS3 Transitions, once set up in styles, fire currently in response to property changes both on the design surface and in interactive mode. For CSS3 animations, I can't give more information just yet.

    I hope this helps. Let us know if you have more questions.



  15. Ted Hildebrandt says:

    Keep your eye on Adobe Edge (HTML5 animator) they do cool stuff.  For example, is there going to be a animation timeline in Blend HTML5?  Will there be components or easy "effects" kind of things to drag and drop on objects.  I'd like a audio and video trigger of events from inside a video sequence to trigger other things to happen at a certain marker in a video or audio stream. A great feature would be to have a Panorama component that let's you build walk throughs (i.e. has hot spots in it).  I've got a True Type font that I'd like to embed in my page.  Two major things I need are the ability to click on a word and play an mp3 audio file or video.  Also show and hide objects (fading in and out) should be made really easy.  


  16. Christian Schormann says:

    Hi Ted,

    thanks for your comments – we appreciate the feedback very much. We can unfortunately not talk about any of our future plans beyond what we had shown in the preview released at Build.


       Christian Schormann

  17. lynn eriksen says:

    Give me this kind of support for web site development and I can finally tell dreamweaver to take a hike.

  18. vishal talreja says:

    thanks for the great walkthrough Soma. Look forward to using some of the tips as we start building for Windows 8.

  19. S. Somasegar says:

    Thanks Vishal.  Hopefully you have a chance to play around with the Developer Preview.

  20. Frank says:

    Please Guys, let Blend work for any websites and not only Win8 apps, having Adobe Edge like features to build games easily, i do not want to buy another adobe suite like the pre-Silverlight era… update also Expression Design as well!

  21. Dan says:

    – Why is Blend currently restricted to Windows 8 app development?

    – Why is Blend not included in Visual Studio 2013 Express for Web?

    – Why aren't HTML/CSS templates included in Blend with Visual Studio 2013 Pro running on windows 7?

    – Why does the Visual Studio 2013 website specify only "Windows Store, Windows Phone, WPF, and Silverlight" as targets for Blend? WHY NOT WEB???

    – What is Microsoft's go-to design surface for website creation? (not Expression web – deprecated, VS??, Please don't say WebMatrix!!)

    I'm assuming the answers to all these questions are somehow related. I'm hoping the deep dark secret is that a future version of Visual Studio will have full [html/css/javascript] *WEBSITE* support in Blend (Please, please, please)