https://github.com/lukasoppermann/browser-preview

🔍 Open a preview of your Sketch artboard in your browser.
https://github.com/lukasoppermann/browser-preview

Last synced: 10 months ago
JSON representation

🔍 Open a preview of your Sketch artboard in your browser.

• Host: GitHub
• URL: https://github.com/lukasoppermann/browser-preview
• Owner: lukasoppermann
• License: mit
• Created: 2018-04-05T06:59:31.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T19:38:01.000Z (almost 3 years ago)
• Last Synced: 2025-01-16T15:56:37.575Z (12 months ago)
• Language: HTML
• Homepage:
• Size: 885 KB
• Stars: 30
• Watchers: 4
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Browser Preview

![Browser Preview](assets/browser-preview.png)

> Quickly preview an artboard in your browser.

This plugin previews the selected artboard in a `2x` resolution in the browsers, using the artboards background color as the websites background color. The artboard is centered horizontally in the browser.

## Installation

### 🏃 Sketch Runner

Go to the `install` tab in runner and search for `Browser Preview`.



   



### Manual Installation

1. Download the [bundle](https://github.com/lukasoppermann/browser-preview/releases/latest) file (first file with the package icon) and extract it.

2. Double click the `browser-preview.sketchplugin` bundle

## Usage

Simply select one or multiple artboards / layers and press `cmd` + `shift` + `p` or select `Preview Artboard` from the Plugin menu.

You can customize the shortcut using the default mac keyboard settings and assign any shortcut for sketch to `Preview Artboard`.

If you want your screen to be aligned to the left of the browser window, simply suffix the artboard name with `:left`. E.g. "Desktop" would be "Desktop:left".

## Customize browser

Using the settings you can select which browser to use for previewing the artboard.