DEV Community

Cover image for Turn your drawn images into HTML code by Sketch2code. A great tool for front-end developers
Javeria Gauhar
Javeria Gauhar

Posted on

Turn your drawn images into HTML code by Sketch2code. A great tool for front-end developers

Artificial intelligence; a well-known game changer in the area of technology, has never failed to amaze us through its enormous potential. AI is making computers smarter than ever, and here we will discuss a new tool that is likely going to make web development an enjoyable experience.
The Microsoft AI lab has recently rolled out a website “builder”, knows as Microsoft Sketch2Code, a web-based solution that transforms a user interface design from an image into a markup code (HTML format). Let’s take a look at what it does:
• Takes input of image through the website.
• A custom vision model scans what type of HTML elements can be fetched from the image.
• A handwritten text recognition service scans the text inside the scanned elements.
• The platform’s engine gathers the pieces of information, complies it and provides output.

The web-based app is helpful to have a working experience of simple wireframes, or to build something simple, instantly. We discussed about the functionalities, let's dive deeper into its efficiency and limitations.

• Super easy for front-end web developers to generate a working markup code through uploading sketch/image on the site. It’s innovative, quick, productive and less resource consuming. All you need is a good connection and you’re good to go.
• You can extract the code in HTML but it's independent of HTML; you can extract the code in other formats, such as XAML or universal apps like universal windows platforms.
• Huge following over GitHub for help and support. An attractive platform for beginners to learn the basics of web development.

Limitations:
• It’s not a replacement to professional web-developing software and tools, lacks features and accessibility provided by modern-day react, angular, and other programs.
• It generates markup code, yet lacks the ability to provide back-end functionality to the code.

It’s definitely an impressive feat for Microsoft to build such an AI-based web app. It has its limitations but might get better in the long run.

Top comments (0)