Skip to main content

ProtoPI Launch

· 4 min read

ProtoPI Launch - Request for Community Feedback!

We’re exited to introduce ProtoPI, a VS Code extension designed to enhance collaboration between frontend and backend developers. Envision frontend developers building interfaces without waiting on backend APIs and backend developers crafting systems fully aligned with frontend requirements - right from the start. ProtoPI bridges this gap, empowering both sides to work independently while staying fully synchronized.

ProtoPI simplifies the creation and management of OpenAPI Specification files, providing a single source of truth that keeps everyone on the same page. Our tool ensures that API standards and are followed without slowing down development.

One of the key features of ProtoP is its integrated mock server, which allows frontend teams to work with realistic API responses right from the early stages of development, irrespective of backend progress. This means faster project kick-offs and fewer bottlenecks.

Whether you’re starting a new project or refining an existing one, ProtoPI boosts efficiency and collaboration by address the common challenges in API development. Unlike other tools like Bruno, PostMan, or Insomnia, ProtoPI is designed to revolve around your GitHub repository. Rather than saving collections in the cloud, everything is stored with the code. This keeps your API specifications, debugging, and testing all in one place, eliminating the hassle of constantly rebuilding collections.

As we continue to launch ProtoPI, we are seeking community feedback to help shape its future! We are eager to hear your thoughts on features, improvements, and anything else that could make ProtoPI even more valuable for developers. This is an open source project, and your input is crucial in guiding its evolution!

Core Features We’re Working On:

VS Code Extension API:

  • Seamless Interaction with VS Code Webviews API: Create a more dynamic and interactive experience within the editor.
  • Integrated Mock Server Manager: Easily manage PRISM mock servers to provide frontend developers with reliable mock APIs.
  • Intuitive TreeView Navigation for OpenAPI YAML/YML Files: Quickly browse and manage large API definitions in a structured format.
  • Smooth Webview Integration: Enjoy a cohesive user experience with seamless communication between extension logic and webviews.

VS Code Extension Webviews:

  • Real-Time Communication with the VS Code Extension API: Webviews fully integrated with the extension API for efficient data exchange.
  • Responsive Svelte-Based UI: Fast and flexible user interface built with Svelte.
  • Advanced State Management with Svelte Writable and Derived Stores: Efficient handling of data and UI updates.
  • Organized Folder-Like Views Using TreeNode Structures: Easily navigate and interact with API components using familiar folder-like structures.
  • Enhanced User Experience with UI Improvements: Various visual and usability enhancements for a smoother experience within VS Code.

We invite you to explore ProtoPI, share your feedback, and join us in shaping the future of this open-source project! Your input will be instrumental in making ProtoPI the go-to solution for streamlining API development workflows.

ProtoPI In Action:

In the first video, you can see the ProtoPI UI interface opening multiple YAML files simultaneously. It enables navigation with basic drag-and-drop functionality using SortableJS.

The second video demonstrates how the TreeView is used to navigate an OpenAPI YAML specification file. The TreeView allows you to explore different collection items, which can be categorized as requests or responses in a REST API.

In this video, you see the process of opening multiple YAML files according to the OpenAPI specification. These files are then sent to the PRISM Mock Server Manager class, which launches a Node.js process running the YAML files as a mock server.

This video illustrates how to start and stop a mock server.

The final video showcases various functionalities of the user interface.