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