HTML 5 is the changing face of web world; it provides some awesome features for web designers and developers. HTML tools can be very handy for web developers; today we gathered some amazing tools to enhance your HTML 5 Workflow. Html 5 is very powerful mark-up language and is flexible though. In this post you can find some amazing new html5 tools that you can use in your web browser.

Animatron

Animatron

Animatron is a simple and powerful online tool that allows you to create stunning HTML5 animations and interactive content.

Source

Adobe Edge Animate CC

Edge Animate lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile browsers with ease.

Adobe Edge Animate CC

Source

Stitches

Stitches

Stitches is an HTML5 sprite sheet generator.

Source

HTML 5 Outliner

HTML 5 Outliner

Online tool that presents the structure of HTML5 documents.

Source

Mixeek Editor

Mixeek Editor

Project Mixeek is a free software tool for designing and executing web animations and interactive animated web applications. It is purely based on JavaScript and HTML5. It’s been developed to bring lightweight, easy to use alternative to well known paid animation software tools, which are usually based on browser plug-ins.

Source

Moqups

Moqups

Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them.

Source

Liveweave

Liveweave

Liveweave is a HTML5, CSS3 & JavaScript editor with real-time (live) preview. It is the ultimate playground for web designers and developers, and a great tool to test, practice and share your creations!

Source

Spritebox

Spritebox

Spritebox is a WYSIWYG tool to help web designers create CSS from sprite images.

Source

font dragr

font dragr

A revolutionary way to test custom fonts in the browser. No coding, no uploading, just drag and drop.

Source

Sketch Toy

Sketch Toy

It’s a drawing application where lines appear to vibrate slightly like in an old cartoon. Sketches can be saved to a unique link and when shared, the sketch will replay as it was originally drawn.

Source

Patternizer

Patternizer

It’s easy to make something amazing in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity and play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing. And you can access them from any device* worldwide.

Source

XRAY

XRAY

XRAY is a free cross browser tool that lets you see the box model in action for any element, letting you see beneath the skin of any web page.

Source

On/Off FlipSwitch

On/Off FlipSwitch

Generate pure CSS3 On/Off flipswitches with animated transitions.

Source

HTML5 Audio

HTML5 Audio

Modern browsers all support HTML5 audio, but do so with different audio formats. Firefox, Chrome, Android and Opera support ogg/vorbis. IE9, Safari, Chrome, Android and iOS support mp3. Safari, Chrome, IE and iOS support AAC.

Source

SVG to HTML5 Canvas Converter

SVG to HTML5 Canvas Converter

This tool converts SVG into an HTML5 Canvas JavaScript function. It will work with any host, and I hope it helps people to experiment with Canvas. Most vector art packages (Illustrator, Inkscape etc) can export as SVG.

Source

CanvasLoader Creator

CanvasLoader Creator

The Heartcode CanvasLoader Creator is a free online tool which you can use to generate scripted preloaders (spinners or throbblers) for your HTML projects.

Source

Rendera – Online HTML5 Editor

Rendera - Online HTML5 Editor

Rendera helps you learn HTML5 and CSS.Type in your HTML code and see it rendered in realtime. Then style it with CSS. You can use any of the HTML 5 or CSS3 tags your browser supports.

Source

HTML5 Please

HTML5 Please

Graded Feature Support: Look up web technologies and find out if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

Source

wysihtml5

wysihtml5

wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

Source