Code Editor

Direct Spec Editing

The Code Editor gives you full control over your OpenAPI specification. Edit the raw YAML or JSON directly with syntax highlighting, validation, and real-time preview.

When to Use Code Editor

Use the Code Editor when you need precise control, want to copy/paste spec snippets, or prefer working with raw YAML/JSON.

Accessing the Code Editor

1

Open a Project in Designer Mode

Toggle to "Designer" view using the Area/Designer switch.

2

Select Design or Split View

Choose "Design" for full-width editing or "Split" to see Preview alongside.

3

Click "Editor"

Toggle between "Editor" and "Visual Designer" using the buttons.

EditorVisual Designer

YAML vs JSON

Switch between formats instantly - your spec content is preserved:

YAMLJSON
Click to switch format
YAML
openapi: '3.0.3'
info:
title: Pet Store API
version: '1.0.0'
paths:
/pets:
get:
summary: List pets
  • - Cleaner, less verbose
  • - Easier to read
  • - Indentation-based
JSON
{
"openapi": "3.0.3",
"info": {
"title": "Pet Store API",
"version": "1.0.0"
},
"paths": { ... }
}
  • - Strict syntax
  • - Universal format
  • - Better for APIs

Which Format Should I Use?

Both formats are equivalent, but each has strengths for different situations:

Choose YAML when:

  • - Writing specs by hand (cleaner syntax)
  • - Working with large, complex specs (easier to read)
  • - Using multi-line descriptions (no escape sequences)
  • - Collaborating with humans (git diffs are cleaner)

Choose JSON when:

  • - Integrating with JavaScript/TypeScript tools
  • - Generating specs programmatically
  • - Strict validation is required (no implicit type conversion)
  • - Consuming from APIs that return JSON
Conversion Gotchas

YAML Booleans

yes, no,on, off are treated as booleans. Use quotes if you mean strings: "yes"

Numbers in YAML

version: 1.0 becomes a number. Quote it: version: "1.0"

Editor Features

Syntax Highlighting

Keys, values, strings, and numbers are color-coded for easy reading. Supports both YAML and JSON syntax.

Line Numbers

Line numbers help you navigate large specs and match error messages to specific locations.

Editor Toolbar

Hover over the editor to reveal the toolbar buttons in the top-right corner:

CopyFormatMinify
Copy

Copy the entire spec to clipboard. Shows "Copied!" confirmation for 2 seconds.

Format

Beautify your code with proper indentation and line breaks. Makes specs easier to read.

Minify

Compress code by removing whitespace. Useful when sharing or embedding specs.

Smart Paste Detection

When you paste a large OpenAPI spec (500+ characters containing "openapi:"), Tigrister detects it automatically and updates the preview immediately.

Quick Import Tip

Found a spec online? Just copy the entire YAML/JSON and paste it into the editor. Tigrister will parse and display it instantly in the Preview panel.

Editor State Persistence

The editor remembers your position when you switch between views or close and reopen the designer:

Scroll Position

Jump back to where you were

Cursor Position

Continue editing seamlessly

Per-Project

Each project remembers separately

Real-time Validation

As you type, the editor validates your spec against the OpenAPI schema:

Errors

Invalid syntax or schema violations. Must be fixed before saving. Error count shown in toolbar.

Warnings

Best practice suggestions or potential issues. Won't block saving but worth reviewing.

Validation Banner(appears at top of editor)
2 error(s), 1 warning(s)
  • -Line 5: Missing required field "responses" in operation
  • -Line 12: Invalid HTTP method "FETCH"

The banner shows a summary of all errors and warnings. Up to 3 errors are displayed inline. Fix all errors before the Save button becomes available.

Common Patterns (Copy & Paste)

Frequently used OpenAPI patterns ready to copy into your spec:

CRUD Endpoint
Copy-paste ready
/items/{itemId}:
get:
summary: Get item by ID
parameters:
- name: itemId
in: path
required: true
schema:
type: integer
responses:
'200':
description: Success
'404':
description: Not found
Pagination Parameters
Reusable component
components:
parameters:
PageParam:
name: page
in: query
schema:
type: integer
minimum: 1
default: 1
LimitParam:
name: limit
in: query
schema:
type: integer
minimum: 1
maximum: 100
default: 20
Standard Error Response
Consistent errors
components:
schemas:
Error:
type: object
required: [code, message]
properties:
code:
type: string
example: "VALIDATION_ERROR"
message:
type: string
example: "Invalid input"
details:
type: array
items:
type: object
properties:
field:
type: string
reason:
type: string
Bearer Token Security
JWT authentication
components:
securitySchemes:
BearerAuth:
type: http
scheme: bearer
bearerFormat: JWT
description: JWT access token
security:
- BearerAuth: []

Using References

After adding components, reference them with $ref: '#/components/schemas/Error'or $ref: '#/components/parameters/PageParam'

Tips

Use Split View

See your changes reflected in the Preview instantly as you edit.

Copy from Examples

Copy spec snippets from online examples and paste directly into the editor.

Fix Errors First

The Save button is disabled when errors exist. Fix all red errors before saving.

Indent with Spaces

YAML requires consistent indentation. Use 2 spaces per level.

Area ModeVisual Designer