A wireframing / ui tool for mocking web-based applications.
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.
- Node.js 16+ and Yarn 1.x
- Modern browser (tested on evergreen Chrome/Firefox)
Copy index.html and the dist folder to a webserver.
- Add more widgets: paragraph, table, navigation, tabs
- Deselect widget when clicking outside canvas
- 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
- Clone components
- Custom components (grouped)
- Control actions via keyboard shortcuts (e.g. delete widget, undo)
- Serve icons locally
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 releaseIf 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.
Copyright (c) 2017-present, Rudi Olckers