UI Explorer

UI Explorer for Designers and Frontend Developers

Why

Lightweight and cozy frontend tool for development stage to test and visualize page structure

Features

• Extend visual orientation by show selected HTML regions with predefined outlines
• Test or correct UI in accordance with design by mockup partials integration

Install

npm i --save-dev ui-explorer

import 'ui-explorer';

CDN

<script src="https://unpkg.com/ui-explorer/build/javascript/app.js" defer></script>

Functionality

• Autosave

Outlines

• Select any DOM element by predefined list
• Color and Width properties
• Outlines glogal or custom Show/Hide
• Keyboard hot keys

Mockup

• Upload (Drag-n-drop, Paste from URL and clipboard) Images (Limit 2Mb for imported script)
• Preview Images
• Grayscale with contrast
• Crop
• Offset
• Layer level
• Tiles glogal or custom Show/Hide
• Keyboard hot keys
• Magnetize Tile to Page element

Mockup Offset

• Double click - back image to init position

Hotkeys

Keys	Action
Ctrl~	Show/Hide Outlines

Mockup Hotkeys on active Tile

Keys	Action
0 - 9	Opacity Level
Ctrl0 - 9	Z-Index Level
←↓↑→	Correct X, Y Position (+1px)
Ctrl←↓↑→	Correct X, Y Position (+10px)

Contributing

For issues, bugs or imporvements please open an issue