---
title: Hiding parts
---
The `hide` option of a part's configuration controls how to hide it and/or its dependencies.
:::tip
A hidden part will not be included in the output when it's rendered
:::
:::tip
The `hide` configuration from parts that you include in your design will always override configuration from inherited parts.
:::
## Settings
### hide.after
To hide the explicitly included `after` parts, set `hide.after` to a truthy value
```js
import exampleBase from './base.mjs'
const part = {
name: 'example.front',
after: [exampleBase],
// hide `exampleBase`
hide: { after: true },
draft: ({ part }) => part,
}
```
### hide.always
To hide a specific part that would otherwise not be hidden by other configuration, add its name to the `hide.always` array
```js
import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'
const part = {
name: 'example.front',
after: [exampleBase, exampleBack],
// hide `exampleBack`
hide: { always: ['example.back'] },
draft: ({ part }) => part,
}
```
### hide.from
To hide the explicitly included `from` part, set `hide.from` to a truthy value.
```js
import exampleBase from './base.mjs'
const part = {
name: 'other.base',
from: exampleBase,
// hide exampleBase
hide: { from: true },
draft: ({ part }) => part,
}
```
### hide.inherited
To hide parts that you have not explicitly included in this part that may be
pulled in by the explicitly included `from` and `after` parts, set
`hide.inherited` to a truthy value.
:::note
This setting will hide any part included as `from` or `after` by your
explicitly included `from` part or its dependency chain. It will also hide any
part included as `from` by your explicitly included `after` part or its
dependency chain. It will not hide the `after` parts of `after` parts
:::
```js
// the "after" chain
const mainFrontParent = {
name: 'other.mainFront',
draft: ({part}) => part
}
const mainFrontBase = {
name: 'example.mainFrontBase',
draft: ({part}) => part
}
const mainFront = {
name: 'example.mainFront',
after: mainFrontBase,
from: mainFrontParent,
draft: ({part}) => part
}
// the "from" chain
const grandParentBase = {
name: 'other.grandParentBase',
draft: ({part}) => part
}
const grandParent = {
name: 'other.grandParent',
after: grandParentBase
draft: ({ part }) => part
}
const parent = {
name: 'other.parent',
from: grandParent
draft: ({ part }) => part
}
const mainBack = {
name: 'example.mainBack',
from: parent,
after: mainFront,
// hide grandParentBase, grandParent, mainFrontParent
// don't hide parent, mainFront, or mainFrontBase
hide: { inherited: true },
draft: ({part}) => part
}
```
:::tip
<details>
<summary>Need more clarity?</summary>
In the above example, the dependency tree for the part `example.mainBack` resolves to the following, with `from` dependencies in **bold** and `after` dependencies _italicized_.
| Part | Dependency Type | Hidden |
| :---------------------------- | :-------------- | :----- |
| example.mainBack | root | false |
| - **other.parent** | from | false |
| - - **other.grandParent** | inherited from | true |
| - - - _other.grandParentBase_ | inherited after | true |
| - _example.mainFront_ | after | false |
| - - _example.mainFrontBase_ | after | false |
| - - **other.mainFront** | inherited from | true |
Dependencies are considered inherited if they have two or more dashes (-) next to them, and are either **bold** themselves, or underneath a **bold** part.
</details>
:::
### hide.never
To **not** hide a specific part that would otherwise be hidden by other configuration, add its name to the `hide.never` array
```js
import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'
const part = {
name: 'example.front',
after: [exampleBase, exampleBack],
hide: {
// hide exampleBase and exampleBack
after: true,
// override hiding exampleBack so that it is shown
never: ['example.back'],
},
draft: ({ part }) => part,
}
```
### hide.self
To hide the current part, set `hide.self` to a truthy value:
```js
const part = {
name: 'example.front',
// hide `example.front`
hide: { self: true },
draft: ({ part }) => part,
}
```
## Presets
We provide two presets for common hiding configurations. For convenience, you
can pass a preset to the `hide` configuration as a string like `hide: <preset
name>`, or you can use `import { hidePresets } from '@freesewing.core` and pass
`hide: hidePresets.<preset name>`
:::tip
If you don't like to remember strings and you're working in development a
environment that has code completion, importing the presets from
`@freesewing/core` will help you be sure you're definitely using an available
preset
:::
### HIDE_ALL
For a shortcut to setting all `boolean` hiding options ([`after`](#hideafter),
[`from`](#hidefrom), [`inherited`](#hideinherited), and [`self`](#hideself)) to
true, use `HIDE_ALL`
:::note
This is equivalent to using
```js
{
self: true,
after: true,
from: true,
inherited: true
}
```
:::
To use it as an imported preset:
```js
import { hidePresets } from '@freesewing/core'
import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'
const part = {
name: 'example.front',
from: exampleBase
after: [exampleBack],
// hide `example.front`, `exmpleBase`, and `exampleBack`
// as well as any inherited parts
hide: hidePresets.HIDE_ALL,
draft: ({ part }) => part
}
```
To use it as a string
```js
import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'
const part = {
name: 'example.front',
from: exampleBase,
after: [exampleBack],
// hide `example.front`, `exmpleBase`, and `exampleBack`
// as well as any inherited parts
hide: 'HIDE_ALL',
draft: ({ part }) => part,
}
```
### HIDE_TREE
For a shortcut to setting [`from: true`](#hidefrom) and [`inherited: true`](#hideinherited), use `HIDE_TREE`
:::note
This is equivalent to using
```js
{
from: true,
inherited: true
}
```
:::
:::note RELATED
See [`hide.inherited`](#hideinherited) for a full explanation of how that option works
:::
To use it as an imported preset:
```js
import { hidePresets } from '@freesewing/core'
import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'
const part = {
name: 'example.front',
from: exampleBase,
// hide `exmpleBase`, and all inherited parts
hide: hidePresets.HIDE_TREE,
draft: ({ part }) => part,
}
```
To use it as a string
```js
import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'
const part = {
name: 'example.front',
from: exampleBase,
// hide `exmpleBase`, and all inherited parts
hide: 'HIDE_TREE',
draft: ({ part }) => part,
}
```
