UI Explorer for Designers and Frontend Developers
Lightweight and cozy frontend tool for development stage to test and visualize page structure
- Extend visual orientation by show selected HTML regions with predefined outlines
- Test or correct UI in accordance with design by mockup partials integration
npm i --save-dev ui-explorer
import 'ui-explorer';
<script src="https://unpkg.com/ui-explorer/build/javascript/app.js" defer></script>
- Autosave
- Select any DOM element by predefined list
- Color and Width properties
- Outlines glogal or custom Show/Hide
- Keyboard hot keys
- 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
- Double click - back image to init position
Keys | Action |
---|---|
Ctrl~ | Show/Hide Outlines |
Keys | Action |
---|---|
0 - 9 | Opacity Level |
Ctrl0 - 9 | Z-Index Level |
←↓↑→ | Correct X, Y Position (+1px) |
Ctrl←↓↑→ | Correct X, Y Position (+10px) |
For issues, bugs or imporvements please open an issue