Skip to content

Commit 322146d

Browse files
authored
docs(README): provide alt attribute for all screenshots (#12)
1 parent 1b36258 commit 322146d

1 file changed

Lines changed: 59 additions & 75 deletions

File tree

README.md

Lines changed: 59 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
[![SpecLynx OpenAPI Toolkit](https://speclynx.com/assets/images/speclynx-openapi-toolkit.png)](https://speclynx.com)
1212

13-
## Why Choose SpecLynx OpenAPI Toolkit?
13+
## Why Choose SpecLynx OpenAPI Toolkit?
1414

1515
SpecLynx OpenAPI Toolkit is engineered for clarity, control, and confidence, enabling you to focus on designing exceptional APIs.
1616

@@ -47,93 +47,97 @@ We are actively expanding the feature set and fixing bugs; this documentation wi
4747

4848
#### Foreword
4949

50-
**JSON and YAML** — OpenAPI Toolkit provides the same level of support for OpenAPI specs written in JSON or YAML. It also aims to provide editor capabilities even for not-well-formed documents (for example, offering completion and syntax highlighting where possible).
50+
**JSON and YAML** — OpenAPI Toolkit provides the same level of support for OpenAPI specs written in JSON or YAML format. It also aims to provide editor capabilities even for not-well-formed documents (for example, offering completion and syntax highlighting where possible).
5151

52-
**Swagger/OpenAPI 2.0, OpenAPI 3.0, and 3.1** — OpenAPI Toolkit supports all of these versions with a consistent feature set.
52+
OpenAPI Toolkit supports following OpenAPI versions with a consistent feature set:
5353

54+
- [OpenAPI 2.0 (Swagger)](https://spec.openapis.org/oas/v2.0.html)
55+
- [OpenAPI 3.0.x](https://spec.openapis.org/oas/v3.0.4.html)
56+
- [OpenAPI 3.1.x](https://spec.openapis.org/oas/v3.1.1.html)
5457

55-
<img alt="image" src="https://github.com/user-attachments/assets/3d2f492d-181c-4952-9784-137411d76590" />
56-
<img alt="image" src="https://github.com/user-attachments/assets/6a97d11c-47da-4c28-aeca-60305bdbe95d" />
58+
###### OpenAPI 2.0 (Swagger)
5759

58-
<br><br>
60+
![OpenAPI (Swagger) 2.0 support](https://github.com/user-attachments/assets/c1d7d002-97e8-48cc-a64d-30e4c8987655)
61+
62+
###### OpenAPI 3.0.x
63+
64+
![OpenAPI 3.0.x support](https://github.com/user-attachments/assets/cfcc92af-648b-41d4-bddf-e74fdd493645)
65+
66+
###### OpenAPI 3.1.x
67+
68+
![OpenAPI 3.1.x support](https://github.com/user-attachments/assets/0e0e7017-e4f9-40e7-b7ad-303b8934d582)
5969

6070
**Web support** — OpenAPI Toolkit is designed to run both on Desktop and in Web environments such as [vscode.dev](https://vscode.dev/), [github.dev](https://github.dev/), and [GitHub Codespaces](https://github.com/features/codespaces). It is one of the few extensions that deliver advanced OpenAPI editing and validation/linting in the web environment.&#x20;
6171

6272
#### In-context OpenAPI Documentation (hover)
6373

6474
When you hover over a keyword (node key) in the document, the extension shows full, context-aware documentation in a hover panel that corresponds to the selected construct and matches the official specification.
6575

66-
<img alt="image" src="https://github.com/user-attachments/assets/7aaf568d-9a2f-4d4f-bb63-9d38db654579" />
67-
76+
![In-context OpenAPI Documentation ](https://github.com/user-attachments/assets/7aaf568d-9a2f-4d4f-bb63-9d38db654579)
6877

6978
The same documentation is also shown in the details pane of completion items. See the “Completion / Suggestions” section below.&#x20;
7079

7180
#### Completion / Suggestions
7281

7382
OpenAPI Toolkit provides an enriched completion experience. Under the hood, completion is driven by a semantic understanding of the node where completion is triggered, making suggestions far more precise and useful than standard JSON-Schema-based completion.&#x20;
7483

75-
##### Completion docs
84+
##### Completion documentation
7685

7786
Each completion item includes full documentation (the same content shown in hover).
7887
**Tip:** If the documentation panel doesn’t appear to the right of the completion label, click the `>` icon that appears when you hover the completion entry.&#x20;
7988

80-
<img alt="image" src="https://github.com/user-attachments/assets/1d90a38b-427a-4b23-a8f8-aeaa1aa2d448" />
89+
![Completion documentation](https://github.com/user-attachments/assets/1d90a38b-427a-4b23-a8f8-aeaa1aa2d448)
8190

8291
##### References completion
8392

8493
When completion is triggered within the value of a `$ref` field, the editor offers suggestions of compatible targets found in the document (this will be expanded to include documents across the workspace). It also displays the referenced content in the completion box, providing an in-context view of potential references without losing focus&#x20;
8594

86-
<img alt="image" src="https://github.com/user-attachments/assets/d293593c-332a-4183-abca-5cbf944176cb" />
87-
95+
![References completion](https://github.com/user-attachments/assets/d293593c-332a-4183-abca-5cbf944176cb)
8896

8997
##### Context-aware completion (e.g., `type: integer``format`)
9098

9199
Suggestions adapt to related fields. For example, if a schema sets `type: integer`, the `format` suggestions include only compatible values.&#x20;
92100

93-
<img alt="image" src="https://github.com/user-attachments/assets/6ef34a33-f7b4-4341-9edb-e8641e626914" />
94-
101+
![Context-aware completion](https://github.com/user-attachments/assets/6ef34a33-f7b4-4341-9edb-e8641e626914)
95102

96103
#### References
97104

98105
##### Reference target content in hover
99106

100107
Hovering over the value of a `$ref` field displays the referenced content in the hover box, providing an in-context view of references without losing focus.&#x20;
101108

102-
<img alt="image" src="https://github.com/user-attachments/assets/4882f6e3-7b13-4cd7-84ab-8ce2e3a4081c" />
103-
109+
![Preview reference target](https://github.com/user-attachments/assets/4882f6e3-7b13-4cd7-84ab-8ce2e3a4081c)
104110

105111

106112
##### Go to definition (F3)
107113

108114
Right-click the value of a `$ref` field and choose **Go to Definition** (or press **F3**) to jump to the reference target—either within the current file or in another file in the workspace.&#x20;
109115

110-
<img alt="image" src="https://github.com/user-attachments/assets/a5c1610a-1c06-4c8d-8316-46f953755cd8" />
116+
![Go to definition](https://github.com/user-attachments/assets/a5c1610a-1c06-4c8d-8316-46f953755cd8)
111117

112118
##### Go to references
113119

114120
Right-click a key (for example, under `components.schemas`) and choose **Go to References** to open a panel listing available references to jump to.&#x20;
115121

116-
<img alt="image" src="https://github.com/user-attachments/assets/2cb17ad2-cd43-4945-94a7-746c6397a82a" />
117-
122+
![Go to references](https://github.com/user-attachments/assets/2cb17ad2-cd43-4945-94a7-746c6397a82a)
118123

119124
##### Find all references
120125

121126
Right-click a key (for example, of a schema) and choose **Find All References** to open the References panel listing every usage of the selected target.&#x20;
122127

123-
<img alt="image" src="https://github.com/user-attachments/assets/9b00b3b1-03f3-4252-b7b9-4a853f00783d" />
128+
![Find all references](https://github.com/user-attachments/assets/9b00b3b1-03f3-4252-b7b9-4a853f00783d)
124129

125130
##### Dereference command
126131

127132
Right-click inside an OpenAPI document or right-click the file in the Explorer, then choose **OpenAPI Toolkit → Dereference API Document** to save a dereferenced copy locally. The default output name is `{filename}-dereferenced.{extension}`.&#x20;
128133

129-
<img alt="image" src="https://github.com/user-attachments/assets/e7bc9c2b-95be-4508-8212-1f2dd99334c3" />
130-
134+
![Dereference command](https://github.com/user-attachments/assets/e7bc9c2b-95be-4508-8212-1f2dd99334c3)
131135

132136
#### Syntax Highlighting
133137

134138
OpenAPI Toolkit provides **semantic** syntax highlighting, going beyond basic keyword coloring. Specific OpenAPI elements—such as operations, schemas, and reference objects—are highlighted with distinct colors and font styles. This helps you quickly recognize and distinguish different parts of an API definition, improving readability and navigation in complex specifications.&#x20;
135139

136-
<img alt="image" src="https://github.com/user-attachments/assets/b67c64b5-771d-4eb1-81d3-359872e7607b" />
140+
![Semantic Syntax Highlighting](https://github.com/user-attachments/assets/b67c64b5-771d-4eb1-81d3-359872e7607b)
137141

138142
#### Validation and Linting
139143

@@ -152,7 +156,7 @@ OpenAPI Toolkit supports three modes, which you can combine:
152156
2. **Spectral validation and linting**
153157
3. **Semantic validation and linting**&#x20;
154158

155-
<img alt="image" src="https://github.com/user-attachments/assets/36d55b1d-6cfa-41db-8656-1242e3e946c0" />
159+
![Validation/Linting modes](https://github.com/user-attachments/assets/36d55b1d-6cfa-41db-8656-1242e3e946c0)
156160

157161
##### Default configuration
158162

@@ -169,15 +173,17 @@ To enable Spectral-based checks:
169173

170174
Refer to the [Spectral documentation](https://docs.stoplight.io/docs/spectral/) for ruleset format details.&#x20;
171175

172-
<img alt="image" src="https://github.com/user-attachments/assets/1cb7691d-7fba-4b82-96b8-3a0344aa2ba4" />
176+
###### Create a Spectral ruleset
177+
![Create a Spectral ruleset](https://github.com/user-attachments/assets/1cb7691d-7fba-4b82-96b8-3a0344aa2ba4)
173178

174-
<img alt="image" src="https://github.com/user-attachments/assets/2bfd9175-a42b-43e2-96ad-1217b60bebcd" />
179+
###### Use a Spectral ruleset
180+
![Use a Spectral ruleset](https://github.com/user-attachments/assets/2bfd9175-a42b-43e2-96ad-1217b60bebcd)
175181

176182
##### Semantic validation
177183

178184
Enable **Apply Semantic Validation** in the extension settings. No rules file is required to run the built-in semantic validation checks.&#x20;
179185

180-
<img alt="image" src="https://github.com/user-attachments/assets/6245a7f4-71d2-46f9-a271-b031728ace4c" />
186+
![Semantic Validation](https://github.com/user-attachments/assets/6245a7f4-71d2-46f9-a271-b031728ace4c)
181187

182188
##### Semantic linting
183189

@@ -198,63 +204,41 @@ Semantic lint rules are defined in JSON or YAML. A ruleset typically includes:
198204
* **Condition(s)** to evaluate (e.g., required fields, naming patterns, min/max constraints)
199205
* **Optional fixes** or suggestions (when applicable)
200206

201-
<img alt="image" src="https://github.com/user-attachments/assets/a2f3e0d8-8178-43a6-b26c-f1678b3a7622" />
207+
![Semantic linting rules](https://github.com/user-attachments/assets/a2f3e0d8-8178-43a6-b26c-f1678b3a7622)
202208

203209
A separate section provides the complete rule schema and examples. *(If you don’t see it yet, it will be added as the rules stabilize.)*&#x20;
204210

205211
##### Supported major element “types” for semantic checks
206212

207-
* callback
208-
* components
209-
* contact
210-
* content
211-
* definitions
212-
* discriminator
213-
* encoding
214-
* example
215-
* external-documentation
216-
* header
217-
* headers
218-
* info
219-
* items
220-
* license
221-
* link
222-
* media-type
223-
* oauth-flow
224-
* oauth-flows
225-
* openapi
226-
* openapi3\_0
227-
* openapi3\_1
228-
* operation
229-
* parameter
230-
* parameters-definitions
231-
* path-item
232-
* paths
233-
* path-template
234-
* reference
235-
* request-body
236-
* response
237-
* responses
238-
* responses-definitions
239-
* schema
240-
* scopes
241-
* security-definitions
242-
* security-requirement
243-
* security-scheme
244-
* server
245-
* server-variable
246-
* swagger
247-
* tag
248-
* xml
249-
250-
*(These are the current high-level element types recognized by the semantic engine.)*&#x20;
251-
252-
---
213+
These are the current high-level element types recognized by the semantic engine.
214+
215+
| &nbsp; | &nbsp; | &nbsp; |
216+
|-------------------|-------------------------|--------------------------|
217+
| `callback` | `components` | `contact` |
218+
| `content` | `definitions` | `discriminator` |
219+
| `encoding` | `example` | `external-documentation` |
220+
| `header` | `headers` | `info` |
221+
| `items` | `license` | `link` |
222+
| `media-type` | `oauth-flow` | `oauth-flows` |
223+
| `openapi` | `openapi3_0` | `openapi3_1` |
224+
| `operation` | `parameter` | `parameters-definitions` |
225+
| `path-item` | `paths` | `path-template` |
226+
| `reference` | `request-body` | `response` |
227+
| `responses` | `responses-definitions` | `schema` |
228+
| `scopes` | `security-definitions` | `security-requirement` |
229+
| `security-scheme` | `server` | `server-variable` |
230+
| `swagger` | `tag` | `xml` |
231+
253232

254233
### Preview
255234

235+
The Preview panel (powered by [SwaggerUI](https://github.com/swagger-api/swagger-ui)) renders the current OpenAPI document and lets you interact with it.
236+
Preview panel can be opened by opening the Command Palette (CTRL+Shift+P) and running the `OpenAPI Toolkit: Show API Document preview` command.
237+
238+
![SpecLynx OpenAPI Toolkit Preview](https://github.com/user-attachments/assets/67c4e9a9-9084-41ab-bbbe-a01bb50d3457)
239+
256240

257-
The Preview panel (powered by Swagger UI) renders the current OpenAPI document and lets you interact with it:
241+
Preview interactions include:
258242

259243
* **Live rendering** — Quickly verify how changes look without leaving the editor
260244
* **Server selection & auth** — Choose servers and authorize requests where applicable

0 commit comments

Comments
 (0)