Wireframer

A wireframing / ui tool for mocking web-based applications.

Description

Wireframer is self-hosted Javascript application written in Vue.js. All data generated by the application is stored in the browser's localstorage. This project was inspired by Mockup Designer.

Requirements

• Node.js 16+ and Yarn 1.x
• Modern browser (tested on evergreen Chrome/Firefox)

Dependencies

• Vue.js (v2)
• Vuex
• Bootstrap 4
• interact.js
• Material Design icons by Google
• html2canvas

Installation

Copy index.html and the dist folder to a webserver.

Todo

• [x] Add more widgets: paragraph, table, navigation, tabs
• [x] Deselect widget when clicking outside canvas
• [x] Download/import localstorage json data
• [ ] Position widgets relative to other widgets (middle, equal size, etc.)
• [ ] Ability to sync localstorage to and from a central storage engine (e.g. Firebase)
• [ ] Group components / objects via multi-select
• [x] Clone components
• [ ] Custom components (grouped)
• [ ] Control actions via keyboard shortcuts (e.g. delete widget, undo)
• [ ] Serve icons locally

Build Setup

I welcome contributions - please get in touch with me before attempting larger changes.

# install dependencies
corepack prepare yarn@1.22.22 --activate
corepack yarn --version  # should show 1.22.22
corepack yarn

# serve with hot reload at localhost:8080
corepack yarn dev

# build for production with minification
corepack yarn build
#or
corepack yarn release

If you see odd yarn errors, check that your shell is using the Corepack-provided binary (e.g. type -a yarn) or just prefix commands with corepack yarn ... as above.

For detailed explanation on how things work, consult the docs for vue-loader.

License

MIT

Copyright (c) 2017-present, Rudi Olckers