{"id":105,"date":"2018-11-12T19:26:01","date_gmt":"2018-11-12T18:26:01","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/11\/12\/how-our-previewer-app-works\/"},"modified":"2020-06-18T07:27:01","modified_gmt":"2020-06-18T07:27:01","slug":"how-our-previewer-app-works","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/","title":{"rendered":"How our Previewer App works"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg\"><br \/>\n<\/figure>\n<p><span>H<\/span>ere\u2019s a brief article on how to use our magical <a href=\"https:\/\/sketch2react.io\/sketch2reactpreviewer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Previewer App<\/a> that we secretly call <em>Batman Ninja<\/em>. ?<\/p>\n<p>Since you do all of the <strong>setup and designing inside of Sketch<\/strong> you will at some point want to see how it actually looks in <strong><em>code<\/em><\/strong>. That\u2019s when you fire up our awesome <a href=\"https:\/\/sketch2react.io\/sketch2reactpreviewer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Previewer App<\/a> (web version).<\/p>\n<p>A great workflow is (<em>if you have two screens<\/em>) to have Sketch in one and our web app in the other one.<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1616\" data-height=\"926\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*EqXeqwVgjICzaDQb9txy0A.png\"><figcaption class=\"wp-caption-text\">You are in Preview Mode\u200a\u2014\u200aYessss\u2026<\/figcaption><\/figure>\n<h3>Workflow goes like\u00a0this<\/h3>\n<ul>\n<li>Design and setup things inside of Sketch\u200a\u2014\u200athen save<\/li>\n<li>Drag drop that same\u00a0.sketchfile onto our app<\/li>\n<li>You are now in <strong>Preview Mode<\/strong>\n<\/li>\n<li>Big fat chances are that you want to make some changes<\/li>\n<li>Do your changes and drag+drop again onto our Previewer App<\/li>\n<li>Do this million of times until you are happy with your work<\/li>\n<\/ul>\n<h3>Export to\u00a0HTML5<\/h3>\n<ul>\n<li>Go to the <strong>Download<\/strong> tab and yup you guessed it\u200a\u2014\u200adownload!<\/li>\n<li>It downloads the page you have visible as Bootstrap powered HTML5<\/li>\n<li>Do this for each and every page\/artboard that you have in your Sketch2React enhanced\u00a0.sketchfile<\/li>\n<li>\n<strong>Remember: <\/strong>once you have exported things to code there is no way of getting them into Sketch again. So make sure to do as much as you can\/or need inside of Sketch before exporting to HTML<\/li>\n<\/ul>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1616\" data-height=\"926\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*QJwjpsE3Vqu3YwAMfU-zOg.png\"><figcaption class=\"wp-caption-text\">React View\u200a\u2014\u200aVery close to real React export\u00a0now!<\/figcaption><\/figure>\n<h3>Let\u2019s look at what else you can do in our Previewer app (web\u00a0version)<\/h3>\n<ul>\n<li>The tab <strong>React<\/strong> shows you the prototype React code for the very page you have created. This is exactly how you will export and download the React code when it\u2019s ready.<\/li>\n<\/ul>\n<p>There\u2019s a good reason I\u2019m writing (<em>web version<\/em>) everywhere.<em> Read on dear reader\u2026<\/em><\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"474\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*30S094Mmc0bE5-uTdtrGdg.gif\"><figcaption class=\"wp-caption-text\">Sketch (to the left) Sketch2React Mac App (to the right) = Hot Reload + Offline Mode + React Export (soon-ish)<\/figcaption><\/figure>\n<h3>And now a few words about the FUTURE ?\u00a0\u269b\ufe0f<\/h3>\n<p>We are working on a desktop application that will be <em>exclusive <\/em>to our (future) paying <strong>Pro<\/strong> plan users. No worries, the pricing will be very economic, we really want as many as possible to afford this.<strong> We understand you already are paying <\/strong>for Sketch and many other services.<\/p>\n<blockquote><p>\n<strong>That\u2019s why HTML5 export will always be free<\/strong> and you pay zero dollares for the framework and our layout\u00a0plugin.<\/p><\/blockquote>\n<p><em>Again, we want as many as possible to be able to learn and use our design to code framework. <\/em>The Pro plan will be for folks who really care a lot about getting this workflow to React. Also the Mac Desktop app has something totally awesome called <strong><em>Hot Reload<\/em><\/strong>. Every time you save in Sketch it will auto-reload in our Previewer App (<em>desktop<\/em>)?. And the desktop app also works offline and is super super fast.<\/p>\n<h3>Why do\u00a0this?<\/h3>\n<p>We will not be able to <strong>sustain development<\/strong> of Sketch2React without some kind of revenue, specially since we do have some costs attached to this. <em>We\u2019ll update you guys when a plan is in place<\/em>.<\/p>\n<p><strong><em>In the mean time: Happy makings!<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here\u2019s a brief article on how to use our magical Previewer App that we secretly call Batman Ninja. ? Since you do all of the setup and designing inside of Sketch you will at some point want to see how it actually looks in code. That\u2019s when you fire up our awesome Previewer App (web&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How our Previewer App works<\/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":[166],"tags":[58,5,29,59,18],"class_list":["post-105","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-bootstrap","tag-code","tag-design","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>How our Previewer App works | 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\/how-our-previewer-app-works\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How our Previewer App works - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Here\u2019s a brief article on how to use our magical Previewer App that we secretly call Batman Ninja. ? Since you do all of the setup and designing inside of Sketch you will at some point want to see how it actually looks in code. That\u2019s when you fire up our awesome Previewer App (web&hellip;&nbsp;Read More &raquo;How our Previewer App works\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-12T18:26:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:27:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How our Previewer App works\",\"datePublished\":\"2018-11-12T18:26:01+00:00\",\"dateModified\":\"2020-06-18T07:27:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/\"},\"wordCount\":517,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg\",\"keywords\":[\"Bootstrap\",\"Code\",\"Design\",\"React\",\"Sketch App\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/\",\"name\":\"How our Previewer App works - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg\",\"datePublished\":\"2018-11-12T18:26:01+00:00\",\"dateModified\":\"2020-06-18T07:27:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How our Previewer App works\"}]},{\"@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":"How our Previewer App works | 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\/how-our-previewer-app-works\/","og_locale":"en_US","og_type":"article","og_title":"How our Previewer App works - Sketch2React Blog","og_description":"Here\u2019s a brief article on how to use our magical Previewer App that we secretly call Batman Ninja. ? Since you do all of the setup and designing inside of Sketch you will at some point want to see how it actually looks in code. That\u2019s when you fire up our awesome Previewer App (web&hellip;&nbsp;Read More &raquo;How our Previewer App works","og_url":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/","og_site_name":"Sketch2React Blog","article_published_time":"2018-11-12T18:26:01+00:00","article_modified_time":"2020-06-18T07:27:01+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How our Previewer App works","datePublished":"2018-11-12T18:26:01+00:00","dateModified":"2020-06-18T07:27:01+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/"},"wordCount":517,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg","keywords":["Bootstrap","Code","Design","React","Sketch App"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/","url":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/","name":"How our Previewer App works - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg","datePublished":"2018-11-12T18:26:01+00:00","dateModified":"2020-06-18T07:27:01+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*_w_0-gH31D7dOuglMz8uKg.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-our-previewer-app-works\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How our Previewer App works"}]},{"@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\/105","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=105"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/105\/revisions"}],"predecessor-version":[{"id":341,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/105\/revisions\/341"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}