Node Based OpenAPI Design tool
recording.mp4
| APICanvas | Apibldr | Swagger Editor | Stoplight Studio | Postman | API Fiddle | OpenAPI-GUI | |
|---|---|---|---|---|---|---|---|
| Visual API Design | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ |
| Code Generation | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
| Path Edit | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Schema Edit | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Node Based UI | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
https://apis.guru/awesome-openapi3/category.html#editors
https://openapi.tools/#gui-editors
Our tool is implemented using React, with React Flow used for the node-based visual editor and Monaco for the YAML editing interface. Monaco Editor offers syntax highlighting, code folding, and autocompletion for YAML. The highlight-jump feature is implemented using a custom string matching algorithm over the raw YAML, a manually engineered workaround that mimics the interactive behavior of IDEs despite having no formal AST tracking.
The YAML editor is implemented using Monaco Editor, which offers syntax highlighting, code folding, and autocompletion for YAML. Inspired by OAS2Tree, the application also includes a highlight-jump feature: When users click on a node in the tree, the corresponding YAML is highlighted in the editor. The highlight is implemented using a custom string matching algorithm over the raw YAML - a manually engineered workaround that mimics the interactive behavior of IDEs despite having no formal AST tracking.
The synchronization feature is handled by a custom serialization/deserialization system that converts React Flow nodes and edges to and from a valid OpenAPI JSON object. This object is then serialized into YAML using a lightweight YAML-to-JSON library. In practice, dual sync mode is convenient but may result in lost work if synchronization conflicts between the graphical representation and its corresponding OpenAPI specification arise, especially when manual edits do not align with the internal JSON structure. To mitigate this, users are advised to select their sync mode carefully and are prompted with warnings when enabling dual sync.
Specification state is stored locally in the browser, and the tree visualization is generated from a custom transformation between OpenAPI JSON and a graph structure compatible with React Flow. The tree structure is rendered as a directed graph using the Dagre.js layout engine.
Currently, our tool is deployed as a static frontend-only web application, hosted via Vercel. It requires no installation and does not rely on backend services, and runs entirely in the browser. This makes it possible to work offline or be embedded into other web-based applications and development environments without requiring server modifications or backend support.