The Designer
OpenAPI Designer
The Designer is a powerful interface for viewing and editing your OpenAPI specification. It offers multiple modes to suit different workflows - from code editing to visual design to interactive documentation.
Accessing the Designer
Click on any project in the sidebar, then select "Design Project" from the project menu (⋮), or simply click the project name to open it.
Sidebar Toggle
Use the hamburger menu (☰) in the top bar to show or hide the sidebar. This gives you more screen space when editing large specs.
Area vs Designer Views
When working with a project, you can switch between two main views:
Area Mode
Focused on testing and making requests. Shows module toggles, endpoint tabs, and the full HTTP panel.
- •Edit request parameters
- •Send requests and see responses
- •Configure auth and assertions
Designer Mode
Focused on API design. Edit the OpenAPI spec directly with code editor, visual designer, or preview.
- •Edit spec as YAML/JSON
- •Visual form-based editing
- •Interactive documentation preview
Designer View Modes
Within Designer mode, choose how you want to see and edit the spec:
Design
Full-width editing view. Switch between code Editor and Visual Designer.
Split
Side-by-side view with Design on left, Preview on right. Best for live editing.
Preview
Full-width Swagger UI-style documentation with Try It Out.
Editor vs Visual Designer
In Design or Split view, toggle between code and visual editing:
Code Editor
Full-featured code editor with syntax highlighting. Edit the raw OpenAPI spec directly.
- •Switch between YAML and JSON format
- •Real-time validation with error highlighting
- •Full control over the spec
Visual Designer
Form-based editing with collapsible sections for each part of the spec.
- •No YAML/JSON knowledge required
- •Guided forms for each section
- •Cannot produce invalid syntax
Saving Changes
Unsaved Changes Indicator
An amber dot appears next to the project name when you have unsaved changes.
Save Button
Click Save or press Cmd/Ctrl + S to sync changes to the project.
Restore Button
Discard all unsaved changes and restore to the last saved state.
Real-time Validation
The Save button is disabled if there are validation errors. Fix all errors before saving. Error count is shown in the toolbar.
Which View Should I Use?
Choose the right view based on what you're trying to do:
Testing endpoints, sending requests?
→ Use Area Mode
Editing spec with live preview?
→ Use Designer > Split View
Learning the API, browsing documentation?
→ Use Designer > Preview
New to OpenAPI, prefer forms over code?
→ Use Designer > Design > Visual Designer
Power user, want full control?
→ Use Designer > Design > Code Editor
Recommended Workflows
Design FirstBuilding a New API
- Start in Visual Designer to set up info, servers, security
- Add paths and operations via the form interface
- Switch to Split View to see documentation as you go
- Use Code Editor for advanced schema composition
- Test in Area Mode when ready
Test FirstExploring an Imported API
- Import spec and go to Preview to browse documentation
- Try endpoints in Area Mode
- Make small edits in Visual Designer as needed
- Export when done
Power UserRapid Spec Editing
- Use Split View with Code Editor on left
- Edit YAML directly, see changes reflected in Preview instantly
- Use Find & Replace for bulk renames
- Use code folding to focus on specific sections
Exiting the Designer
If you have unsaved changes, you'll be asked to confirm before exiting. Your changes won't be lost unless you explicitly choose to discard them.