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

3 3

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.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay