Our free desktop app does many amazing things that you will enjoy while developing from within Sketch with our framework. Treat Sketch as your developing platform and our app as your default code previewer. It’s here that all the magic you setup inside of Sketch gets transformed into workable code.
Sketch2React Code App features
- Hot Reload — Every time you save in Sketch it automatically reloads that file in our code app
- Offline Mode — Everything that does not require an internet connection in your design file will work offline
- Mobile View = Opens up another responsive window of your design with the start width of 576px
- It’s super fast
- Use CSS plugins
- Handy shortcuts to our documentation & tutorials (requires internet connection to work)
How to use install & use
First of all, if you haven’t signed up on our website, you will not be able to get this app. So do that first. Already subscribed? Awesome you should have gotten an email by now.
If you’re signing up for the very first time you will get two emails, both automated. Due to technical reasons the second email (the one with the app) will get send to you 1 hour after the first one.
Once you have downloaded the app (via the email) you install it like any other Mac app on your computer. After that follow these simple steps to get up and running:
- Open up our Sketch2React Code App
- Go to File — ->Open (⌘O)
- Open up the .sketchfile you are working on
- That same file is now linked with our Code App
- Happy makings!
How to download HTML5
- Go to the sidebar in our app and click Download
- Choose where to save
- Do this for each artboard you want exported to HTML5
Handy shortcuts
⌘O = Link to your .sketchfile
⌥⌘M = Mobile View, opens up a new responsive window with start width 576px
⌘D = Documentation
⌘T = Tutorials
⌘F = Demo files
⌘P = Publications on our blog
Web app?
We still have our webb app (Previewer App), it’s really great to quickly show folks what our framework can do. Perfect also for sending devs your enhanced Sketch files to quickly show them your responsive designs. It supports the same framework that our Code App does.
But once you start using our native Mac Code App you will most likely understand the strengths of having a desktop app for this. And you can do stuff with our Code App that you can’t do with the web version. Like adding custom CSS plugins, and that is very exciting news friends. We’ll do a simple tutorial on how to later on.