pyscript
diff --git a/‎docs/tutorials/getting-started.md
Lines changed: 37 additions & 7 deletions b/‎docs/tutorials/getting-started.md
Lines changed: 37 additions & 7 deletions
diff --git a/‎pyscriptjs/src/components/pyrepl.ts
Lines changed: 21 additions & 0 deletions b/‎pyscriptjs/src/components/pyrepl.ts
Lines changed: 21 additions & 0 deletions
@@ -211,14 +211,44 @@ fig
 
 The `<py-repl>` tag creates a REPL component that is rendered to the page as a code editor, allowing you to write executable code inline.
 
-## Visual components
+## The py-config tag
 
-The following tags control visual attributes of your HTML page.
+Use the `<py-config>` tag to set and configure general metadata about your PyScript application in YAML format. If you are unfamiliar with YAML, consider reading [Red Hat's YAML for beginners](https://www.redhat.com/sysadmin/yaml-beginners) guide for more information.
+
+The `<py-config>` tag can be used as follows:
+
+```
+<py-config>
+  - autoclose_loader: false
+  - runtimes:
+    -
+      src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
+      name: pyodide-0.20
+      lang: python
+</py-config>
+```
+
+The following optional values are supported by `<py-config>`:
+
+  * autoclose_loader (boolean): If false, PyScript will not close the loading splash screen when the startup operations finish.
+  * name (string): Name of the user application. This field can be any string and is to be used by the application author for their own customization purposes.
+  * version (string): Version of the user application. This field can be any string and is to be used by the application author for their own customization purposes. It is not related to the PyScript version.
+  * runtimes (List of Runtimes): List of runtime configurations. Each Runtime expects the following fields:
+    * src (string, Required): URL to the runtime source.
+    * name (string): Name of the runtime. This field can be any string and is to be used by the application author for their own customization purposes.
+    * name (string): Programming language supported by the runtime. This field can by used by the application author to provide clarify. It currently has no implications on how PyScript behaves.
+
+## Visual component tags
+
+The following tags can be used to add visual attributes to your HTML page.
 
 | Tag             | Description |
 | ---             | ----------- |
-| `<py-inputbox>` | TBD         |
-| `<py-box>`      | TBD         |
-| `<py-button>`   | TBD         |
-| `<py-list>`     | TBD         |
-| `<py-title>`    | TBD         |
+| `<py-inputbox>` | Adds an input box that can be used to prompt users to enter input values. |
+| `<py-box>`      | Creates a container object that can be used to host one or more visual components that define how elements of `<py-box>` should align and show on the page. |
+| `<py-button>`   | Adds a button to which authors can add labels and event handlers for actions on the button, such as `on_focus` or `on_click`. |
+| `<py-title>`    | Adds a static text title component that styles the text inside the tag as a page title. |
+
+```{note}
+All the elements above are experimental and not implemented at their full functionality. Use them with the understanding that the APIs or full support might change or be removed until the visual components are more mature.
+```
@@ -94,14 +94,35 @@ export class PyRepl extends BaseEvalElement {
         const mainDiv = document.createElement('div');
         addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mt-2', 'mx-8', 'relative']);
 
+        // Styles that we use to hide the labels whilst also keeping it accessible for screen readers
+        const labelStyle = 'overflow:hidden; display:block; width:1px; height:1px';
+
+        // Code editor Label
+        this.editorNode.id = 'code-editor';
+        const editorLabel = document.createElement('label');
+        editorLabel.innerHTML = 'Python Script Area';
+        editorLabel.setAttribute('style', labelStyle);
+        editorLabel.htmlFor = 'code-editor';
+
+        mainDiv.append(editorLabel);
+
         // add Editor to main PyScript div
         mainDiv.appendChild(this.editorNode);
 
         // Play Button
         this.btnRun = document.createElement('button');
+        this.btnRun.id = 'btnRun';
         this.btnRun.innerHTML =
             '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
         addClasses(this.btnRun, ['absolute', 'right-1', 'bottom-1', 'opacity-0', 'group-hover:opacity-100']);
+
+        // Play Button Label
+        const btnLabel = document.createElement('label');
+        btnLabel.innerHTML = 'Python Script Run Button';
+        btnLabel.setAttribute('style', labelStyle);
+        btnLabel.htmlFor = 'btnRun';
+
+        this.editorNode.appendChild(btnLabel);
         this.editorNode.appendChild(this.btnRun);
 
         this.btnRun.addEventListener('click', () => {