https://github.com/frontend-layers/ui-explorer

UI Explorer for html-base package
https://github.com/frontend-layers/ui-explorer

frontend ui visualization

Last synced: 3 days ago
JSON representation

UI Explorer for html-base package

• Host: GitHub
• URL: https://github.com/frontend-layers/ui-explorer
• Owner: Frontend-Layers
• License: mit
• Created: 2023-04-08T23:08:49.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-13T12:51:22.000Z (over 1 year ago)
• Last Synced: 2024-11-15T00:38:40.420Z (2 months ago)
• Topics: frontend, ui, visualization
• Language: JavaScript
• Homepage: https://ui-explorer.netlify.app/
• Size: 1.83 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# UI Explorer

[![License:MIT](https://img.shields.io/badge/License-MIT-lightgrey.svg)](https://github.com/frontend-layers/ui-explorer/LICENSE)

[![npm](https://img.shields.io/npm/v/ui-explorer.svg)](https://www.npmjs.com/package/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

```shell

npm i --save-dev ui-explorer

```

```javascript

import 'ui-explorer';

```

## CDN

```html

```

## 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](https://github.com/frontend-layers/ui-explorer/issues/new)