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.

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

• 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

Build Setup

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

# install dependencies
yarn

# serve with hot reload at localhost:8080
yarn dev

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

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

License

MIT

Copyright (c) 2017-present, Rudi Olckers