diff --git a/config-overrides.js b/config-overrides.js
new file mode 100644
index 000000000..6b9d5408d
--- /dev/null
+++ b/config-overrides.js
@@ -0,0 +1,8 @@
+module.exports = function override(config) {
+  config.module.rules.push({
+    test: /\.yml$/i,
+    loader: 'raw-loader',
+  });
+
+  return config;
+};
diff --git a/package-lock.json b/package-lock.json
index 1a49d39dc..6bba8141f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4265,8 +4265,7 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -5215,8 +5214,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
     },
     "binary-extensions": {
       "version": "2.2.0",
@@ -7722,8 +7720,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -13086,7 +13083,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
       "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-      "dev": true,
       "requires": {
         "minimist": "^1.2.5"
       }
@@ -13316,7 +13312,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
       "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-      "dev": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -19873,6 +19868,27 @@
         "unpipe": "1.0.0"
       }
     },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
diff --git a/package.json b/package.json
index fe1721ed3..887da6f4e 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "js-yaml": "^4.1.0",
     "monaco-editor": "^0.28.1",
     "monaco-yaml": "^2.5.1",
+    "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-flow-renderer": "^9.6.9",
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index b91adb3ff..879966d3f 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -5,6 +5,7 @@ import { Editor } from './Editor/Editor';
 import { Navigation } from './Navigation';
 import { Template } from './Template';
 import { Visualiser } from './Visualiser';
+import NewFile from './NewFile';
 
 import { debounce } from '../helpers';
 import state from '../state';
