Jump to main content


Customising your app layout.

File Contents

In its purest form, a layout component is just a Svelte component which contains a single <slot> element. Below is the built-in layout component which is used if you don't insert your own one.


By decorating your layout component with other elements, you can have 'fixed sections' which are unchanged between page loads. Navigation bars, headers, footers; that sort of thing. While more advanced layouts are not currently supported, you can still use Svelte writables in order to have state which can be imported and affected by child components.

File Location

├── manage.py
├── dxsvelte.py
├── package.json
├── tsconfig.json
├── my_project_name
│   └── layout.svelte       <-- Create your layout component here
└── ...