Need help with ProtoCAD?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

147 Stars 7 Forks MIT License 159 Commits 20 Opened issues


ProtoCAD is a prototyping tool that allows developers to build UI component tree structure based on GraphQL query results.

Services available


Need anything else?

Contributors list


ProtoCAD is a prototyping tool that empowers developers to build and visualize their component as GraphQL schemas and queries.

Getting Started:

  • Run Electron and Webpack in Development Mode
    npm run dev
  • Run tests
    npm run test

How to Use:

  1. When the application starts, select the File tab from the menu and open a project of your choice. You would the find your all project files in the Project tab. To build components, click on Tools.

  2. You can now see the components you built in a tree structure. Go ahead and add props to the components. The structure can be populated with several child nodes.


  1. Let's convert the components to GraphQL Schema by clicking Convert to Schema Button. You can now see the components in SDL(Schema Definition Language).


  1. Write GraphQL resolver and save it by clicking on the Send Resolver Button.


  1. You could also write queries to request GraphQL server for data. Returned data is displayed under the GraphQL icon.



ProtoCAD is currently in beta release. We encourage you to submit issues for any bugs or ideas for enhancements. Also feel free to fork this repo and submit pull requests to contribute as well.




We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.