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