diff --git a/components/GettingStarted.tsx b/components/GettingStarted.tsx
new file mode 100644
index 000000000..a17382121
--- /dev/null
+++ b/components/GettingStarted.tsx
@@ -0,0 +1,258 @@
+import React, { useState, useEffect } from 'react';
+import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import Highlight from 'react-syntax-highlighter';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+
+async function fetchData() {
+  const response = await fetch('/data/getting-started-examples.json');
+  const data = await response.json();
+
+  const defaultSchemaData = data.find((data: any) => data.default === true);
+
+  const schemaResp = await fetch(defaultSchemaData.file);
+  const schemaData = await schemaResp.json();
+
+  const defaultInstanceData = defaultSchemaData.instances.find(
+    (instance: any) => instance.default === true,
+  );
+
+  const instanceResp = await fetch(defaultInstanceData.file);
+  const instanceData = await instanceResp.json();
+
+  return {
+    data,
+    schemaData,
+    instanceData,
+    initialInstance: defaultSchemaData.instances,
+    initialDetails: [defaultInstanceData.details, defaultInstanceData.valid],
+  };
+}
+
+interface SchemaOption {
+  file: string;
+  instances: InstanceOption[];
+}
+
+interface InstanceOption {
+  file: string;
+  details: string;
+  valid: string;
+}
+
+const GettingStarted = () => {
+  useEffect(() => {
+    fetchData()
+      .then(
+        ({
+          data,
+          schemaData,
+          instanceData,
+          initialInstance,
+          initialDetails,
+        }) => {
+          setOptions(data);
+          setFetchedSchema(schemaData);
+          setFetchedInstance(instanceData);
+          setInstances(initialInstance);
+          setDetails(initialDetails);
+        },
+      )
+      .catch((e) => console.log('Error: ', e));
+  }, []);
+
+  const [options, setOptions] = useState<SchemaOption[]>([]);
+  const [instances, setInstances] = useState<InstanceOption[]>([]);
+  const [details, setDetails] = useState<string[]>(['', '']);
+  const [fetchedSchema, setFetchedSchema] = useState();
+  const [fetchedInstance, setFetchedInstance] = useState();
+
+  const handleSchemaChange = async (
+    e: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    const selectedSchema = options.find(
+      (schema) => schema.file === e.target.value,
+    );
+
+    if (selectedSchema) {
+      const schemaResponse = await fetch(e.target.value);
+      const schData = await schemaResponse.json();
+
+      setFetchedSchema(schData);
+      setInstances(selectedSchema.instances);
+
+      const instResp = await fetch(selectedSchema.instances[0].file);
+      const instData = await instResp.json();
+      setFetchedInstance(instData);
+    } else {
+      setInstances([]);
+      setFetchedSchema(null!);
+    }
+  };
+
+  const handleInstanceChange = async (
+    e: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    const selectedInstance = instances.find(
+      (instance) => instance.file === e.target.value,
+    ) as InstanceOption;
+
+    if (selectedInstance) {
+      const instanceResponse = await fetch(e.target.value);
+      const instanceData = await instanceResponse.json();
+
+      setFetchedInstance(instanceData);
+      setDetails([selectedInstance.details, selectedInstance.valid]);
+    } else {
+      setFetchedInstance(undefined);
+    }
+  };
+
+  const createZip = async () => {
+    try {
+      const zip = new JSZip();
+      zip.file('schema.json', JSON.stringify(fetchedSchema, null, 2));
+      zip.file('instance.json', JSON.stringify(fetchedInstance, null, 2));
+
+      zip.generateAsync({ type: 'blob' }).then((content) => {
+        saveAs(content, 'getting-started-examples.zip');
+      });
+    } catch (e) {
+      console.log('Error zipping files', e);
+    }
+  };
+
+  return (
+    <>
+      <div className='relative'>
+        <div className='flex flex-col'>
+          <div className='flex items-end flex-row justify-between mt-5 mb-3 '>
+            <h2 className='text-h6 font-semibold mb-1'>JSON Schema</h2>
+            <div className='select-wrap'>
+              <label className='mr-2 max-sm:text-[12px]'>
+                Select a Schema:
+              </label>
+              <select
+                name='Select a JSON Schema Validator'
+                className='p-2 border dark:border-slate-300 border-slate-800 dark:bg-slate-900 rounded-md max-sm:text-[12px] plausible-event-name==activation-explore-tools'
+                id='Examples'
+                onChange={handleSchemaChange}
+              >
+                {options.map((option: any, id: number) => (
+                  <option key={id} value={option.file}>
+                    {option.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div className='overflow-x-auto flex-basis-0 max-w-full min-w-0 shrink lg:max-w-[800px] xl:max-w-[900px]'>
+            <Highlight
+              wrapLines={true}
+              wrapLongLines={true}
+              customStyle={{
+                borderRadius: 10,
+                paddingTop: 15,
+                paddingBottom: 10,
+                paddingLeft: 10,
+                marginBottom: 20,
+                maxWidth: '100%',
+              }}
+              lineNumberStyle={{
+                marginRight: 10,
+              }}
+              style={atomOneDark}
+              showLineNumbers
+              startingLineNumber={1}
+              lineProps={() => {
+                const isHighlighted = false;
+                return {
+                  className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`,
+                };
+              }}
+              codeTagProps={{
+                className: 'mr-8',
+              }}
+            >
+              {JSON.stringify(fetchedSchema, null, 2)}
+            </Highlight>
+          </div>
+        </div>
+
+        <div className='flex flex-col'>
+          <div className='flex items-end flex-row justify-between mt-5 mb-3 '>
+            <h2 className='text-h6 font-semibold mb-1'>JSON Instance</h2>
+            <div className='select-wrap'>
+              <label className='mr-2 max-sm:text-[12px]'>
+                Select an Instance:
+              </label>
+              <select
+                name='Select a JSON Schema Validator'
+                className='p-2 border dark:border-slate-300 border-slate-800 dark:bg-slate-900 rounded-md max-sm:text-[12px] plausible-event-name==activation-explore-tools'
+                id='Examples'
+                onChange={handleInstanceChange}
+              >
+                {instances.map((instance: any, id: number) => (
+                  <option key={id} value={instance.file}>
+                    {instance.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+          <div className='overflow-x-auto flex-basis-0 max-w-full min-w-0 shrink lg:max-w-[800px] xl:max-w-[900px]'>
+            <Highlight
+              wrapLines={true}
+              wrapLongLines={true}
+              customStyle={{
+                borderRadius: 10,
+                paddingTop: 15,
+                paddingBottom: 10,
+                paddingLeft: 10,
+                marginBottom: 20,
+                maxWidth: '100%',
+              }}
+              lineNumberStyle={{
+                marginRight: 10,
+              }}
+              style={atomOneDark}
+              showLineNumbers
+              startingLineNumber={1}
+              lineProps={() => {
+                const isHighlighted = false;
+                return {
+                  className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`,
+                };
+              }}
+              codeTagProps={{
+                className: 'mr-8',
+              }}
+            >
+              {JSON.stringify(fetchedInstance, null, 2)}
+            </Highlight>
+          </div>
+          <h2 className='text-h6 font-semibold'>Validation Result</h2>
+          <div className='flex bg-[#282c34] justify-between items-center text-white font-medium flex-row border p-5 rounded-xl'>
+            <p>{details[0]}</p>
+
+            {details[1] ? (
+              <img src='/icons/green-tick.svg' alt='green tick' />
+            ) : (
+              <img src='/icons/red-cross.svg' alt='red cross' />
+            )}
+          </div>
+        </div>
+
+        <button
+          className='absolute right-0 my-4 text-[17px] bg-startBlue text-white px-3 py-1 rounded'
+          onClick={createZip}
+        >
+          Download
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default GettingStarted;
diff --git a/package.json b/package.json
index 25a9de30c..371a344a7 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,10 @@
     "axios": "1.7.2",
     "classnames": "^2.3.1",
     "feed": "^4.2.2",
+    "file-saver": "^2.0.5",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
+    "jszip": "^3.10.1",
     "markdown-to-jsx": "^7.4.7",
     "moment": "2.29.4",
     "next": "14.2.5",
@@ -47,6 +49,7 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.1",
+    "@types/file-saver": "^2.0.7",
     "@types/js-yaml": "^4.0.5",
     "@types/node": "^20.0.0",
     "@types/react": "18.3.3",
diff --git a/pages/learn/getting-started-step-by-step.md b/pages/learn/getting-started-step-by-step/getting-started-step-by-step.md
similarity index 90%
rename from pages/learn/getting-started-step-by-step.md
rename to pages/learn/getting-started-step-by-step/getting-started-step-by-step.md
index 31e2cdfde..30731701e 100644
--- a/pages/learn/getting-started-step-by-step.md
+++ b/pages/learn/getting-started-step-by-step/getting-started-step-by-step.md
@@ -3,9 +3,11 @@ title: Creating your first schema
 section: docs
 ---
 
-JSON Schema is a vocabulary that you can use to annotate and validate JSON documents. This tutorial guides you through the process of creating a JSON Schema document.
+JSON Schema is a vocabulary that you can use to annotate and validate JSON documents. This tutorial guides you through the process of creating a JSON Schema.
 
-After you create the JSON Schema document, you can validate the example data against your schema using a validator in a language of your choice. See <userevent type='plausible-event-name=activation-explore-tools'>[Tools](https://json-schema.org/implementations)</userevent> for a current list of supported validators.
+After creating your JSON Schema, you can then validate example data against your schema by using a validator in a language of your choice. Please, visit <userevent type='plausible-event-name=activation-explore-tools'>[Tools](https://json-schema.org/implementations#validators)</userevent> and select the validator that better suit your needs.
+
+If you already know how to create JSON Schemas and you are looking for different JSON Schema use cases like schema generation, code generation, documentation, UI generation or JSON Schema processing or conversion, please visit <userevent type='plausible-event-name=activation-explore-tools'>[Tools](https://json-schema.org/implementations)</userevent> and explore the amazing tooling available in the JSON Schema Ecosystem.
 
 <tableofcontent depth={2} />
 
@@ -573,28 +575,11 @@ With the external schema reference, the overall schema looks like this:
 
 ## Validate JSON data against the schema
 
-This section describes how to validate JSON data against the product catalog schema.
+Now that you have your JSON Schema is time to validate [JSON data](https://json-schema.org/learn/glossary#instance) against it using a <userevent type='plausible-event-name=activation-explore-tools'>[JSON Schema Validator](https://json-schema.org/implementations#validators)</userevent>. 
 
-This example JSON data matches the product catalog schema:
+A Validator is a tool that implements the JSON Schema specification. All validators works in a similar way: they take a JSON Schema and a JSON Instance as input and they returns the validation result as output.
 
-```json
-{
-  "productId": 1,
-  "productName": "An ice sculpture",
-  "price": 12.50,
-  "tags": [ "cold", "ice" ],
-  "dimensions": {
-    "length": 7.0,
-    "width": 12.0,
-    "height": 9.5
-  },
-  "warehouseLocation": {
-    "latitude": -78.75,
-    "longitude": 20.4
-  }
-}
-```
+![How JSON Schema works](https://json-schema.org/img/json_schema.svg)
 
-To validate this JSON data against the product catalog JSON Schema, you can use any validator of your choice. In addition to command-line and browser tools, validation tools are available in a wide range of languages, including Java, Python, .NET, and many others. To find a validator that’s right for your project, see <userevent type='plausible-event-name=activation-explore-tools'>[Tools](https://json-schema.org/implementations)</userevent>.
+To try it yourself, please visit <userevent type='plausible-event-name=activation-explore-tools'>[Tools](https://json-schema.org/implementations#validators)</userevent> and select the validator that better suit your needs, our use the editors available below to explore the different Schemas and Instances and see the different validation results. 
 
-Use the example JSON data as the input data and the product catalog JSON Schema as the schema. Your validation tool compares the data against the schema, and if the data meets all the requirements defined in the schema, validation is successful.
diff --git a/pages/learn/getting-started-step-by-step/index.page.tsx b/pages/learn/getting-started-step-by-step/index.page.tsx
new file mode 100644
index 000000000..b1b8b7eb2
--- /dev/null
+++ b/pages/learn/getting-started-step-by-step/index.page.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import fs from 'fs';
+
+import { getLayout } from '~/components/Sidebar';
+import Head from 'next/head';
+import { Headline1 } from '~/components/Headlines';
+import matter from 'gray-matter';
+import StyledMarkdown from '~/components/StyledMarkdown';
+import { SectionContext } from '~/context';
+import { DocsHelp } from '~/components/DocsHelp';
+import GettingStarted from '~/components/GettingStarted';
+
+export async function getStaticProps() {
+  const block1 = fs.readFileSync(
+    'pages/learn/getting-started-step-by-step/getting-started-step-by-step.md',
+    'utf-8',
+  );
+  const block2 = fs.readFileSync(
+    'pages/learn/getting-started-step-by-step/next-steps.md',
+    'utf-8',
+  );
+  const { content: block1Content } = matter(block1);
+  const { content: block2Content } = matter(block2);
+  return {
+    props: {
+      blocks: [block1Content, block2Content],
+    },
+  };
+}
+
+export default function StyledValidator({ blocks }: { blocks: any[] }) {
+  const newTitle = 'Creating your first schema';
+
+  return (
+    <SectionContext.Provider value='docs'>
+      <Head>
+        <title>{newTitle}</title>
+      </Head>
+      <Headline1>{newTitle}</Headline1>
+      <StyledMarkdown markdown={blocks[0]} />
+      <GettingStarted />
+      <StyledMarkdown markdown={blocks[1]} />
+      <DocsHelp />
+    </SectionContext.Provider>
+  );
+}
+StyledValidator.getLayout = getLayout;
diff --git a/pages/learn/getting-started-step-by-step/next-steps.md b/pages/learn/getting-started-step-by-step/next-steps.md
new file mode 100644
index 000000000..a986de19d
--- /dev/null
+++ b/pages/learn/getting-started-step-by-step/next-steps.md
@@ -0,0 +1,12 @@
+---
+title: Getting Started Next Steps
+section: docs
+---
+
+## What Next?
+
+Now that you know how to create a JSON Schema and use it to validate JSON data, we'd invite you to continue your JSON Schema journey:
+* Learn more about JSON Schema by visiting the [reference documentation](../understanding-json-schema).
+* Explore the details of the current version of the Spec [2020-12](https://json-schema.org/specification).
+
+If you already know how to create JSON Schemas and you are looking for different JSON Schema use cases like schema generation, code generation, documentation, UI generation or JSON Schema processing or conversion, please visit <userevent type='plausible-event-name=activation-explore-tools'>[Tools](https://json-schema.org/implementations)</userevent> and explore the amazing tooling available in the JSON Schema Ecosystem.
\ No newline at end of file
diff --git a/public/data/getting-started-examples.json b/public/data/getting-started-examples.json
new file mode 100644
index 000000000..b723ab71d
--- /dev/null
+++ b/public/data/getting-started-examples.json
@@ -0,0 +1,84 @@
+[
+  {
+    "name": "Getting started basic schema",
+    "default": true,
+    "file": "/data/getting-started-examples/schemas/default.json",
+    "instances": [
+      {
+        "name": "Valid instance",
+        "default": true,
+        "valid": true,
+        "file": "/data/getting-started-examples/instances/default-ok.json",
+        "details": "This is a valid JSON instance for the provided JSON Schema"
+      },
+      {
+        "name": "Invalid instance",
+        "default": false,
+        "valid": false,
+        "file": "/data/getting-started-examples/instances/default-ko.json",
+        "details": "Invalid: The value of 'price' property must be a number"
+      }
+    ]
+  },
+
+  {
+    "name": "Getting started extended schema",
+    "default": false,
+    "file": "/data/getting-started-examples/schemas/default-extended.json",
+    "instances": [
+      {
+        "name": "Valid instance",
+        "default": true,
+        "valid": true,
+        "file": "/data/getting-started-examples/instances/default-extended-ok.json",
+        "details": "This is a valid JSON instance for the provided JSON Schema"
+      }
+    ]
+  },
+
+  {
+    "name": "Enumerated values schema",
+    "default": false,
+    "file": "/data/getting-started-examples/schemas/enumerated.json",
+    "instances": [
+      {
+        "name": "Valid instance",
+        "default": true,
+        "valid": true,
+        "file": "/data/getting-started-examples/instances/enumerated-ok.json",
+        "details": "This is a valid JSON instance for the provided JSON Schema"
+      }
+    ]
+  },
+
+  {
+    "name": "Regular expression schema",
+    "default": false,
+    "file": "/data/getting-started-examples/schemas/regex.json",
+    "instances": [
+      {
+        "name": "Valid instance",
+        "default": true,
+        "valid": true,
+        "file": "/data/getting-started-examples/instances/regex-ok.json",
+        "details": "This is a valid JSON instance for the provided JSON Schema"
+      }
+    ]
+  },
+
+  {
+    "name": "Conditional validation with if-else schema",
+    "default": false,
+    "file": "/data/getting-started-examples/schemas/conditional.json",
+    "instances": [
+      {
+        "name": "Valid instance",
+        "default": true,
+        "valid": true,
+        "file": "/data/getting-started-examples/instances/conditional-ok.json",
+        "details": "This is a valid JSON instance for the provided JSON Schema"
+      }
+    ]
+  }
+
+]
diff --git a/public/data/getting-started-examples/instances/conditional-ok.json b/public/data/getting-started-examples/instances/conditional-ok.json
new file mode 100644
index 000000000..95e0d986b
--- /dev/null
+++ b/public/data/getting-started-examples/instances/conditional-ok.json
@@ -0,0 +1,4 @@
+{
+    "isMember": true,
+    "membershipNumber": "1234567890"
+  }
\ No newline at end of file
diff --git a/public/data/getting-started-examples/instances/default-extended-ok.json b/public/data/getting-started-examples/instances/default-extended-ok.json
new file mode 100644
index 000000000..adab3fa26
--- /dev/null
+++ b/public/data/getting-started-examples/instances/default-extended-ok.json
@@ -0,0 +1,15 @@
+{
+  "productId": 1,
+  "productName": "An ice sculpture",
+  "price": 12.5,
+  "tags": ["cold", "ice"],
+  "dimensions": {
+    "length": 7.0,
+    "width": 12.0,
+    "height": 9.5
+  },
+  "warehouseLocation": {
+    "latitude": -78.75,
+    "longitude": 20.4
+  }
+}
diff --git a/public/data/getting-started-examples/instances/default-ko.json b/public/data/getting-started-examples/instances/default-ko.json
new file mode 100644
index 000000000..4c04215da
--- /dev/null
+++ b/public/data/getting-started-examples/instances/default-ko.json
@@ -0,0 +1,5 @@
+{
+  "productId": 1,
+  "product": "An ice sculpture",
+  "price": "100"
+}
diff --git a/public/data/getting-started-examples/instances/default-ok.json b/public/data/getting-started-examples/instances/default-ok.json
new file mode 100644
index 000000000..f9aabe01c
--- /dev/null
+++ b/public/data/getting-started-examples/instances/default-ok.json
@@ -0,0 +1,6 @@
+{
+  "productId": 1,
+  "productName": "An ice sculpture",
+  "price": 12.5,
+  "tags": ["cold", "ice"]
+}
diff --git a/public/data/getting-started-examples/instances/enumerated-ok.json b/public/data/getting-started-examples/instances/enumerated-ok.json
new file mode 100644
index 000000000..4ad5e5aed
--- /dev/null
+++ b/public/data/getting-started-examples/instances/enumerated-ok.json
@@ -0,0 +1,3 @@
+{
+  "data": [1, 2, 3]
+}
\ No newline at end of file
diff --git a/public/data/getting-started-examples/instances/regex-ok.json b/public/data/getting-started-examples/instances/regex-ok.json
new file mode 100644
index 000000000..6255bcc09
--- /dev/null
+++ b/public/data/getting-started-examples/instances/regex-ok.json
@@ -0,0 +1,3 @@
+{
+  "code": "ABC-123"
+}
\ No newline at end of file
diff --git a/public/data/getting-started-examples/schemas/conditional.json b/public/data/getting-started-examples/schemas/conditional.json
new file mode 100644
index 000000000..10c924c4f
--- /dev/null
+++ b/public/data/getting-started-examples/schemas/conditional.json
@@ -0,0 +1,39 @@
+{
+    "$id": "https://example.com/conditional-validation-if-else.schema.json",
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "title": "Conditional Validation with If-Else",
+    "type": "object",
+    "properties": {
+      "isMember": {
+        "type": "boolean"
+      },
+      "membershipNumber": {
+        "type": "string"
+      }
+    },
+    "required": ["isMember"],
+    "if": {
+      "properties": {
+        "isMember": {
+          "const": true
+        }
+      }
+    },
+    "then": {
+      "properties": {
+        "membershipNumber": {
+          "type": "string",
+          "minLength": 10,
+          "maxLength": 10
+        }
+      }
+    },
+    "else": {
+      "properties": {
+        "membershipNumber": {
+          "type": "string",
+          "minLength": 15
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/public/data/getting-started-examples/schemas/default-extended.json b/public/data/getting-started-examples/schemas/default-extended.json
new file mode 100644
index 000000000..8ff9cc558
--- /dev/null
+++ b/public/data/getting-started-examples/schemas/default-extended.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://example.com/product.schema.json",
+  "title": "Product",
+  "description": "A product from Acme's catalog",
+  "type": "object",
+  "properties": {
+    "productId": {
+      "description": "The unique identifier for a product",
+      "type": "integer"
+    },
+    "productName": {
+      "description": "Name of the product",
+      "type": "string"
+    },
+    "price": {
+      "description": "The price of the product",
+      "type": "number",
+      "exclusiveMinimum": 0
+    },
+    "tags": {
+      "description": "Tags for the product",
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "minItems": 1,
+      "uniqueItems": true
+    },
+    "dimensions": {
+      "type": "object",
+      "properties": {
+        "length": {
+          "type": "number"
+        },
+        "width": {
+          "type": "number"
+        },
+        "height": {
+          "type": "number"
+        }
+      },
+      "required": ["length", "width", "height"]
+    },
+    "warehouseLocation": {
+      "description": "Coordinates of the warehouse where the product is located.",
+      "$ref": "https://example.com/geographical-location.schema.json"
+    }
+  },
+  "required": ["productId", "productName", "price"]
+}
\ No newline at end of file
diff --git a/public/data/getting-started-examples/schemas/default.json b/public/data/getting-started-examples/schemas/default.json
new file mode 100644
index 000000000..c783e1b70
--- /dev/null
+++ b/public/data/getting-started-examples/schemas/default.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://example.com/product.schema.json",
+  "title": "Product",
+  "description": "A product from Acme's catalog",
+  "type": "object",
+  "properties": {
+    "productId": {
+      "description": "The unique identifier for a product",
+      "type": "integer"
+    },
+    "productName": {
+      "description": "Name of the product",
+      "type": "string"
+    },
+    "price": {
+      "description": "The price of the product",
+      "type": "number",
+      "exclusiveMinimum": 0
+    },
+    "tags": {
+      "description": "Tags for the product",
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "minItems": 1,
+      "uniqueItems": true
+    }
+  },
+  "required": ["productId", "productName", "price"]
+}
diff --git a/public/data/getting-started-examples/schemas/enumerated.json b/public/data/getting-started-examples/schemas/enumerated.json
new file mode 100644
index 000000000..c7e9e1588
--- /dev/null
+++ b/public/data/getting-started-examples/schemas/enumerated.json
@@ -0,0 +1,11 @@
+{
+  "$id": "https://example.com/enumerated-values.schema.json",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Enumerated Values",
+  "type": "object",
+  "properties": {
+    "data": {
+      "enum": [42, true, "hello", null, [1, 2, 3]]
+    }
+  }
+}
\ No newline at end of file
diff --git a/public/data/getting-started-examples/schemas/regex.json b/public/data/getting-started-examples/schemas/regex.json
new file mode 100644
index 000000000..7d23a0d87
--- /dev/null
+++ b/public/data/getting-started-examples/schemas/regex.json
@@ -0,0 +1,12 @@
+{
+  "$id": "https://example.com/regex-pattern.schema.json",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Regular Expression Pattern",
+  "type": "object",
+    "properties": {
+      "code": {
+      "type": "string",
+      "pattern": "^[A-Z]{3}-\\d{3}$"
+    }
+  }
+}
\ No newline at end of file
diff --git a/public/icons/green-tick.svg b/public/icons/green-tick.svg
new file mode 100644
index 000000000..0301794bb
--- /dev/null
+++ b/public/icons/green-tick.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="30px" height="30px"><path fill="#c8e6c9" d="M36,42H12c-3.314,0-6-2.686-6-6V12c0-3.314,2.686-6,6-6h24c3.314,0,6,2.686,6,6v24C42,39.314,39.314,42,36,42z"/><path fill="#4caf50" d="M34.585 14.586L21.014 28.172 15.413 22.584 12.587 25.416 21.019 33.828 37.415 17.414z"/></svg>
\ No newline at end of file
diff --git a/public/icons/red-cross.svg b/public/icons/red-cross.svg
new file mode 100644
index 000000000..758f9b0c0
--- /dev/null
+++ b/public/icons/red-cross.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="30px" height="30px" viewBox="0 0 48.000000 48.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)"
+fill="#f74848"  stroke="none">
+<path d="M80 400 c-18 -18 -20 -33 -20 -160 0 -127 2 -142 20 -160 18 -18 33
+-20 160 -20 187 0 180 -7 180 180 0 187 7 180 -180 180 -127 0 -142 -2 -160
+-20z m127 -92 l33 -32 35 34 c33 32 36 33 52 17 16 -16 15 -19 -17 -52 l-34
+-35 34 -35 c30 -31 32 -37 19 -50 -13 -14 -19 -11 -49 20 l-34 35 -38 -37
+c-36 -35 -39 -36 -55 -20 -16 16 -15 19 20 55 l37 38 -35 34 c-26 26 -32 37
+-24 47 16 18 19 17 56 -19z"/>
+</g>
+</svg>
diff --git a/yarn.lock b/yarn.lock
index 234ba681a..955fc0994 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -381,6 +381,11 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
+"@types/file-saver@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.7.tgz#8dbb2f24bdc7486c54aa854eb414940bbd056f7d"
+  integrity sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==
+
 "@types/hast@^2.0.0":
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.8.tgz#4ac5caf38b262b7bd5ca3202dda71f0271635660"
@@ -1088,6 +1093,11 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
 cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -1806,6 +1816,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -2142,6 +2157,11 @@ ignore@^5.1.1, ignore@^5.2.0, ignore@^5.2.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
   integrity sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
 immer@^10.0.3:
   version "10.0.3"
   resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.3.tgz#a8de42065e964aa3edf6afc282dfc7f7f34ae3c9"
@@ -2168,7 +2188,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2:
+inherits@2, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -2451,6 +2471,11 @@ isarray@^2.0.5:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
   integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
 
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -2533,6 +2558,16 @@ json5@^1.0.2:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
+jszip@^3.10.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
+  integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    setimmediate "^1.0.5"
+
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
@@ -2565,6 +2600,13 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
 lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
@@ -2895,6 +2937,11 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
+pako@~1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -3052,6 +3099,11 @@ prismjs@~1.27.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
   integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
 
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
 prop-types@^15.5.7, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -3128,6 +3180,19 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
+readable-stream@~2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -3246,16 +3311,6 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-safe-array-concat@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c"
-  integrity sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.2.1"
-    has-symbols "^1.0.3"
-    isarray "^2.0.5"
-
 safe-array-concat@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
@@ -3266,6 +3321,11 @@ safe-array-concat@^1.1.2:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
 safe-regex-test@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
@@ -3323,16 +3383,6 @@ semver@^7.0.0, semver@^7.5.3, semver@^7.5.4:
   dependencies:
     lru-cache "^6.0.0"
 
-set-function-length@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
-  integrity sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==
-  dependencies:
-    define-data-property "^1.1.1"
-    get-intrinsic "^1.2.1"
-    gopd "^1.0.1"
-    has-property-descriptors "^1.0.0"
-
 set-function-length@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -3350,9 +3400,27 @@ set-function-name@^2.0.0, set-function-name@^2.0.1:
   resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
   integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==
   dependencies:
-    define-data-property "^1.0.1"
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
     functions-have-names "^1.2.3"
-    has-property-descriptors "^1.0.0"
+    has-property-descriptors "^1.0.2"
+
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
 
 set-function-name@^2.0.2:
   version "2.0.2"
@@ -3544,14 +3612,21 @@ string.prototype.trimend@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-string.prototype.trimstart@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz#d4cdb44b83a4737ffbac2d406e405d43d0184298"
-  integrity sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
 
 string.prototype.trimstart@^1.0.8:
   version "1.0.8"
@@ -3872,7 +3947,7 @@ use-sync-external-store@1.2.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
-util-deprecate@^1.0.2:
+util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==