images and polish

Author: dimaMachina

src/pages/blog/2025-06-10-graphiql-5/custom-rules-example.png

@@ -1,12 +1,18 @@
 ---
-title: The New GraphiQL 5 is Released
+title: The New GraphiQL 5 is Released; Press F1!
 tags: [announcements, grants]
 date: 2025-06-10
 byline: Dimitri Postolov
 ---
 
 import { Callout } from "nextra/components"
 
+<figure className="mt-6">
+  <>![GraphiQL 5 with Monaco Editor Preview](./graphiql-5.png)</>
+  {/* prettier-ignore */}
+  <figcaption className="mt-2 text-center">GraphiQL 5 with Monaco Editor Preview</figcaption>
+</figure>
+
 This post marks the completion of **8 weeks** of work on my GraphiQL grant,
 sponsored by the **GraphQL Foundation**.
 
@@ -32,7 +38,7 @@ another exciting milestone in the evolution of the project.
 GraphiQL 5 now uses [Monaco editor][monaco-editor] as default editor, the same
 editor used in [VSCode](https://code.visualstudio.com).
 
-Monaco Editor runs heavy language features (like syntax analysis, linting, and
+Monaco editor runs heavy language features (like syntax analysis, linting, and
 IntelliSense) in
 [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers),
 keeping the UI smooth and responsive.
@@ -74,8 +80,6 @@ I updated [GraphiQL CDN example][graphiql-cdn] to show how to use GraphiQL with
 **GraphiQL with Parcel** and **GraphiQL with Create React App** examples were
 removed.
 
-#### New Examples
-
 In addition to updated [GraphiQL CDN example][graphiql-cdn], I've added 2 new
 examples
 [GraphiQL with Vite](https://github.com/graphql/graphiql/tree/main/examples/graphiql-vite)
@@ -139,6 +143,19 @@ function App() {
 - `validationRules` - use custom GraphQL worker, see
   [Monaco GraphQL docs](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker)
 
+  <figure className="mt-6">
+    {/* prettier-ignore */}
+    <>![Example of custom GraphQL validation rules](./custom-rules-example.png)</>
+    {/* prettier-ignore */}
+    <figcaption className="mt-2 text-center">Example of custom GraphQL validation rules</figcaption>
+  </figure>
+
+### Additional Changes
+
+The shortcut to focus on the Doc Explorer search input is now `Cmd/Ctrl+Alt+K`
+instead of the previous `Cmd/Ctrl+K`. This was changed because monaco-editor has
+a built-in `Cmd/Ctrl+K` command.
+
 ## How to Update
 
 Update `graphiql` using your favorite package manager:
@@ -206,6 +223,11 @@ Follow me, **Dima Machina**, on [𝕏](https://x.com/dimaMachina_) and
 [GitHub](https://github.com/dimaMachina) to stay up to date with the latest
 updates!
 
+<Callout>
+  I am available for consulting and open to new and exciting challenges. Please
+  feel free to get in touch.
+</Callout>
+
 [monaco-editor]: https://github.com/microsoft/monaco-editor
 [graphiql-cdn]:
   https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html