# Quick Start

### Creating an Organization

If you are accessing the MSquared dashboard and your account is not tied to any [organizations](https://docs.msquared.io/dash/organizations), the home screen will look like this:

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/S7ipdHp1gsotw6cZ4xWY/Capture-2024-07-23-171302.png" alt=""><figcaption></figcaption></figure>

When you click **Create Organization**, a modal window will pop up, and you can enter an [organization](https://docs.msquared.io/dash/organizations) name.

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/5nkqoAvCoT6VpTenzB6J/Capture-2024-07-23-172030.png" alt=""><figcaption></figcaption></figure>

Click on **Create**, and congratulations; you have created your first [organization](https://docs.msquared.io/dash/organizations)! To learn more, visit our [Organization section](https://docs.msquared.io/dash/organizations). You will be redirected to your organization's projects page.&#x20;

### Creating a Project

[Projects](https://docs.msquared.io/dash/organizations/projects) are necessary to create [Worlds](https://docs.msquared.io/dash/web-worlds) and [Objects](https://docs.msquared.io/dash/mml-objects) and are tied to [organizations](https://docs.msquared.io/dash/organizations); select the organization you created earlier from the dropdown to proceed.&#x20;

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/VtS4f0OILPjQ4LtAWiNC/Capture-2024-07-24-082858.png" alt=""><figcaption></figcaption></figure>

You will find yourself in your project dashboard. Here, you will find the different [**MS**](https://dash.mserve.io/)[**quared**](https://dash.mserve.io/) products you can use for your project. Click **Worlds** to create your first [world](https://docs.msquared.io/dash/web-worlds).

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/smz3QwWWxFVhX4enroRL/Capture-2024-07-24-083126.png" alt=""><figcaption></figcaption></figure>

### Creating a World

If this is your first time here, the page will be empty. Click **Create World** and enter the name you want to give your world. Don't worry too much about it; you can change it later.

You will be redirected to the world configuration page. Here, you can change several settings for your experience, from authentication to some graphics settings. You will find more information about all the different options in [Edit World](https://docs.msquared.io/dash/web-worlds/web-worlds/edit-web-world).

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/xryViniNClxKBZ56UPia/Capture-2024-07-24-083457.png" alt=""><figcaption></figcaption></figure>

Click the **Go to World** button, and a new window with your newly created world will appear. Here, you can move through your world using your keyboard. You will find more information on the controls on the [Moving your character in the 3D World](https://docs.msquared.io/dash/web-worlds/moving-your-character-in-the-web-world) page. You can share the link with your friends, and they will be able to join you.

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/4ufM6eTUR2vcTrvPZURq/Capture-2024-07-24-120058.png" alt=""><figcaption></figcaption></figure>

### Creating an MML Object

Let's go back to the platform and create a basic [**MML Object**.](https://docs.msquared.io/dash/mml-objects) To do so, click on [**MML Objects Instances**](https://docs.msquared.io/dash/mml-objects/mml-object-instances) on the menu to the left, then click **Create Instance.** A modal will appear. Enter your object's name and click on **Create**.

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/59eacjhIm5vexOzVwgrJ/Capture-2024-07-24-084629.png" alt=""><figcaption></figcaption></figure>

You will be redirected to your newly created object page. Here, you can change several parameters. The one we're interested in is **Source**. You can add your MML code there. Copy and paste the code below into the web editor and click **Save**.

```xml
<m-cube width="3" depth="3" height="3" y="4" color="blue"></m-cube>
```

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/O00Taj8Gj1kcOtGg3lDv/Capture-2024-07-24-093513.png" alt=""><figcaption></figcaption></figure>

### Add an MML Object to your World

In your Object's page, please make sure the **Enabled** field is toggled and copy the URL below it. The button to the right will automatically copy it to your clipboard.

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/QcqPLEole269ywIFKnSE/Screenshot%202024-07-24%20at%2009.05.19.png" alt=""><figcaption></figcaption></figure>

Let's return to your world configuration. To do so, click Web World Instances in the menu on the left, then click your world's name.

On the configuration page, click **MML Configuration** from the menu on the left, and finally, **Add Document**; paste your MML URL in the **URL** input box and save.

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/VS8mbDamfbe0fMuHK2Pi/Capture-2024-07-24-091146.png" alt=""><figcaption></figcaption></figure>

Click **Go to World**, and you should now see the MML object you just adde&#x64;**,** a flying blue cube. You can go back to the MML object instance and edit the cube. Let's make it interactive with the code below:

```html
<m-cube id="clickable-cube" width="3" depth="3" height="3" y="4" color="blue"></m-cube>

<script>
  const cube = document.getElementById("clickable-cube")
  const colors = ["green", "black", "pink", "blue", "yellow", "red"]

  cube.addEventListener("click", () => {
    const randomColor = Math.floor(Math.random() * colors.length);
    cube.setAttribute("color", colors[randomColor])
  })
</script>
```

Now, you or anyone else can click on the cube, which will change color in real time for all the users who have joined the world.

<figure><img src="https://content.gitbook.com/content/VBQO2iPnILMdx3kAONnG/blobs/UXznlrAximQawyKr1GQS/Capture-2024-07-24-120619.png" alt=""><figcaption></figcaption></figure>

Have fun experimenting!
