Adobe took the wraps off its new Edge suite of HTML5, JavaScript, and CSS3 tools today at its Create the Web event in San Francisco. Included in the new tools and services is a few renamed, redesigned tools, such as Edge Preview, which is being renamed and released today as “Edge Animate version 1.0.” The Adobe tools made available today include: Adobe Edge Animate 1.0, Adobe Edge Inspect 1.0 (formerly codenamed “Shadow”), Adobe PhoneGap Build 1.0, and a preview of Adobe Edge Code.

Adobe also plans to release a preview version of Adobe Edge Reflow, a CSS-based layout-visual design tool, which was demoed at the event today. In addition to Typekit, the new Edge Tools & Services includes Edge Web Fonts—a free web-based, open source font service for website and apps.

While the company expects to launch Edge Animate at $499 or USD $14.99 per month, it is currently being made available for free. Adobe said the decision is to “encourage web designers to create using the interactive capabilities of the modern web.” At today’s event Adobe also took time to highlight recent open source contributions its made to the web platform, one of which was CSS Custom Filters (you can find a demo here).

Pricing and details on the apps are below:

Adobe Edge Tools & Services are available immediately as part of Adobe Creative Cloud free and paid memberships. Following an introductory period, Edge Animate is expected to be priced at US$499 for a perpetual license, US$14.99 per month for a standalone subscription, and included in a paid membership to Creative Cloud. Additional capacity for Edge Inspect and PhoneGap Build is available via standalone subscriptions priced at US$9.99 per month each and included with a Creative Cloud paid membership. Typekit paid plans which include more websites, fonts and pageviews are available for between US$24.99 per year and US$99 per year, with the US$49.99 per year Portfolio Plan included in paid membership to Creative Cloud.

-Edge Animate A motion and interaction design tool that allows users to bring animated content to the web
using HTML, JavaScript and CSS.
-Edge Inspect – An inspection and preview tool that allows front-end web developers and designers to efficiently
preview and debug HTML content on mobile devices.
-Edge Code – A code editor, built on the Brackets open source project, optimized for web designers and
developers working with HTML, CSS and JavaScript.
-Edge Reflow – A responsive web design tool to help users create layouts and visual designs with CSS, the
standard for styling HTML content. A preview release is expected by the end of the year.
-Edge Web Fonts – A free web font service for using a growing library of open source fonts on websites and in
-Typekit – A service that gives designers and developers access to a library of hosted, high-quality fonts to use
on their websites.
-PhoneGap Build – A service for packaging mobile apps built with HTML, CSS and JavaScript for popular
mobile platforms.