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.

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

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
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

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

MIT

Copyright (c) 2017-present, Rudi Olckers