Skip to content
Open source wireframing tool written in typescript, react and redux.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Wireframe sample Feb 18, 2018
config Add hash to output. Dec 29, 2018
screenshots Readme improved. Mar 18, 2018
src Better abstraction for box. Feb 10, 2019
.dockerignore Test Dec 28, 2018
.drone.yml Cleanup Dec 28, 2018
.gitignore Set appearance only when supported by renderer. Dec 23, 2018
.sass-lint.yml Custom build script. Mar 10, 2018
Dockerfile.build Other warning test. Dec 28, 2018
LICENSE.txt Added license Mar 18, 2018
README.md Build! Dec 28, 2018
karma.conf.js Custom build script. Mar 10, 2018
karma.coverage.conf.js Custom build script. Mar 10, 2018
package-lock.json React naming Feb 2, 2019
package.json React naming Feb 2, 2019
tsconfig.json Build fix. Dec 29, 2018
tslint.json Remove warning. Dec 19, 2018

README.md

mydraft.cc: Open Source Wireframing Tools

Test it out at: https://mydraft.cc/ (Work in progress)

The goal of this project is to create an open source wireframing tool. As a developer I have to create wireframes from time to time and there are great commercial tool in the market. But most of them cost more than a full Office suite per month. I think there is a need for a good and free solutions.

Version 01

What is the tech stack?

How to run the application?

Just install node.js and run the following commands in your terminal:

npm i
npm rebuild node-sass --force
npm start

Go to http://localhost:3000

How to build the application?

npm i
npm rebuild node-sass --force
npm run build

Copy the files from the build folder to your webserver.

What are the milestones?

  • 0.7: First working editor.
  • 0.9: Simple server to save diagrams with random id.
  • 1.0: Finalize the version and make small improvements and bugfixes.
  • 1.1: Manage pages within a project with background pages.
  • 1.2: Presentation mode.
  • 1.3: Dark theme
  • 1.4: Link UI elements to external sources or other pages.

How can I contribute?

The issues that are easy to start with are marked. Write a comment to the issue if you want to know more.

Read the Readme about shapes to understand how to create new shapes.

Why another open source tool? There is pencil

There is a great open source tool: http://pencil.evolus.vn/

We see some issue with this project:

  1. It uses outdated technology and therefore it is hard to contribute.
  2. It is mainly maintained by a small company and few people.
  3. It is missing advanced features.
  4. The UI design is really oldschool ;)

Contributors

You can’t perform that action at this time.