├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── images ├── original.png └── preview.png ├── index.html ├── package.json ├── public ├── dist.main.js ├── index.css ├── index.html └── target │ ├── document.json │ ├── images │ ├── 00f051d3a27fec14ba725121eb2bffb3ac1c3e02.png │ ├── 0c2421c7228cf5e9d8133b6f598461a7cf439fc5.png │ ├── 29c43ee866210c6174a4f800798b066f50e3b178.png │ ├── 54099fda567d9ed2a6548505a921cb89177357b3.png │ ├── 65d57b712c0dfc95448315b82d457f0a29dd4c8c.png │ ├── 82fec9dc20c85608ebb2cc01f678364b4fd53107.png │ ├── 841a9c5ab29068b5f372d9e171dad1b3e4a62950.png │ ├── a1948e015ba95991c3a04a47e19f0497913a5997.png │ ├── a683c9b5c00b8e1d441297f1df1c4fe2d4426c56.png │ ├── b0ec6a85ff35a5223bb0c0dfefd749413050e777.png │ ├── b4913550b705b27fb487bb41aac8e4150a0c7f53.png │ ├── b771bedd82473fdbc03dad41679d4b710eaa9615.png │ ├── c55edac9c53afcc5a37bc81c37a9d8329846041e.png │ ├── cd36c97a217daeae79b3c00b3fa6678f2ac98ac9.png │ ├── dbb5e35ccbb8f4dea5f95b79f1b44dcb442ffbe2.png │ └── e607a3e5caf014ff210d1af02a2a2e9aae283ba7.png │ ├── meta.json │ ├── pages │ ├── 1C01EF08-06C2-469A-8EB7-0BF12367FF6E.json │ └── 9B2D6A75-D2C0-40F3-88AB-AE4BD625E520.json │ ├── previews │ └── preview.png │ └── user.json ├── samples ├── Fitness App.sketch ├── ios11-app-store-design-ui.sketch └── stickersheet_general.sketch ├── scripts ├── build.js ├── start.js ├── webpack.config.start.js └── webpackDevServer.config.js ├── src ├── Document.js ├── Layer.js ├── Page.js ├── PageViewer.js ├── data │ ├── Color.js │ ├── Style.js │ ├── SvgStyle.js │ └── TextStyle.js ├── globals │ └── SymbolStore.js ├── index.js ├── layers │ ├── Artboard.js │ ├── Bitmap.js │ ├── Ellipse.js │ ├── LayerGroup.js │ ├── MaskGroup.js │ ├── Path.js │ ├── Rectangle.js │ ├── ShapeGroup.js │ ├── SymbolInstance.js │ └── Text.js └── utils │ ├── axiosUtils.js │ ├── decodeUtils.js │ └── layerUtils.js └── static ├── index.css └── index.html /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "stage-0"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 양현석 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-sketch-viewer 2 | Sketch file viewer for web 3 | 4 | ## run samples 5 | clone this project and run 6 | `npm install` 7 | `npm start ./samples/Fitness\ App.sketch` 8 | 9 | ## What this project for 10 | for rendering sketch in web, static hosting unzipped sketch file, without any server-side image extracting. 11 | 12 | ## Requirements 13 | `node 7+` 14 | 15 | ## Preview 16 | original sketch file 17 | ![Original](https://github.com/FourwingsY/react-sketch-viewer/blob/master/images/original.png) 18 | 19 | rendered preview 20 | ![Preview](https://github.com/FourwingsY/react-sketch-viewer/blob/master/images/preview.png) 21 | 22 | ## Sample sources 23 | - [Fitness App](https://www.dropbox.com/s/w1udlebtbjidg1o/Fitness%20App.sketch?dl=0) 24 | - [iOS AppStore UI](https://www.sketchappsources.com/free-source/2689-ios-11-app-store-design-uu-sketch-freebie-resource.html) -------------------------------------------------------------------------------- /images/original.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FourwingsY/react-sketch-viewer/63213d4b52bc26b537816539b1ae031c93ca6cbc/images/original.png -------------------------------------------------------------------------------- /images/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FourwingsY/react-sketch-viewer/63213d4b52bc26b537816539b1ae031c93ca6cbc/images/preview.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sketch Web Viewer 6 | 19 | 20 | 21 |