View | NookDocs | NookDocs

Use <View> when the entire page differs by language or framework — not just one code block. Each view is one variant; a switcher appears above the content and shows one at a time.

Install the SDK with npm:

npm install @nookdocs/sdk

Then import it and pass your key.

Install the SDK with pip:

pip install nookdocs

Then import it and pass your key.

<View title="JavaScript" icon="js">
  Install the SDK with npm:

  ```bash
  npm install @nookdocs/sdk
  ```
</View>

<View title="Python" icon="python">
  Install the SDK with pip:

  ```bash
  pip install nookdocs
  ```
</View>

Props

titlestringrequired

Label for this variant. It's what the switcher shows, and what the reader's choice is remembered under.

iconstring

Icon beside the label — any name your icon library resolves.

iconTypestring

Font Awesome style, when the icon comes from that library: regular, solid, light, thin, sharp-solid, duotone, brands.

Which component do I want?

The three look similar and solve different problems:

Component	Scope	Use it when
`<CodeGroup>`	one block	the same snippet in several languages
`<Tabs>`	one block	a procedure whose steps differ
`<View>`	whole page	prose, code and steps all differ

Reach for <View> last. A page with one differing code sample wants a code group; splitting it into two full views duplicates every paragraph around it and doubles what you have to keep in sync.

The reader's choice persists across pages. Someone who picks Python here keeps getting Python wherever a page offers it; pages that don't offer it fall back to their own first view rather than rendering empty.

Audience — conditional content per visitor segment (different thing, despite the similar shape)
Code groups — per-language code samples inside one block
Tabs — switchable content inside one block

Props

Which component do I want?

Related