Adobe’s new Create the Web products

During yesterday’s Create the Web keynote, Adobe announced several new products for web developers. This blog post gives a summary.

CSS FilterLab

The CSS FilterLab (GitHub, live app) is a web app that runs on Google Chrome Canary and WebKit Nightly (Mac only). I was able to get it to run on (Desktop) Safari 6, with fewer filters. The CSS FilterLab lets you play with CSS custom filters, in combination with CSS animations and CSS transitions.

Adobe Edge Tools and Services

The Adobe Edge Tools and Services have a website. Their main components are the Creative Cloud and the Edge Tools.

Creative Cloud

The Creative Cloud ties everything together. It has the following features:
  • Tools: use Edge Tools, Creative Suite 6* apps, etc.
  • Cloud storage: up to 20 GB online storage (think Dropbox).
  • Hosting: The Creative Cloud hosts websites for you, with generation and deployment supported by Adobe tools.
Adobe offers several plans, among others:
  • Free: 30 day trial, 2 GB cloud storage, limited access to services.
  • $19.99 per month: full version of one Adobe app, 10 GB cloud storage, limited access to services.
  • $49.99 per month (with annual commitment): full versions of all apps, 20 GB cloud storage, full access to services.

Web apps

The following apps are accessed via Creative Cloud:
  • Edge Animate: was previously called “Edge”. A new version 1.0 has been released. Edge Animate lets you create animations (a prior use case for Flash), using only HTML, CSS and JavaScript. Dreamweaver CS6 somes with support for Edge Animate.
  • Edge Reflow: is a tool for creating responsive CSS layouts. It’s not available yet, but you can sign up for a preview.
  • Edge Code: is a commercial version of Brackets. In an FAQ, the difference between Edge Code and Brackets is described thusly:
    Adobe Edge Code is a distribution of the Brackets open source project optimized for professional web designers and developers. This build of Brackets includes community and Adobe-built extensions that are not part of the Brackets open source project. [...]

    But, we're just getting started. So the only big difference is built-in support for the free Adobe Edge Web Font service. You can expect this list grow quickly as we integrate more Creative Cloud products and services. We've already started work on PhoneGap support.

    In other words: it comes bundled with more stuff. Some of it open source, some of it proprietary support for Adobe’s commercial offerings.
  • Edge Inspect: was previously called Shadow. Basically, it allows you to remotely control a web browser on a mobile device from your desktop, including synchronized browsing and remote inspection.
  • PhoneGap Build: lets you build mobile apps in the cloud instead of using tools such as Apple’s Xcode (that differ per mobile platform).
Note that when Adobe says one of the above is “free”, they mean “free on Creative Cloud” (which is only free during a 30 day trial).

Web font services

  • Typekit: is an infrastructure for using commercial fonts on the web. It is also used to provide the free Edge Web Fonts (see below).
  • Edge Web Fonts: are described by Adobe as follows:
    Edge Web Fonts gives you access to a vast web font library made possible by contributions from Adobe, Google, and designers around the world. The fonts are served by Typekit, so you can be sure of high performance and stability. Plus, it’s free!
    The fonts are free. It’s interesting that Adobe has partnered with Google to make this happen.


Today’s announcements show that Adobe is slowly improving its support for HTML5 as an alternative to (most of) Flash. It’s smart that they are hedging their bets.

Naturally, Adobe’s products haven’t become cheap over night. But two offerings really are free: The Edge Web Fonts and Brackets, the open source version of Edge Code. Brackets shows a lot of promise. It’s good that a major web company supports an open source JavaScript IDE.

Further material

This post is based on the following sources: