{"id":107,"date":"2018-11-24T11:50:56","date_gmt":"2018-11-24T10:50:56","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/11\/24\/welcome-to-our-sketch2react-code-app\/"},"modified":"2020-06-18T07:42:38","modified_gmt":"2020-06-18T07:42:38","slug":"welcome-to-our-sketch2react-code-app","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/","title":{"rendered":"Welcome to our Sketch2React Code App"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg\"><br \/>\n<\/figure>\n<p>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 <strong>code previewer<\/strong>. It\u2019s here that all the magic you setup inside of Sketch gets transformed into workable code.<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"600\" data-height=\"366\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/0*_l_ldNshParStrvd.gif\"><br \/>\n<\/figure>\n<h3>Sketch2React Code App\u00a0features<\/h3>\n<ul>\n<li>\n<strong>Hot Reload<\/strong>\u200a\u2014\u200aEvery time you save in Sketch it automatically reloads that file in our code app<\/li>\n<li>\n<strong>Offline Mode<\/strong>\u200a\u2014\u200aEverything that does not require an internet connection in your design file will work offline<\/li>\n<li>\n<strong>Mobile View<\/strong> = Opens up another responsive window of your design with the start width of 576px<\/li>\n<li>It\u2019s super fast<\/li>\n<li>Use CSS plugins<\/li>\n<li>Handy shortcuts to our documentation &amp; tutorials (requires internet connection to work)<\/li>\n<\/ul>\n<h3>How to use install &amp;\u00a0use<\/h3>\n<p>First of all, if you haven\u2019t <a href=\"https:\/\/sketch2react.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">signed up on our website<\/a>, you will not be able to get this app. So do that first. Already subscribed? <strong><em>Awesome you should have gotten an email by now.<\/em><\/strong><\/p>\n<p>If you\u2019re 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.<\/p>\n<p>Once you have downloaded the app <strong>(via the email)<\/strong> you install it like any other Mac app on your computer. After that follow these simple steps to get up and running:<\/p>\n<ol>\n<li>Open up our <strong>Sketch2React Code App<\/strong>\n<\/li>\n<li>Go to <strong>File\u200a\u2014\u200a-&gt;Open (\u2318O)<\/strong>\n<\/li>\n<li>\n<strong>Open up the\u00a0.sketchfile<\/strong> you are working on<\/li>\n<li>That same file is now linked with our <strong>Code App<\/strong>\n<\/li>\n<li>Happy makings!<\/li>\n<\/ol>\n<h3>How to download\u00a0HTML5<\/h3>\n<ol>\n<li>Go to the <strong>sidebar<\/strong> in our app and click <strong>Download<\/strong>\n<\/li>\n<li>Choose where to save<\/li>\n<li>Do this for each artboard you want exported to HTML5<\/li>\n<\/ol>\n<h3>Handy shortcuts<\/h3>\n<p><strong>\u2318O<\/strong> = Link to your\u00a0.sketchfile<\/p>\n<p><strong>\u2325\u2318M<\/strong> = Mobile View, opens up a new responsive window with start width 576px<\/p>\n<p><strong>\u2318D<\/strong> = Documentation<\/p>\n<p><strong>\u2318T<\/strong> = Tutorials<\/p>\n<p><strong>\u2318F<\/strong> = Demo files<\/p>\n<p><strong>\u2318P<\/strong> = Publications on our blog<\/p>\n<h3>Web app?<\/h3>\n<p>We still have our webb app <a href=\"https:\/\/sketch2react.io\/sketch2reactpreviewer\/\" target=\"_blank\" rel=\"noopener noreferrer\">(Previewer App<\/a>), it\u2019s 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.<\/p>\n<p>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\u2019t do with the web version. Like adding <strong>custom CSS plugins<\/strong>, and that is very exciting news friends. We\u2019ll do a simple tutorial on how to later on.<\/p>\n<h4>Happy makings! Your friends @ Team Sketch2React<\/h4>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019s here that all the magic you setup inside of Sketch gets transformed into workable code. Sketch2React Code App\u00a0features Hot Reload\u200a\u2014\u200aEvery&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Welcome to our Sketch2React Code App<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[168],"tags":[58,59,18],"class_list":["post-107","post","type-post","status-publish","format-standard","hentry","category-miscellaneous","tag-bootstrap","tag-react","tag-sketch-app"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Welcome to our Sketch2React Code App | Sketch2React Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Welcome to our Sketch2React Code App - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"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\u2019s here that all the magic you setup inside of Sketch gets transformed into workable code. Sketch2React Code App\u00a0features Hot Reload\u200a\u2014\u200aEvery&hellip;&nbsp;Read More &raquo;Welcome to our Sketch2React Code App\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-24T10:50:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:42:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Welcome to our Sketch2React Code App\",\"datePublished\":\"2018-11-24T10:50:56+00:00\",\"dateModified\":\"2020-06-18T07:42:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/\"},\"wordCount\":459,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg\",\"keywords\":[\"Bootstrap\",\"React\",\"Sketch App\"],\"articleSection\":[\"Miscellaneous\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/\",\"name\":\"Welcome to our Sketch2React Code App - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg\",\"datePublished\":\"2018-11-24T10:50:56+00:00\",\"dateModified\":\"2020-06-18T07:42:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Welcome to our Sketch2React Code App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Welcome to our Sketch2React Code App | Sketch2React Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/","og_locale":"en_US","og_type":"article","og_title":"Welcome to our Sketch2React Code App - Sketch2React Blog","og_description":"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\u2019s here that all the magic you setup inside of Sketch gets transformed into workable code. Sketch2React Code App\u00a0features Hot Reload\u200a\u2014\u200aEvery&hellip;&nbsp;Read More &raquo;Welcome to our Sketch2React Code App","og_url":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/","og_site_name":"Sketch2React Blog","article_published_time":"2018-11-24T10:50:56+00:00","article_modified_time":"2020-06-18T07:42:38+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Welcome to our Sketch2React Code App","datePublished":"2018-11-24T10:50:56+00:00","dateModified":"2020-06-18T07:42:38+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/"},"wordCount":459,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg","keywords":["Bootstrap","React","Sketch App"],"articleSection":["Miscellaneous"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/","url":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/","name":"Welcome to our Sketch2React Code App - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg","datePublished":"2018-11-24T10:50:56+00:00","dateModified":"2020-06-18T07:42:38+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*qCOrduB9uwfyQmLz.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/welcome-to-our-sketch2react-code-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Welcome to our Sketch2React Code App"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"predecessor-version":[{"id":396,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/107\/revisions\/396"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}