Layouts
Novu allows the creation of layouts - a specific HTML design or structure to wrap content of email notifications. Layouts can be manipulated and assigned to new and existing templates within the Novu platform, allowing users to create, manage, and assign these layouts to templates, so they can be reused to structure the appearance of notifications sent through the platform.
By default, Novu will create a default layout and assign it as the organization's default layout. At any time, you can choose any of your layouts as the default for your organization. All new email templates will be assigned the default layout unless assigned a different one through the email editor.
Manage Layouts
You can find and manage your organization's layouts in Brand -> Layouts

Create and Edit Layouts
You can create new or edit existing layouts through the layout editor.
You can create any html code to structure your layout.
Set a layout as default for your organization. Notice there could only be one default layout at a time.
Manage layout variables - set default values or required variables.
Layout content must include {{{body}}}
, to indicate where the email editor content will be injected inside the layout.
Assign layout to template
To assign, choose a layout through the email editor.
You can preview your layout combined with your email content through the Preview
tab.

Using SDK
Novu SDK supports all layout functionalities:
Create a new layout
A new layout can be created with name, description, content, variables and an isDefault
flag. Here, content param is html content with custom variables.
const name: string = 'layout-name';
const description: string =
'The description of the layout that will help other users to understand the goal it was created'; // Optional.
const content: string = '<EMAIL_LAYOUT>';
const variables: ITemplateVariable[] = []; // Optional. Will handle the placeholder variables inserted in the email layout (content).
const isDefault: boolean = true; // Optional. All layouts are created as non default if not stated otherwise.
const { _id: layoutId } = await novu.layouts.create({
name,
description,
content,
variables,
isDefault,
});
interface ITemplateVariable {
type: TemplateVariableTypeEnum;
name: string;
required?: boolean;
defaultValue?: string | boolean;
}
enum TemplateVariableTypeEnum {
STRING = 'String',
ARRAY = 'Array',
BOOLEAN = 'Boolean',
}
Update existing layout
When updating a layout, all properties are optional and the SDK will only update the ones passed.
const layoutId: LayoutId = '<LAYOUT_ID>'; // The unique identifier of the layout.
const updatedLayout = await novu.layouts.update(layoutId, {
name,
description,
content,
variables,
isDefault,
});
Set default layout
When executing this, the existing default layout in the environment will be automatically set as non default and the chosen layout will be set as default. This action is non reversible.
const layoutId: LayoutId = '<LAYOUT_ID>'; // The unique identifier of the layout to be set as default.
await novu.layouts.setDefault(layoutId);
Delete an existing layout
Layouts can also be deleted. The condition to be able to delete a layout is that it is not a default layout and is not assigned to a notification template.
const layoutId: LayoutId = '<LAYOUT_ID>'; // The unique identifier of the layout to be deleted.
await novu.layouts.delete(layoutId);
Get a layout
Find a layout by layoutId
const layoutId: LayoutId = '<LAYOUT_ID>'; // The unique identifier of the layout to be found.
const layout = await novu.layouts.get(layoutId);
List all layouts
List paginated layouts
const page: number = 0; // Pagination value of the page for the results. First page will be page = 0.
const pageSize: number = 100; // Optional. Pagination value of the amount of layouts per page to return.
const sortBy: string = 'createdAt'; // Optional. Property to order the list of the layouts. So far only `createdAt` is supported.
const orderBy: OrderDirectionEnum = -1; // Optional. Direction of the sorting by the property chosen in `sortBy`. Ascendent order is represented by 1 and descendent order is represented by -1.
const layouts = await novu.layouts.list({
page,
pageSize,
sortBy,
orderBy,
});
Checkout API reference for layouts methods here