# Create your own layout

{% hint style="danger" %}
We generally do not recommend this approach. If your app really needs layouts that can freely change during runtime, then ignore this warning. Otherwise we recommend just hardcoding the layout into separate pages.
{% endhint %}

Layout is a list of components that are displayed from top to bottom.

Define which components are part of your layout.

Set your layout with our drag\&drop solution, which can be found in *⚙️ -> Developer settings -> Create custom layouts*.

<figure><img src="/files/2QKVa3ziBzqRCPAvvR6q" alt=""><figcaption><p>PlutoLayout drag&#x26;drop</p></figcaption></figure>

You can drag a component to the bottom of the screen to the red area to remove it from to layout. Click on the plus button to add a new component to your layout.

Each time you make the change, you can go back to the home screen of your app to check how your new layout looks like. It updates right away. :)

{% hint style="warning" %}
Please be patient. At the time of writing, the code for drag and dropping is not optimised and each time you make a change, it will reload the newly created layout. This will slowdown your device for a few seconds until it loads all data from all chains to all components.

Since this is aimed at developers only, we do not want to waste time fixing this unimportant optimisation bug. Just be patient :)
{% endhint %}

## Export

Once you are happy with your newly created layout, you can export it. Just click on the Export button on the top right corner.

<figure><img src="/files/V87zgexeZoxTdQ2r8qZU" alt=""><figcaption><p>PlutoLayout export</p></figcaption></figure>

You can export both the QR code, or just copy the PlutoLayout link to your clipboard.

## Register default layout

You certainly want to register your newly created and exported PlutoLayout as your default layout for your app.

Just go to `PlutoFramework/Model/CustomLayoutModel.cs` and replace the value of `DEFAULT_PLUTO_LAYOUT` constant:

```csharp
public class CustomLayoutModel
{
    public const string DEFAULT_PLUTO_LAYOUT = "<put your layout here>";
    
    // ...
```

## Registering multiple layouts

Registering multiple layouts is certainly possible. PlutoFramework is capable to hot-swap these layouts at runtime, which can be very powerful.

One example of such hot-swapping can be found *⚙️ -> Predefined layouts*.

Feel free to create a similar page like this with your own layouts and offer them to your users.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://plutolabs.gitbook.io/plutoframework/make-your-application/create-your-own-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.