Sketch json output to html

Question

I have a quite simple question, does anybody know if there is some library out there for JS that could take in Sketch json output and give me back html in a form that I could render directly in browser (so not in form of html/css files but rather as code)?

There is https://www.animaapp.com/ but as far as I understand they export html and css in form of files.

I believe Figma or Zeplin both allow to import Sketch files so I wonder is there something open source out there that I could also use to render our Sketch file/json?

Answer 1

It requires efforts to write a program to convert Sketch into HTML/CSS, we have implemented our own one in our solution. But the code of direct conversion is unstructural and not responsive, only works for fixed layout.

You can start from the repo below https://github.com/mludowise/Sketch-HTML-Export

It takes us around 2 months to write a new one for a better quality of conversion.

Answer 2

You can use Desech Studio to import Sketch and then export as React.

The Sketch import will not be 100%. Here's a youtube video that gives more details, but they key things are:

• html is positioned relatively with grids
• imports all the css
• imports images and svgs marked for export

As for React, it uses Facebook's create-react-app as a base. This is the github repo for the Desech Studio react plugin. Ultimately you can fork the react plugin repo and add your own code base and use that instead of the official react plugin.

But I agree with @pxCode This is not a 2 clicks import/export process. It will involve some work from your end too.