<commit_before>---
title: How to use create your page layouts in Phenomic
incomplete: true
---

Phenomic uses React components as layouts.

By default, Phenomic might need 2 layouts:

- `Page`
- `PageError`

If you use the `phenomic/lib/PageContainer`, you will need those components in
your `layouts` definition (by default, declared in `layouts/index.js`).

To use your custom layout, add the `layout` option to the `YAML` frontmatter of
your Markdown file like so:

```yaml
title: Hello World
layout: MyCustomLayoutComponent
```

## Default page layouts that Phenomic can use

### `Page`

`Page` will be used as the default layout.
**It is required for Phenomic to work by default.**

[Check out the default `Page` and the `props` it has.](https://github.com/MoOx/phenomic/blob/master/boilerplate/web_modules/layouts/Page/index.js)

### `PageError`

`PageError` will be used as the default layout when a page has an error
(**eg: http 404 not found**).

_This layout is optional_ and a `PageContainer` contains a minimal fallback if
it is not available.<commit_msg>Docs: fix Layouts path reference<commit_after>---
title: How to use create your page layouts in Phenomic
incomplete: true
---

Phenomic uses React components as layouts.

By default, Phenomic might need 2 layouts:

- `Page`
- `PageError`

If you use the `phenomic/lib/PageContainer`, you will need those components in
your `layouts` definition (by default, declared in `app/routes.js`).

To use your custom layout, add the `layout` option to the `YAML` frontmatter of
your Markdown file like so:

```yaml
title: Hello World
layout: MyCustomLayoutComponent
```

## Default page layouts that Phenomic can use

### `Page`

`Page` will be used as the default layout.
**It is required for Phenomic to work by default.**

[Check out the default `Page` and the `props` it has.](https://github.com/MoOx/phenomic/blob/master/boilerplate/web_modules/layouts/Page/index.js)

### `PageError`

`PageError` will be used as the default layout when a page has an error
(**eg: http 404 not found**).

_This layout is optional_ and a `PageContainer` contains a minimal fallback if
it is not available.
{'fraction_non_alphanumeric': 0.09813953488372093, 'fraction_numerical': 0.0037209302325581397, 'mean_word_length': 4.473282442748092, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2250873', 'n_tokens_mistral': 674, 'n_tokens_neox': 628, 'n_words': 289}