# 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="https://1720293510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7cPs2j0GvSzYIyVs3t35%2Fuploads%2F3xwoXn9yxmgJfd0xQQAb%2Fimage.png?alt=media&#x26;token=6282ab04-0e47-4bf4-a116-dd3bbaba5f35" 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="https://1720293510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7cPs2j0GvSzYIyVs3t35%2Fuploads%2FsQ4dMkJVOOjBZyM6ZeuA%2Fimage.png?alt=media&#x26;token=cbc8a2bc-4696-4a67-b31a-d925539b8764" 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.