@@ -16,6 +17,7 @@ export const Content: React.FunctionComponent<ContentProps> = () => { // eslint-
 
   const navigationEnabled = sidebarState.panels.navigation.get();
   const editorEnabled = sidebarState.panels.editor.get();
+  const newFileEnabled = sidebarState.panels.newFile.get();
   const viewEnabled = sidebarState.panels.view.get();
   const viewType = sidebarState.panels.viewType.get();
 
@@ -48,26 +50,31 @@ export const Content: React.FunctionComponent<ContentProps> = () => { // eslint-
   return (
     <div className="flex flex-1 flex-row relative">
       <div className="flex flex-1 flex-row relative">
-        <SplitPane
-          size={viewEnabled ? secondPaneSize : 0}
-          minSize={0}
-          maxSize={secondPaneMaxSize}
-          pane1Style={
-            navigationEnabled || editorEnabled ? undefined : { width: '0px' }
-          }
-          pane2Style={
-            viewEnabled ? { overflow: 'auto' } : { width: '0px' }
-          }
-          primary={viewEnabled ? 'first' : 'second'}
-          defaultSize={localStorageRightPaneSize}
-          onChange={debounce((size: string) => {
-            localStorage.setItem(splitPosRight, String(size));
-          }, 100)}
-        >
-          {navigationAndEditor}
-          {viewType === 'template' && <Template />}
-          {viewType === 'visualiser' && <Visualiser />}
-        </SplitPane>
+
+        {newFileEnabled && <NewFile />}
+
+        {!newFileEnabled && 
+          <SplitPane
+            size={viewEnabled ? secondPaneSize : 0}
+            minSize={0}
+            maxSize={secondPaneMaxSize}
+            pane1Style={
+              navigationEnabled || editorEnabled ? undefined : { width: '0px' }
+            }
+            pane2Style={
+              viewEnabled ? { overflow: 'auto' } : { width: '0px' }
+            }
+            primary={viewEnabled ? 'first' : 'second'}
+            defaultSize={localStorageRightPaneSize}
+            onChange={debounce((size: string) => {
+              localStorage.setItem(splitPosRight, String(size));
+            }, 100)}
+          >
+            {navigationAndEditor}
+            {viewType === 'template' && <Template />}
+            {viewType === 'visualiser' && <Visualiser />}
+          </SplitPane> 
+        }
       </div>
     </div>
   );
diff --git a/src/components/NewFile/index.tsx b/src/components/NewFile/index.tsx
new file mode 100644
index 000000000..7536751dd
--- /dev/null
+++ b/src/components/NewFile/index.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import examples from '../../examples';
+
+import { EditorService } from '../../services';
+import state from '../../state';
+
+const NewFile = () => {
+  const handleTemplateClick = (template: string) => {
+    EditorService.updateState({ content: template, updateModel: true });
+
+    const panels = state.sidebar.panels;
+    panels.merge({
+      newFile: false,
+    });
+  };
+
+  const realLifeExamples = examples.filter((template) => template.type === 'real-example');
+  const templates = examples.filter((template) => template.type === 'protocol-example');
+
+  return (
+    <div className="bg-gray-800 w-full  overflow-auto">
+      <div className="max-w-5xl mx-auto py-10">
+        <div className="flex">
+          <div className="w-1/4 pr-10 space-y-4">
+            <span className="uppercase text-white text-md font-bold">Quick Start</span>
+            <span className="block text-gray-300 text-md leading-5">To get started please select a template.</span>
+          </div>
+          <div className="px-4 w-full  overflow-auto space-y-8 ">
+            <div>
+              <span className="uppercase text-gray-100 text-md font-bold">Templates</span>
+              <div className="grid grid-cols-3 gap-4 py-4">
+                {templates.map(({ title, description: Description, template }) => {
+                  return (
+                    <button
+                      onClick={() => handleTemplateClick(template)}
+                      key={title}
+                      className="text-left flex flex-col cursor-pointer rounded-lg p-4 pb-6 transform transition duration-200 border-2 border-gray-400 hover:scale-105 hover:border-pink-500 bg-gray-100"
+                    >
+                      <span className="block text-md text-gray-800 font-bold leading-0 ">{title}</span>
+                      <span className="block text-sm text-gray-500 font-light mt-1">
+                        <Description />
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+            <div>
+              <span className="uppercase text-gray-100 text-md font-bold">Real world Examples</span>
+              <div className="grid grid-cols-3 gap-4 py-4">
+                {realLifeExamples.map(({ title, description: Description, template }) => {
+                  return (
+                    <button
+                      onClick={() => handleTemplateClick(template)}
+                      key={title}
+                      className="text-left  flex flex-col cursor-pointer rounded-lg p-4 pb-6 transform transition duration-200 border-2 border-gray-400 hover:scale-105 hover:border-pink-500 bg-gray-100"
+                    >
+                      <span className="block text-md text-gray-800 font-bold">{title}</span>
+                      <span className="block text-sm text-gray-500 font-light mt-1">
+                        <Description />
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+            <span className=" text-xs block text-white ">
+              Don&apos;t see what you&apos;re looking for? <a target="_blank" href="https://github.com/asyncapi/studio/issues/new?assignees=&labels=enhancement&template=enhancement.md&title=Template%20Request:%20{%20template%20name%20and%20type%20}" className="underline text-pink-500" rel="noreferrer">Request a template or add one to the list &rarr;</a>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewFile;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 52f6182b5..3cc3af3ff 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { VscListSelection, VscCode, VscOpenPreview, VscGraph } from 'react-icons/vsc';
+import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile } from 'react-icons/vsc';
 
 import state from '../state';
 
@@ -41,6 +41,7 @@ function setActiveNav(navItem: NavItemType) {
     });
     return;
   }
+
   panels.set(newState);
 }
 
@@ -84,6 +85,11 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = () => {
       state: () => sidebarState.panels.view.get() && sidebarState.panels.viewType.get() === 'visualiser',
       icon: <VscGraph className="w-5 h-5" />,
     },
+    {
+      name: 'newFile',
+      state: () => sidebarState.panels.newFile.get(),
+      icon: <VscNewFile className="w-5 h-5" />,
+    },
   ];
 
   return (
diff --git a/src/examples/index.tsx b/src/examples/index.tsx
new file mode 100644
index 000000000..f60e2bf37
--- /dev/null
+++ b/src/examples/index.tsx
@@ -0,0 +1,67 @@
+// @ts-nocheck
+
+// protocol examples
+import kafka from '!!raw-loader!./streetlights-kafka.yml';
+import websocket from '!!raw-loader!./websocket-gemini.yml';
+import mqtt from '!!raw-loader!./streetlights-mqtt.yml';
+import simple from '!!raw-loader!./simple.yml';
+
+// real world examples
+import slack from '!!raw-loader!./real-world/slack-rtm.yml';
+import gitterStreaming from '!!raw-loader!./real-world/gitter-streaming.yml';
+
+const templateTypes = {
+  protocol: 'protocol-example',
+  realExample: 'real-example'
+};
+
+export default [
+  {
+    title: 'Simple Example',
+    description: () => <>A basic example of a service that is in charge of processing user signups. Great place to start learning AsyncAPI.</>,
+    template: simple,
+    type: templateTypes.protocol
+  },
+  {
+    title: 'Simple Hello World',
+    description: () => <>A basic example of a service that is in charge of processing user signups. Great place to start learning AsyncAPI.</>,
+    template: simple,
+    type: templateTypes.protocol
+  },
+  {
+    title: 'Apache Kafka',
+    description: () => <>A framework implementation of a software bus using stream-processing. Open Source developed by the Apache Software Foundation.</>,
+    template: kafka,
+    type: templateTypes.protocol
+  },
+  {
+    title: 'WebSocket',
+    description: () => <>A computer communications protocol, providing full-duplex communication channels over a single TCP connection.</>,
+    template: websocket,
+    type: templateTypes.protocol
+  },
+  {
+    title: 'MQTT',
+    description: () => <>A protocol for fetching resources. It is the foundation of any data exchange on the Web and it is a client-server protocol.</>,
+    template: mqtt,
+    type: templateTypes.protocol
+  },
+  {
+    title: 'HTTP',
+    description: () => <>A protocol for fetching resources. It is the foundation of any data exchange on the Web and it is a client-server protocol.</>,
+    template: gitterStreaming,
+    type: templateTypes.protocol
+  },
+  {
+    title: 'Slack Real Time Messaging API',
+    description: () => <>Slack Real time messaging API. Using HTTP protocol.</>,
+    template: slack,
+    type: templateTypes.realExample
+  },
+  {
+    title: 'Glitter Streaming API',
+    description: () => <>Gitter Streaming API from https://stream.gitter.im. Using HTTP protocol.</>,
+    template: gitterStreaming,
+    type: templateTypes.realExample
+  }
+];
diff --git a/src/examples/real-world/gitter-streaming.yml b/src/examples/real-world/gitter-streaming.yml
new file mode 100644
index 000000000..e8cdd5034
--- /dev/null
+++ b/src/examples/real-world/gitter-streaming.yml
@@ -0,0 +1,164 @@
+asyncapi: '2.2.0'
+id: 'urn:com:gitter:streaming:api'
+info:
+  title: Gitter Streaming API
+  version: '1.0.0'
+
+servers:
+  production:
+    url: https://stream.gitter.im/v1
+    protocol: https
+    protocolVersion: '1.1'
+    security:
+      - httpBearerToken: []
+
+channels:
+  /rooms/{roomId}/{resource}:
+    parameters:
+      roomId:
+        description: Id of the Gitter room.
+        schema:
+          type: string
+          examples:
+            - 53307860c3599d1de448e19d
+      resource:
+        description: The resource to consume.
+        schema:
+          type: string
+          enum:
+            - chatMessages
+            - events
+    subscribe:
+      bindings:
+        http:
+          type: response
+      message:
+        oneOf:
+          - $ref: '#/components/messages/chatMessage'
+          - $ref: '#/components/messages/heartbeat'
+
+components:
+  securitySchemes:
+    httpBearerToken:
+      type: http
+      scheme: bearer
+  messages:
+    chatMessage:
+      schemaFormat: 'application/schema+yaml;version=draft-07'
+      summary: >-
+        A message represents an individual chat message sent to a room.
+        They are a sub-resource of a room.
+      payload:
+        type: object
+        properties:
+          id:
+            type: string
+            description: ID of the message.
+          text:
+            type: string
+            description: Original message in plain-text/markdown.
+          html:
+            type: string
+            description: HTML formatted message.
+          sent:
+            type: string
+            format: date-time
+            description: ISO formatted date of the message.
+          fromUser:
+            type: object
+            description: User that sent the message.
+            properties:
+              id:
+                type: string
+                description: Gitter User ID.
+              username:
+                type: string
+                description: Gitter/GitHub username.
+              displayName:
+                type: string
+                description: Gitter/GitHub user real name.
+              url:
+                type: string
+                description: Path to the user on Gitter.
+              avatarUrl:
+                type: string
+                format: uri
+                description: User avatar URI.
+              avatarUrlSmall:
+                type: string
+                format: uri
+                description: User avatar URI (small).
+              avatarUrlMedium:
+                type: string
+                format: uri
+                description: User avatar URI (medium).
+              v:
+                type: number
+                description: Version.
+              gv:
+                type: string
+                description: Stands for "Gravatar version" and is used for cache busting.
+          unread:
+            type: boolean
+            description: Boolean that indicates if the current user has read the message.
+          readBy:
+            type: number
+            description: Number of users that have read the message.
+          urls:
+            type: array
+            description: List of URLs present in the message.
+            items:
+              type: string
+              format: uri
+          mentions:
+            type: array
+            description: List of @Mentions in the message.
+            items:
+              type: object
+              properties:
+                screenName:
+                  type: string
+                userId:
+                  type: string
+                userIds:
+                  type: array
+                  items:
+                    type: string
+          issues:
+            type: array
+            description: 'List of #Issues referenced in the message.'
+            items:
+              type: object
+              properties:
+                number:
+                  type: string
+          meta:
+            type: array
+            description: Metadata. This is currently not used for anything.
+            items: {}
+          v:
+            type: number
+            description: Version.
+          gv:
+            type: string
+            description: Stands for "Gravatar version" and is used for cache busting.
+      bindings:
+        http:
+          $ref: '#/components/messageBindings/streamingHeaders'
+
+    heartbeat:
+      schemaFormat: 'application/schema+yaml;version=draft-07'
+      summary: Its purpose is to keep the connection alive.
+      payload:
+        type: string
+        enum: ["\r\n"]
+      bindings:
+        http:
+          $ref: '#/components/messageBindings/streamingHeaders'
+  
+  messageBindings:
+    streamingHeaders:
+      http:
+        headers:
+          'Transfer-Encoding': 'chunked'
+          Trailer: '\r\n'
\ No newline at end of file
diff --git a/src/examples/real-world/slack-rtm.yml b/src/examples/real-world/slack-rtm.yml
new file mode 100644
index 000000000..e600e0b73
--- /dev/null
+++ b/src/examples/real-world/slack-rtm.yml
@@ -0,0 +1,884 @@
+asyncapi: '2.2.0'
+id: 'urn:com:slack:rtm:api'
+info:
+  title: Slack Real Time Messaging API
+  version: '1.0.0'
+
+servers:
+  production:
+    url: https://slack.com/api/rtm.connect
+    protocol: https
+    protocolVersion: '1.1'
+    security:
+      - token: []
+
+channels:
+  /:
+    publish:
+      message:
+        $ref: '#/components/messages/outgoingMessage'
+    subscribe:
+      message:
+        oneOf:
+          - $ref: '#/components/messages/hello'
+          - $ref: '#/components/messages/connectionError'
+          - $ref: '#/components/messages/accountsChanged'
+          - $ref: '#/components/messages/botAdded'
+          - $ref: '#/components/messages/botChanged'
+          - $ref: '#/components/messages/channelArchive'
+          - $ref: '#/components/messages/channelCreated'
+          - $ref: '#/components/messages/channelDeleted'
+          - $ref: '#/components/messages/channelHistoryChanged'
+          - $ref: '#/components/messages/channelJoined'
+          - $ref: '#/components/messages/channelLeft'
+          - $ref: '#/components/messages/channelMarked'
+          - $ref: '#/components/messages/channelRename'
+          - $ref: '#/components/messages/channelUnarchive'
+          - $ref: '#/components/messages/commandsChanged'
+          - $ref: '#/components/messages/dndUpdated'
+          - $ref: '#/components/messages/dndUpdatedUser'
+          - $ref: '#/components/messages/emailDomainChanged'
+          - $ref: '#/components/messages/emojiRemoved'
+          - $ref: '#/components/messages/emojiAdded'
+          - $ref: '#/components/messages/fileChange'
+          - $ref: '#/components/messages/fileCommentAdded'
+          - $ref: '#/components/messages/fileCommentDeleted'
+          - $ref: '#/components/messages/fileCommentEdited'
+          - $ref: '#/components/messages/fileCreated'
+          - $ref: '#/components/messages/fileDeleted'
+          - $ref: '#/components/messages/filePublic'
+          - $ref: '#/components/messages/fileShared'
+          - $ref: '#/components/messages/fileUnshared'
+          - $ref: '#/components/messages/goodbye'
+          - $ref: '#/components/messages/groupArchive'
+          - $ref: '#/components/messages/groupClose'
+          - $ref: '#/components/messages/groupHistoryChanged'
+          - $ref: '#/components/messages/groupJoined'
+          - $ref: '#/components/messages/groupLeft'
+          - $ref: '#/components/messages/groupMarked'
+          - $ref: '#/components/messages/groupOpen'
+          - $ref: '#/components/messages/groupRename'
+          - $ref: '#/components/messages/groupUnarchive'
+          - $ref: '#/components/messages/imClose'
+          - $ref: '#/components/messages/imCreated'
+          - $ref: '#/components/messages/imMarked'
+          - $ref: '#/components/messages/imOpen'
+          - $ref: '#/components/messages/manualPresenceChange'
+          - $ref: '#/components/messages/memberJoinedChannel'
+          - $ref: '#/components/messages/message'
+
+components:
+  securitySchemes:
+    token:
+      type: httpApiKey
+      name: token
+      in: query
+
+  schemas:
+    attachment:
+      type: object
+      properties:
+        fallback:
+          type: string
+        color:
+          type: string
+        pretext:
+          type: string
+        author_name:
+          type: string
+        author_link:
+          type: string
+          format: uri
+        author_icon:
+          type: string
+          format: uri
+        title:
+          type: string
+        title_link:
+          type: string
+          format: uri
+        text:
+          type: string
+        fields:
+          type: array
+          items:
+            type: object
+            properties:
+              title:
+                type: string
+              value:
+                type: string
+              short:
+                type: boolean
+        image_url:
+          type: string
+          format: uri
+        thumb_url:
+          type: string
+          format: uri
+        footer:
+          type: string
+        footer_icon:
+          type: string
+          format: uri
+        ts:
+          type: number
+
+  messages:
+    hello:
+      summary: 'First event received upon connection.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - hello
+    connectionError:
+      summary: 'Event received when a connection error happens.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - error
+          error:
+            type: object
+            properties:
+              code:
+                type: number
+              msg:
+                type: string
+    accountsChanged:
+      summary: 'The list of accounts a user is signed into has changed.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - accounts_changed
+    botAdded:
+      summary: 'A bot user was added.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - bot_added
+          bot:
+            type: object
+            properties:
+              id:
+                type: string
+              app_id:
+                type: string
+              name:
+                type: string
+              icons:
+                type: object
+                additionalProperties:
+                  type: string
+    botChanged:
+      summary: 'A bot user was changed.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - bot_added
+          bot:
+            type: object
+            properties:
+              id:
+                type: string
+              app_id:
+                type: string
+              name:
+                type: string
+              icons:
+                type: object
+                additionalProperties:
+                  type: string
+    channelArchive:
+      summary: 'A channel was archived.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - channel_archive
+          channel:
+            type: string
+          user:
+            type: string
+    channelCreated:
+      summary: 'A channel was created.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - channel_created
+          channel:
+            type: object
+            properties:
+              id:
+                type: string
+              name:
+                type: string
+              created:
+                type: number
+              creator:
+                type: string
+    channelDeleted:
+      summary: 'A channel was deleted.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - channel_deleted
+          channel:
+            type: string
+    channelHistoryChanged:
+      summary: 'Bulk updates were made to a channel''s history.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - channel_history_changed
+          latest:
+            type: string
+          ts:
+            type: string
+          event_ts:
+            type: string
+    channelJoined:
+      summary: 'You joined a channel.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - channel_joined
+          channel:
+            type: object
+            properties:
+              id:
+                type: string
+              name:
+                type: string
+              created:
+                type: number
+              creator:
+                type: string
+    channelLeft:
+      summary: 'You left a channel.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - channel_left
+          channel:
+            type: string
+    channelMarked:
+      summary: 'Your channel read marker was updated.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - channel_marked
+          channel:
+            type: string
+          ts:
+            type: string
+    channelRename:
+      summary: 'A channel was renamed.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - channel_rename
+          channel:
+            type: object
+            properties:
+              id:
+                type: string
+              name:
+                type: string
+              created:
+                type: number
+    channelUnarchive:
+      summary: 'A channel was unarchived.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - channel_unarchive
+          channel:
+            type: string
+          user:
+            type: string
+    commandsChanged:
+      summary: 'A slash command has been added or changed.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - commands_changed
+          event_ts:
+            type: string
+    dndUpdated:
+      summary: 'Do not Disturb settings changed for the current user.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - dnd_updated
+          user:
+            type: string
+          dnd_status:
+            type: object
+            properties:
+              dnd_enabled:
+                type: boolean
+              next_dnd_start_ts:
+                type: number
+              next_dnd_end_ts:
+                type: number
+              snooze_enabled:
+                type: boolean
+              snooze_endtime:
+                type: number
+    dndUpdatedUser:
+      summary: 'Do not Disturb settings changed for a member.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - dnd_updated_user
+          user:
+            type: string
+          dnd_status:
+            type: object
+            properties:
+              dnd_enabled:
+                type: boolean
+              next_dnd_start_ts:
+                type: number
+              next_dnd_end_ts:
+                type: number
+    emailDomainChanged:
+      summary: 'The workspace email domain has changed.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - email_domain_changed
+          email_domain:
+            type: string
+          event_ts:
+            type: string
+    emojiRemoved:
+      summary: 'A custom emoji has been removed.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - emoji_changed
+          subtype:
+            type: string
+            enum:
+              - remove
+          names:
+            type: array
+            items:
+              type: string
+          event_ts:
+            type: string
+    emojiAdded:
+      summary: 'A custom emoji has been added.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - emoji_changed
+          subtype:
+            type: string
+            enum:
+              - add
+          name:
+            type: string
+          value:
+            type: string
+            format: uri
+          event_ts:
+            type: string
+    fileChange:
+      summary: 'A file was changed.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - file_change
+          file_id:
+            type: string
+          file:
+            type: object
+            properties:
+              id:
+                type: string
+    fileCommentAdded:
+      summary: 'A file comment was added.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - file_comment_added
+          comment: {}
+          file_id:
+            type: string
+          file:
+            type: object
+            properties:
+              id:
+                type: string
+    fileCommentDeleted:
+      summary: 'A file comment was deleted.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - file_comment_deleted
+          comment:
+            type: string
+          file_id:
+            type: string
+          file:
+            type: object
+            properties:
+              id:
+                type: string
+    fileCommentEdited:
+      summary: 'A file comment was edited.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - file_comment_edited
+          comment: {}
+          file_id:
+            type: string
+          file:
+            type: object
+            properties:
+              id:
+                type: string
+    fileCreated:
+      summary: 'A file was created.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - file_created
+          file_id:
+            type: string
+          file:
+            type: object
+            properties:
+              id:
+                type: string
+    fileDeleted:
+      summary: 'A file was deleted.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - file_deleted
+          file_id:
+            type: string
+          event_ts:
+            type: string
+    filePublic:
+      summary: 'A file was made public.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - file_public
+          file_id:
+            type: string
+          file:
+            type: object
+            properties:
+              id:
+                type: string
+    fileShared:
+      summary: 'A file was shared.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - file_shared
+          file_id:
+            type: string
+          file:
+            type: object
+            properties:
+              id:
+                type: string
+    fileUnshared:
+      summary: 'A file was unshared.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - file_unshared
+          file_id:
+            type: string
+          file:
+            type: object
+            properties:
+              id:
+                type: string
+    goodbye:
+      summary: 'The server intends to close the connection soon.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - goodbye
+    groupArchive:
+      summary: 'A private channel was archived.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - group_archive
+          channel:
+            type: string
+    groupClose:
+      summary: 'You closed a private channel.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - group_close
+          user:
+            type: string
+          channel:
+            type: string
+    groupHistoryChanged:
+      summary: 'Bulk updates were made to a private channel''s history.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - group_history_changed
+          latest:
+            type: string
+          ts:
+            type: string
+          event_ts:
+            type: string
+    groupJoined:
+      summary: 'You joined a private channel.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - group_joined
+          channel:
+            type: object
+            properties:
+              id:
+                type: string
+              name:
+                type: string
+              created:
+                type: number
+              creator:
+                type: string
+    groupLeft:
+      summary: 'You left a private channel.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - group_left
+          channel:
+            type: string
+    groupMarked:
+      summary: 'A private channel read marker was updated.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - group_marked
+          channel:
+            type: string
+          ts:
+            type: string
+    groupOpen:
+      summary: 'You opened a private channel.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - group_open
+          user:
+            type: string
+          channel:
+            type: string
+    groupRename:
+      summary: 'A private channel was renamed.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - group_rename
+          channel:
+            type: object
+            properties:
+              id:
+                type: string
+              name:
+                type: string
+              created:
+                type: number
+    groupUnarchive:
+      summary: 'A private channel was unarchived.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - group_unarchive
+          channel:
+            type: string
+          user:
+            type: string
+    imClose:
+      summary: 'You closed a DM.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - im_close
+          channel:
+            type: string
+          user:
+            type: string
+    imCreated:
+      summary: 'A DM was created.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - im_created
+          channel:
+            type: object
+            properties:
+              id:
+                type: string
+              name:
+                type: string
+              created:
+                type: number
+              creator:
+                type: string
+          user:
+            type: string
+    imMarked:
+      summary: 'A direct message read marker was updated.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - im_marked
+          channel:
+            type: string
+          ts:
+            type: string
+    imOpen:
+      summary: 'You opened a DM.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - im_open
+          channel:
+            type: string
+          user:
+            type: string
+    manualPresenceChange:
+      summary: 'You manually updated your presence.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - manual_presence_change
+          presence:
+            type: string
+    memberJoinedChannel:
+      summary: 'A user joined a public or private channel.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - member_joined_channel
+          user:
+            type: string
+          channel:
+            type: string
+          channel_type:
+            type: string
+            enum:
+              - C
+              - G
+          team:
+            type: string
+          inviter:
+            type: string
+    memberLeftChannel:
+      summary: 'A user left a public or private channel.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - member_left_channel
+          user:
+            type: string
+          channel:
+            type: string
+          channel_type:
+            type: string
+            enum:
+              - C
+              - G
+          team:
+            type: string
+    message:
+      summary: 'A message was sent to a channel.'
+      payload:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - message
+          user:
+            type: string
+          channel:
+            type: string
+          text:
+            type: string
+          ts:
+            type: string
+          attachments:
+            type: array
+            items:
+              $ref: '#/components/schemas/attachment'
+          edited:
+            type: object
+            properties:
+              user:
+                type: string
+              ts:
+                type: string
+    outgoingMessage:
+      summary: 'A message was sent to a channel.'
+      payload:
+        type: object
+        properties:
+          id:
+            type: number
+          type:
+            type: string
+            enum:
+              - message
+          channel:
+            type: string
+          text:
+            type: string
\ No newline at end of file
diff --git a/src/examples/simple.yml b/src/examples/simple.yml
new file mode 100644
index 000000000..64d056bbf
--- /dev/null
+++ b/src/examples/simple.yml
@@ -0,0 +1,23 @@
+asyncapi: '2.2.0'
+info:
+  title: Account Service
+  version: 1.0.0
+  description: This service is in charge of processing user signups
+channels:
+  user/signedup:
+    subscribe:
+      message:
+        $ref: '#/components/messages/UserSignedUp'
+components:
+  messages:
+    UserSignedUp:
+      payload:
+        type: object
+        properties:
+          displayName:
+            type: string
+            description: Name of the user
+          email:
+            type: string
+            format: email
+            description: Email of the user
\ No newline at end of file
diff --git a/src/examples/streetlights-kafka.yml b/src/examples/streetlights-kafka.yml
new file mode 100644
index 000000000..8d502660c
--- /dev/null
+++ b/src/examples/streetlights-kafka.yml
@@ -0,0 +1,163 @@
+asyncapi: '2.2.0'
+info:
+  title: Streetlights asddasdas Kafka API
+  version: '1.0.0'
+  description: |
+    The Smartylighting Streetlights API allows you to remotely manage the city lights.
+
+    ### Check out its awesome features:
+
+    * Turn a specific streetlight on/off 🌃
+    * Dim a specific streetlight 😎
+    * Receive real-time information about environmental lighting conditions 📈
+  license:
+    name: Apache 2.0
+    url: https://www.apache.org/licenses/LICENSE-2.0
+
+servers:
+  test:
+    url: test.mykafkacluster.org:8092
+    protocol: kafka-secure
+    description: Test broker
+    security:
+      - saslScram: []
+
+defaultContentType: application/json
+
+channels:
+  smartylighting.streetlights.1.0.event.{streetlightId}.lighting.measured:
+    description: The topic on which measured values may be produced and consumed.
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    publish:
+      summary: Inform about environmental lighting conditions of a particular streetlight.
+      operationId: receiveLightMeasurement
+      traits:
+        - $ref: '#/components/operationTraits/kafka'
+      message:
+        $ref: '#/components/messages/lightMeasured'
+
+  smartylighting.streetlights.1.0.action.{streetlightId}.turn.on:
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    subscribe:
+      operationId: turnOn
+      traits:
+        - $ref: '#/components/operationTraits/kafka'
+      message:
+        $ref: '#/components/messages/turnOnOff'
+
+  smartylighting.streetlights.1.0.action.{streetlightId}.turn.off:
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    subscribe:
+      operationId: turnOff
+      traits:
+        - $ref: '#/components/operationTraits/kafka'
+      message:
+        $ref: '#/components/messages/turnOnOff'
+
+  smartylighting.streetlights.1.0.action.{streetlightId}.dim:
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    subscribe:
+      operationId: dimLight
+      traits:
+        - $ref: '#/components/operationTraits/kafka'
+      message:
+        $ref: '#/components/messages/dimLight'
+
+components:
+  messages:
+    lightMeasured:
+      name: lightMeasured
+      title: Light measured
+      summary: Inform about environmental lighting conditions of a particular streetlight.
+      contentType: application/json
+      traits:
+        - $ref: '#/components/messageTraits/commonHeaders'
+      payload:
+        $ref: "#/components/schemas/lightMeasuredPayload"
+    turnOnOff:
+      name: turnOnOff
+      title: Turn on/off
+      summary: Command a particular streetlight to turn the lights on or off.
+      traits:
+        - $ref: '#/components/messageTraits/commonHeaders'
+      payload:
+        $ref: "#/components/schemas/turnOnOffPayload"
+    dimLight:
+      name: dimLight
+      title: Dim light
+      summary: Command a particular streetlight to dim the lights.
+      traits:
+        - $ref: '#/components/messageTraits/commonHeaders'
+      payload:
+        $ref: "#/components/schemas/dimLightPayload"
+
+  schemas:
+    lightMeasuredPayload:
+      type: object
+      properties:
+        lumens:
+          type: integer
+          minimum: 0
+          description: Light intensity measured in lumens.
+        sentAt:
+          $ref: "#/components/schemas/sentAt"
+    turnOnOffPayload:
+      type: object
+      properties:
+        command:
+          type: string
+          enum:
+            - on
+            - off
+          description: Whether to turn on or off the light.
+        sentAt:
+          $ref: "#/components/schemas/sentAt"
+    dimLightPayload:
+      type: object
+      properties:
+        percentage:
+          type: integer
+          description: Percentage to which the light should be dimmed to.
+          minimum: 0
+          maximum: 100
+        sentAt:
+          $ref: "#/components/schemas/sentAt"
+    sentAt:
+      type: string
+      format: date-time
+      description: Date and time when the message was sent.
+
+  securitySchemes:
+    saslScram:
+      type: scramSha256
+      description: Provide your username and password for SASL/SCRAM authentication
+
+  parameters:
+    streetlightId:
+      description: The ID of the streetlight.
+      schema:
+        type: string
+
+  messageTraits:
+    commonHeaders:
+      headers:
+        type: object
+        properties:
+          my-app-header:
+            type: integer
+            minimum: 0
+            maximum: 100
+
+  operationTraits:
+    kafka:
+      bindings:
+        kafka:
+          clientId: my-app-id
\ No newline at end of file
diff --git a/src/examples/streetlights-mqtt.yml b/src/examples/streetlights-mqtt.yml
new file mode 100644
index 000000000..5a5ca013c
--- /dev/null
+++ b/src/examples/streetlights-mqtt.yml
@@ -0,0 +1,209 @@
+asyncapi: '2.2.0'
+info:
+  title: Streetlights MQTT API
+  version: '1.0.0'
+  description: |
+    The Smartylighting Streetlights API allows you to remotely manage the city lights.
+
+    ### Check out its awesome features:
+
+    * Turn a specific streetlight on/off 🌃
+    * Dim a specific streetlight 😎
+    * Receive real-time information about environmental lighting conditions 📈
+  license:
+    name: Apache 2.0
+    url: https://www.apache.org/licenses/LICENSE-2.0
+
+servers:
+  production:
+    url: test.mosquitto.org:{port}
+    protocol: mqtt
+    description: Test broker
+    variables:
+      port:
+        description: Secure connection (TLS) is available through port 8883.
+        default: '1883'
+        enum:
+          - '1883'
+          - '8883'
+    security:
+      - apiKey: []
+      - supportedOauthFlows:
+        - streetlights:on
+        - streetlights:off
+        - streetlights:dim
+      - openIdConnectWellKnown: []
+
+defaultContentType: application/json
+
+channels:
+  smartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured:
+    description: The topic on which measured values may be produced and consumed.
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    publish:
+      summary: Inform about environmental lighting conditions of a particular streetlight.
+      operationId: receiveLightMeasurement
+      traits:
+        - $ref: '#/components/operationTraits/mqtt'
+      message:
+        $ref: '#/components/messages/lightMeasured'
+
+  smartylighting/streetlights/1/0/action/{streetlightId}/turn/on:
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    subscribe:
+      operationId: turnOn
+      traits:
+        - $ref: '#/components/operationTraits/mqtt'
+      message:
+        $ref: '#/components/messages/turnOnOff'
+
+  smartylighting/streetlights/1/0/action/{streetlightId}/turn/off:
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    subscribe:
+      operationId: turnOff
+      traits:
+        - $ref: '#/components/operationTraits/mqtt'
+      message:
+        $ref: '#/components/messages/turnOnOff'
+
+  smartylighting/streetlights/1/0/action/{streetlightId}/dim:
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    subscribe:
+      operationId: dimLight
+      traits:
+        - $ref: '#/components/operationTraits/mqtt'
+      message:
+        $ref: '#/components/messages/dimLight'
+
+components:
+  messages:
+    lightMeasured:
+      name: lightMeasured
+      title: Light measured
+      summary: Inform about environmental lighting conditions of a particular streetlight.
+      contentType: application/json
+      traits:
+        - $ref: '#/components/messageTraits/commonHeaders'
+      payload:
+        $ref: "#/components/schemas/lightMeasuredPayload"
+    turnOnOff:
+      name: turnOnOff
+      title: Turn on/off
+      summary: Command a particular streetlight to turn the lights on or off.
+      traits:
+        - $ref: '#/components/messageTraits/commonHeaders'
+      payload:
+        $ref: "#/components/schemas/turnOnOffPayload"
+    dimLight:
+      name: dimLight
+      title: Dim light
+      summary: Command a particular streetlight to dim the lights.
+      traits:
+        - $ref: '#/components/messageTraits/commonHeaders'
+      payload:
+        $ref: "#/components/schemas/dimLightPayload"
+
+  schemas:
+    lightMeasuredPayload:
+      type: object
+      properties:
+        lumens:
+          type: integer
+          minimum: 0
+          description: Light intensity measured in lumens.
+        sentAt:
+          $ref: "#/components/schemas/sentAt"
+    turnOnOffPayload:
+      type: object
+      properties:
+        command:
+          type: string
+          enum:
+            - on
+            - off
+          description: Whether to turn on or off the light.
+        sentAt:
+          $ref: "#/components/schemas/sentAt"
+    dimLightPayload:
+      type: object
+      properties:
+        percentage:
+          type: integer
+          description: Percentage to which the light should be dimmed to.
+          minimum: 0
+          maximum: 100
+        sentAt:
+          $ref: "#/components/schemas/sentAt"
+    sentAt:
+      type: string
+      format: date-time
+      description: Date and time when the message was sent.
+
+  securitySchemes:
+    apiKey:
+      type: apiKey
+      in: user
+      description: Provide your API key as the user and leave the password empty.
+    supportedOauthFlows:
+      type: oauth2
+      description: Flows to support OAuth 2.0
+      flows:
+        implicit:
+          authorizationUrl: 'https://authserver.example/auth'
+          scopes:
+            'streetlights:on': Ability to switch lights on
+            'streetlights:off': Ability to switch lights off
+            'streetlights:dim': Ability to dim the lights
+        password:
+          tokenUrl: 'https://authserver.example/token'
+          scopes:
+            'streetlights:on': Ability to switch lights on
+            'streetlights:off': Ability to switch lights off
+            'streetlights:dim': Ability to dim the lights
+        clientCredentials:
+          tokenUrl: 'https://authserver.example/token'
+          scopes:
+            'streetlights:on': Ability to switch lights on
+            'streetlights:off': Ability to switch lights off
+            'streetlights:dim': Ability to dim the lights
+        authorizationCode:
+          authorizationUrl: 'https://authserver.example/auth'
+          tokenUrl: 'https://authserver.example/token'
+          refreshUrl: 'https://authserver.example/refresh'
+          scopes:
+            'streetlights:on': Ability to switch lights on
+            'streetlights:off': Ability to switch lights off
+            'streetlights:dim': Ability to dim the lights
+    openIdConnectWellKnown:
+      type: openIdConnect
+      openIdConnectUrl: 'https://authserver.example/.well-known'
+
+  parameters:
+    streetlightId:
+      description: The ID of the streetlight.
+      schema:
+        type: string
+
+  messageTraits:
+    commonHeaders:
+      headers:
+        type: object
+        properties:
+          my-app-header:
+            type: integer
+            minimum: 0
+            maximum: 100
+
+  operationTraits:
+    mqtt:
+      bindings:
+        mqtt:
+          qos: 1
\ No newline at end of file
diff --git a/src/examples/websocket-gemini.yml b/src/examples/websocket-gemini.yml
new file mode 100644
index 000000000..cb1c3702a
--- /dev/null
+++ b/src/examples/websocket-gemini.yml
@@ -0,0 +1,213 @@
+#
+#
+#
+# This example showcases usage of AsyncAPI for the purpose of describing a WebSocket API. It is based on a real public service maintained by company called Gemini that provides cryptocurency trading products. It uses AsyncAPI bindings.
+#
+# This AsyncAPI document describes their v1 of the API. The v2 is also available and changes in the way that it provides a multimessage channel, where you subscribe for messages by sending a subscription message instead of using query parameters. For example with multimessage channel check out this article https://www.asyncapi.com/blog/websocket-part2 about another real public API called Kraken
+#
+# All available learning materials about AsyncAPI and WebSocket are:
+# - WebSocket, Shrek, and AsyncAPI - An Opinionated Intro article: https://www.asyncapi.com/blog/websocket-part1
+# - Creating AsyncAPI for WebSocket API - Step by Step article: https://www.asyncapi.com/blog/websocket-part2
+# - From API-First to Code Generation - A WebSocket Use Case article: https://www.asyncapi.com/blog/websocket-part3
+# - Live stream about topics mentioned in part 1 and 2 articles: https://www.youtube.com/watch?v=8tFBcf31e_c
+#
+
+asyncapi: '2.2.0'
+
+#
+# Overal information for users of the application
+#
+info:
+  title: Gemini Market Data Websocket API
+  version: '1.0.0'
+  contact:
+    name: Gemini
+    url: https://www.gemini.com/
+  description: |
+    Market data is a public API that streams all the market data on a given symbol.
+    
+    You can quickly play with the API using [websocat](https://github.com/vi/websocat#installation) like this:
+    ```bash
+    websocat wss://api.gemini.com/v1/marketdata/btcusd?heartbeat=true -S
+    ```
+    
+#
+# Link to external docs
+#
+externalDocs:
+  url: https://docs.sandbox.gemini.com/websocket-api/#market-data
+    
+#
+# Details on how to connect to the application
+#
+servers:
+  public:
+    url: wss://api.gemini.com
+    protocol: wss
+
+#
+# Details about all the channels that you can listen to or send to messages
+#
+channels:
+  /v1/marketdata/{symbol}:
+    parameters:
+      symbol:
+        description: |
+          Symbols are formatted as CCY1CCY2 where prices are in CCY2 and quantities are in CCY1. To read more click [here](https://docs.sandbox.gemini.com/websocket-api/#symbols-and-minimums).
+        schema:
+          type: string
+          enum: ['btcusd', 'ethbtc', 'ethusd', 'zecusd', 'zecbtc', 'zeceth', 'zecbch', 'zecltc', 'bchusd', 'bchbtc', 'bcheth', 'ltcusd', 'ltcbtc', 'ltceth', 'ltcbch', 'batusd', 'daiusd', 'linkusd', 'oxtusd', 'batbtc', 'linkbtc', 'oxtbtc', 'bateth', 'linketh', 'oxteth', 'ampusd', 'compusd', 'paxgusd', 'mkrusd', 'zrxusd', 'kncusd', 'manausd', 'storjusd', 'snxusd', 'crvusd', 'balusd', 'uniusd', 'renusd', 'umausd', 'yfiusd', 'btcdai', 'ethdai', 'aaveusd', 'filusd', 'btceur', 'btcgbp', 'etheur', 'ethgbp', 'btcsgd', 'ethsgd', 'sklusd', 'grtusd', 'bntusd', '1inchusd', 'enjusd', 'lrcusd', 'sandusd', 'cubeusd', 'lptusd', 'bondusd', 'maticusd', 'injusd', 'sushiusd']
+    bindings:
+      ws:
+        bindingVersion: 0.1.0
+        query:
+          type: object
+          description: |
+            The semantics of entry type filtering is:
+
+            If any entry type is specified as true or false, all of them must be explicitly flagged true to show up in the response
+            If no entry types filtering parameters are included in the url, then all entry types will appear in the response
+
+            NOTE: top_of_book has no meaning and initial book events are empty when only trades is specified
+          properties:
+            heartbeat:
+              type: boolean
+              default: false
+              description: Optionally add this parameter and set to true to receive a heartbeat every 5 seconds
+            top_of_book:
+              type: boolean
+              default: false
+              description: If absent or false, receive full order book depth; if present and true, receive top of book only. Only applies to bids and offers.
+            bids:
+              type: boolean
+              default: true
+              description: Include bids in change events
+            offers:
+              type: boolean
+              default: true
+              description: Include asks in change events
+            trades:
+              type: boolean
+              default: true
+              description: Include trade events
+            auctions:
+              type: boolean
+              default: true
+              description: Include auction events
+    subscribe:
+      summary: Receive market updates on a given symbol
+      message:
+        $ref: '#/components/messages/marketData'
+
+#
+# All reusable parts for readability and staying DRY
+#
+components:
+  messages:
+    marketData:
+      summary: Message with marked data information.
+      description: |
+        The initial response message will show the existing state of the order book. Subsequent messages will show all executed trades, as well as all other changes to the order book from orders placed or canceled.
+      payload:
+        $ref: '#/components/schemas/market'
+      examples:
+        - name: updateMessage
+          summary: Example of an update message that contains a change in price information.
+          payload:
+            type: update
+            eventId: 36902233362
+            timestamp: 1619769673
+            timestampms: 1619769673527
+            socket_sequence: 661
+            events:
+              - type: change
+                side: bid
+                price: '54350.40'
+                remaining: '0.002'
+                delta: '0.002'
+                reason: place
+        - name: heartbeatMessage
+          summary: Example of additional heartbeat message when you enable them. 
+          payload:
+            type: heartbeat
+            socket_sequence: 1656
+  schemas:
+    market:
+      type: object
+      oneOf:
+        - $ref: '#/components/schemas/heartbeat'
+        - $ref: '#/components/schemas/update'
+    heartbeat:
+      allOf:
+        - properties:
+            type:
+              type: string
+              const: heartbeat
+          required:
+            - type
+        - $ref: '#/components/schemas/default'
+    update:
+      allOf:
+        - properties:
+            type:
+              type: string
+              const: update
+            eventId:
+              type: integer
+              description: A monotonically increasing sequence number indicating when this change occurred. These numbers are persistent and consistent between market data connections.
+            events:
+              $ref: '#/components/schemas/events'
+            timestamp:
+              type: string
+              format: date-time
+              description: The timestamp in seconds for this group of events (included for compatibility reasons). We recommend using the timestampms field instead.
+            timestampms:
+              type: string
+              format: time
+              description: The timestamp in milliseconds for this group of events.
+          required:
+            - type
+            - eventId
+            - events
+            - timestamp
+            - timestampms
+        - $ref: '#/components/schemas/default'
+    default:
+      type: object
+      description: This object is always part of the payload. In case of type=heartbeat, these are the only fields.
+      required:
+         - type
+         - socket_sequence
+      properties:
+        socket_sequence:
+          type: integer
+          description: zero-indexed monotonic increasing sequence number attached to each message sent - if there is a gap in this sequence, you have missed a message. If you choose to enable heartbeats, then heartbeat and update messages will share a single increasing sequence. See [Sequence Numbers](https://docs.sandbox.gemini.com/websocket-api/#sequence-numbers) for more information.
+    events:
+      type: array
+      description: Either a change to the order book, or the indication that a trade has occurred.
+      items:
+        type: object
+        additionalProperties: false
+        properties:
+          type:
+            type: string
+            enum: ['trade', 'change', 'auction, block_trade']
+          price:
+            type: number
+            multipleOf: 1.000
+            description: The price of this order book entry.
+          side:
+            type: string
+            enum: ['bid', 'side']
+          reason:
+            type: string
+            enum: ['place', 'trade', 'cancel', 'initial']
+            description: Indicates why the change has occurred. initial is for the initial response message, which will show the entire existing state of the order book.
+          remaining: 
+            type: number
+            multipleOf: 1.000
+            description: The quantity remaining at that price level after this change occurred. May be zero if all orders at this price level have been filled or canceled.
+          delta:
+            type: number
+            multipleOf: 1.000
+            description: The quantity changed. May be negative, if an order is filled or canceled. For initial messages, delta will equal remaining.
\ No newline at end of file
diff --git a/src/state/sidebar.ts b/src/state/sidebar.ts
index d8b49d0d3..d3a304034 100644
--- a/src/state/sidebar.ts
+++ b/src/state/sidebar.ts
@@ -2,6 +2,7 @@ import { createState, useState } from '@hookstate/core';
 export interface SidebarState {
   show: boolean;
   panels: {
+    newFile: boolean;
     navigation: boolean;
     editor: boolean;
     view: boolean;
@@ -11,6 +12,7 @@ export interface SidebarState {
 export const sidebarState = createState<SidebarState>({
   show: true,
   panels: {
+    newFile: false,
     navigation: true,
     editor: true,
     view: true,
diff --git a/src/studio.tsx b/src/studio.tsx
index f130583ba..b84e9c6c4 100644
--- a/src/studio.tsx
+++ b/src/studio.tsx
@@ -15,7 +15,7 @@ const AsyncAPIStudio: React.FunctionComponent<AsyncAPIStudioProps> = () => {
   if (NavigationService.isReadOnly(true)) {
     return (
       <div className="flex flex-row flex-1 overflow-hidden h-full w-full h-screen">
-        <Navigation className='w-72' />
+        <Navigation className="w-72" />
         <Template />
       </div>
     );