---
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,
}
```