Component Library

Links: internal link and external link(opens in a new tab).

Steps Component

The Steps component provides a visually appealing way to present sequential instructions or processes.

First Step
This is the first step in the process.
- npm
- pnpm
- yarn
Terminal window
npm i @nutrient-sdk/viewer
Terminal window
pnpm add @nutrient-sdk/viewer
Terminal window
yarn add @nutrient-sdk/viewer
Second Step
After completing the first step, proceed to the second step.
```
// Example code for the second step
const secondStep = () => {
  console.log('Executing second step');
};
```
Final Step
Complete the process with the final step.
```
// Example code for the final step
const finalStep = () => {
  console.log('Process complete!');
};
```

Usage in Markdoc

To use the Steps component in your Markdoc files, use the following syntax:

[STEPS-TAG-OPEN]
1. First step
2. Second step
3. Third step
[STEPS-TAG-CLOSE]

Replace [STEPS-TAG-OPEN] with {% steps %} and [STEPS-TAG-CLOSE] with {% /steps %} in your actual code.

Note the following important formatting requirements:

Each step must start with a number followed by a period and space
Content under each step should be properly indented
Leave blank lines between steps and their content
You can use any number for each step (e.g., all "1." or sequential "1., 2., 3.")
The component will automatically handle the numbering

Advanced Example

[STEPS-TAG-OPEN]

1. **Add a title to your step**

   This is the description for the first step.

   ```js
   // You can include code blocks
   const firstStep = () => {
     console.log('Executing first step');
   };
   ```

1. **Add images or other components**

   You can include other components inside steps.

   [PACKAGEMANAGERS-TAG pkg="package-name" /]

1. **Format your content**

   Use **bold**, *italic*, or other Markdown formatting.

[STEPS-TAG-CLOSE]

Replace [STEPS-TAG-OPEN] with {% steps %}, [STEPS-TAG-CLOSE] with {% /steps %}, and [PACKAGEMANAGERS-TAG pkg="package-name" /] with {% packagemanagers pkg="package-name" /%} in your actual code.

Usage in Astro Components

In Astro components, you can use the Steps component directly:

<Steps>
  <ol>
    <li>
      <strong>First Step</strong>
      <p>Description of the first step.</p>
    </li>
    <li>
      <strong>Second Step</strong>
      <p>Description of the second step.</p>
    </li>
    <li>
      <strong>Final Step</strong>
      <p>Description of the final step.</p>
    </li>
  </ol>
</Steps>

Tabs Component

The Tabs component allows you to organize content into multiple tabbed sections, making it easier for users to navigate between related information.

This is the content for Tab 1.

You can include any Markdown content here, including:

Lists
Bold text
Italic text
Code blocks

This is the content for Tab 2.

// You can include code blocks in tabs
const tabExample = () => {
  console.log('This is Tab 2');
};

This is the content for Tab 3.

You can also include other components inside tabs.

npm i @nutrient-sdk/viewer

pnpm add @nutrient-sdk/viewer

yarn add @nutrient-sdk/viewer

JSON
JAVASCRIPT

// Form option.
formOption = {
  "label": "name",
  "value": "John Appleseed"
};

// Form option.
declare type FormOption = {
  label: string,
  value: string,
};

Usage in Markdoc

To use the Tabs component in your Markdoc files, use the following syntax:

[TABS-TAG-OPEN]
[TABITEM-TAG label="Tab 1"]
Content for Tab 1
[TABITEM-TAG-CLOSE]

[TABITEM-TAG label="Tab 2"]
Content for Tab 2
[TABITEM-TAG-CLOSE]

[TABITEM-TAG label="Tab 3" icon="icon-name"]
Content for Tab 3
[TABITEM-TAG-CLOSE]
[TABS-TAG-CLOSE]

Replace the placeholders with the actual Markdoc tags:

[TABS-TAG-OPEN] → {% tabs %}
[TABS-TAG-CLOSE] → {% /tabs %}
[TABITEM-TAG label="Tab 1"] → {% tabitem label="Tab 1" %}
[TABITEM-TAG-CLOSE] → {% /tabitem %}

Attributes

The Tabs component supports the following attributes:

syncKey (optional): A unique identifier to synchronize tab selection across multiple tab groups

The TabItem component supports the following attributes:

label (required): The text displayed in the tab
icon (optional): An icon to display alongside the label

Usage in Astro Components

In Astro components, you can use the Tabs component directly:

<Tabs>
  <TabItem label="Tab 1">
    <p>Content for Tab 1</p>
  </TabItem>
  <TabItem label="Tab 2">
    <p>Content for Tab 2</p>
  </TabItem>
  <TabItem label="Tab 3" icon="icon-name">
    <p>Content for Tab 3</p>
  </TabItem>
</Tabs>

SwitcherTabs Component

The Switcher tabs component allows you to organize content into tabbed sections similar to tabs, but each tab points to a separate URL. This is useful for creating a tabbed navigation system where each tab corresponds to a different page or section.

The tab representing the current page is automatically highlighted.

NOTE: Switcher tabs turn into a dropdown on smaller screens.

Tab 1 Tab 2 Tab 3

This is the content for Overview Tab.

You can include any Markdown content here, including:

Lists
Bold text
Italic text
Code blocks

Usage in Markdoc

To use the Tabs component in your Markdoc files, use the following syntax:

[SWITCHER-TABS-TAG-OPEN]
[SWITCHER-TABITEM-TAG label="Tab 1" url="/guides/sample-components/tab1" SWITCHER-TABITEM-TAG-CLOSE]
[SWITCHER-TABITEM-TAG label="Tab 2" url="/guides/sample-components/tab2" SWITCHER-TABITEM-TAG-CLOSE]
[SWITCHER-TABITEM-TAG label="Tab 3" url="/guides/sample-components/tab3" SWITCHER-TABITEM-TAG-CLOSE]
[SWITCHER-TABS-TAG-CLOSE]

Replace the placeholders with the actual Markdoc tags:

[TABS-TAG-OPEN] → {% switcherTabs %}
[TABS-TAG-CLOSE] → {% /switcherTabs %}
[TABITEM-TAG label="Tab 1"] → {% switcherTabItem label="Tab 1" %}
[TABITEM-TAG-CLOSE] → {% /switcherTabItem %}

Attributes

The SwitcherTabItem component supports the following attributes:

label (required): The text displayed in the tab
url (required): The URL to navigate to when the tab is clicked

Usage in Astro Components

In Astro components, you can use the SwitcherTabs component directly:

<SwitcherTabs>
  <SwitcherTabItem label="Tab 1" url="/guides/sample-components/tab1" />
  <SwitcherTabItem label="Tab 2" url="/guides/sample-components/tab2" />
  <SwitcherTabItem label="Tab 3" url="/guides/sample-components/tab3" />
</SwitcherTabs>

PackageManagers Component

The PackageManagers component displays installation or command instructions for multiple package managers (npm, yarn, pnpm).

npm i @nutrient-sdk/viewer

pnpm add @nutrient-sdk/viewer

yarn add @nutrient-sdk/viewer

npm i -D @nutrient-sdk/viewer

pnpm add -D @nutrient-sdk/viewer

yarn add -D @nutrient-sdk/viewer

npm i vite

pnpm add vite

yarn add vite

bun add vite

npm run dev

pnpm run dev

yarn run dev

bun run dev

Usage in Markdoc

To use the PackageManagers component in your Markdoc files, use the following syntax:

[PACKAGEMANAGERS-TAG pkg="package-name" /]

Replace [PACKAGEMANAGERS-TAG pkg="package-name" /] with {% packagemanagers pkg="package-name" /%} in your actual code.

Attributes

The PackageManagers component supports the following attributes:

pkg (optional): The name of the package to install
extrapkg (optional): Comma-separated list of additional package managers to display (e.g., "bun" or "bun,deno")
args (optional): Additional arguments to pass to the command
dev (optional, boolean): Whether to install as a dev dependency
type (optional): The type of command to run. Possible values:
- install (default): Install a package
- run: Run a script
- remove: Remove a package
- create: Create a new project
- exec: Execute a command
- dlx: Run a package without installing it
comment (optional): A comment to display alongside the command
title (optional): A title for the command block
icons (optional, boolean): Whether to display package manager icons (default: true)
prefix (optional): A prefix to add to the command

Usage in Astro Components

In Astro components, you can use the PackageManagers component directly:

<PackageManagers pkg="@nutrient-sdk/viewer" />
<PackageManagers pkg="@nutrient-sdk/viewer" dev={true} />
<PackageManagers type="run" args="dev" />

CodeBlock Component

The CodeBlock component provides syntax-highlighted code blocks with additional features like line highlighting, titles, and more.

1
// This line is marked
2
const example = () => {
3
  // This line is also marked
4
  console.log('Hello, world!');
5
  // This line is inserted
6
  return true;
7
  // This line is deleted
8
};

Code Block with Collapsible Sections


5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// This part of the code will be visible by default
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // You can have multiple collapsed sections
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // This will remain visible
17
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// All this code until the end of the block will be collapsed again
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'End of example boilerplate code' })

import NutrientViewer from "@nutrient-sdk/viewer";

const customTheme = {
    elevation: {
      low: "0 0 4px 0 rgba(0, 0, 0, 0.4)",
      medium: "0 4px 16px 0 rgba(0, 0, 0, 0.15)",
    },
    opacity: {
      none: "0",
      low: "0.1",
      medium: "0.5",
      high: "0.9",
    },
324 collapsed lines
    rounded: {
      xs: "2px",
      sm: "4px",
      md: "8px",
      lg: "12px",
      xl: "16px",
      "2xl": "24px",
      full: "9999px",
    },
    spacing: {
      xs: "2px",
      sm: "4px",
      md: "8px",
      lg: "12px",
      xl: "16px",
      "2xl": "24px",
      "3xl": "32px",
      "4xl": "40px",
      "5xl": "48px",
      "6xl": "64px",
      "7xl": "80px",
      "8xl": "96px",
      "9xl": "160px",
    },
    color: {
      support: {
        error: {
          subtler: "#711b00",
          subtle: "#b53007",
          medium: "#fe7a68",
          strong: "#ffd4ce",
        },
        success: {
          subtler: "#223a03",
          subtle: "#3C6612",
          medium: "#80CC34",
          strong: "#ecfeda",
        },
        warning: {
          subtler: "#562800",
          subtle: "#bd5a00",
          medium: "#eb7f00",
          strong: "#ffd4a1",
        },
        info: {
          subtler: "#190d94",
          subtle: "#4537de",
          medium: "#777cf0",
          strong: "#d3dcff",
        },
      },
      focused: {
        default: "#FB6F3B",
        inset: "#5B1C0F",
      },
      background: {
        primary: {
          subtle: "#5B1C0F",
          medium: "#431207",
          strong: "#180501",
        },
        interactive: {
          enabled: "#FB6F3B",
          hovered: "#FEB609",
          active: "#FFC938",
          visited: "#FFC938",
          disabled: "rgb(84.7% 28.6% 16.1% / 0.5)",
        },
        inverse: {
          subtle: "#E95635",
          medium: "#FFC938",
          strong: "#FFE7A9",
        },
        secondary: {
          subtle: "#762B1A",
          medium: "#A93920",
          strong: "#D84929",
        },
        overlay: {
          subtle: "rgb(100% 90.6% 66.3% / 0.25)",
          medium: "rgb(9.41% 1.96% 0.39% / 0.5)",
          interactive: "rgb(98.4% 43.5% 23.1% / 0.25)",
        },
        positive: {
          subtle: "#FFC938",
          medium: "#FEDE89",
          strong: "#FFE7A9",
          interactive: {
            enabled: "#5B1C0F",
          },
        },
      },
      text: {
        primary: "#FFE7A9",
        secondary: "#FEB609",
        helper: "#FB6F3B",
        placeholder: "#FB6F3B",
        inverse: "#5B1C0F",
        oninteractive: "#5B1C0F",
        interactive: {
          enabled: "#FB6F3B",
          hovered: "#FEB609",
          active: "#FFC938",
          visited: "#FFC938",
          disabled: "rgb(100% 90.6% 66.3% / 0.5)",
        },
      },
      icon: {
        primary: "#FFE7A9",
        secondary: "#FB6F3B",
        inverse: "#5B1C0F",
        oninteractive: "#5B1C0F",
        interactive: {
          enabled: "#FB6F3B",
          hovered: "#FEB609",
          active: "#FFC938",
          visited: "#FFC938",
          disabled: "rgb(100% 90.6% 66.3% / 0.5)",
        },
      },
      border: {
        subtle: "#762B1A",
        medium: "#A93920",
        strong: "#D84929",
        inverse: "#FFE7A9",
        interactive: {
          enabled: "#FB6F3B",
          hovered: "#FEB609",
          active: "#FFC938",
          visited: "#FFC938",
          disabled: "#D84929",
        },
        positive: {
          interactive: {
            enabled: "#5B1C0F",
          },
          subtle: "#FFC938",
          medium: "#FEB609",
          strong: "#FB6F3B",
        },
      },
    },
    typography: {
      heading: {
        h6: {
          regular: {
            font: '400 0.875rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          medium: {
            font: '500 0.875rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          semibold: {
            font: '600 0.875rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
        },
        h5: {
          regular: {
            font: '400 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          medium: {
            font: '500 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          semibold: {
            font: '600 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
        },
        h4: {
          regular: {
            font: '400 1.375rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
          medium: {
            font: '500 1.375rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
          semibold: {
            font: '600 1.375rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
        },
        h3: {
          regular: {
            font: '400 1.5rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
          medium: {
            font: '500 1.5rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
          semibold: {
            font: '600 1.5rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
        },
        h2: {
          regular: {
            font: '400 1.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
          medium: {
            font: '500 1.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
          semibold: {
            font: '600 1.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
        },
        h1: {
          regular: {
            font: '400 2rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
          medium: {
            font: '500 2rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
          semibold: {
            font: '600 2rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0",
          },
        },
      },
      label: {
        sm: {
          regular: {
            font: '400 0.688rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.05px",
          },
          medium: {
            font: '500 0.688rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.05px",
          },
          semibold: {
            font: '600 0.688rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.05px",
          },
        },
        md: {
          regular: {
            font: '400 0.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          medium: {
            font: '500 0.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          semibold: {
            font: '600 0.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
        },
        lg: {
          regular: {
            font: '400 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          medium: {
            font: '500 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          semibold: {
            font: '600 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
        },
      },
      body: {
        sm: {
          regular: {
            font: '400 0.75rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.05px",
          },
          medium: {
            font: '500 0.75rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.05px",
          },
          semibold: {
            font: '600 0.75rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.05px",
          },
        },
        md: {
          regular: {
            font: '400 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          medium: {
            font: '500 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          semibold: {
            font: '600 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
        },
        lg: {
          regular: {
            font: '400 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          medium: {
            font: '500 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
          semibold: {
            font: '600 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
            letterSpacing: "0.1px",
          },
        },
      },
    },
  }

NutrientViewer.load({
  theme: customTheme,
  document: "YOUR_DOCUMENT_URL",
});

Usage in Markdoc

To create a code block with additional features, wrap the attributes in {% %}:

```js [OPEN]% title="example.js" frame="terminal" mark=[1,3] ins=[5] del=[7] %[CLOSE]
// Your code here
```

Replace [OPEN] with { and [CLOSE] with } in your actual code.

Available Attributes

The Code Block component supports these attributes:

lang: The language for syntax highlighting (e.g., "js", "python", "bash")
title: Add a title to the code block
frame: Choose display style ("terminal", "browser", "code", "none")
meta: Additional meta information
locale: The locale for the code block
wrap: Whether to wrap long lines (boolean)
preserveIndent: Whether to preserve indentation (boolean)
showLineNumbers: Whether to show line numbers (boolean)
startLineNumber: Start counting from a specific number
mark: Line numbers to highlight (array)
ins: Line numbers to mark as inserted (array)
del: Line numbers to mark as deleted (array)
collapse: Line ranges to make collapsible (e.g., "{1-5, 12-14, 21-24}")
collapseStyle: Where the summary line is located (e.g., "github", "collapsible-start")

Usage in Astro Components

In Astro components, you can use the CodeBlock component directly:

<CodeBlock
  language="js"
  title="example.js"
  frame="terminal"
  mark={[1, 3]}
  ins={[5]}
  del={[7]}
  showLineNumbers
  startLineNumber={1}
  collapse="{1-5,15-25}"
>
{`// Your code here
const example = () => {
  // This line is also marked
  console.log('Hello, world!');
  // This line is inserted
  return true;
  // This line is deleted
};`}
</CodeBlock>

Github Code Component

The Github Code component displays code snippets from GitHub repositories. It is very similar to the CodeBlock component but is specifically designed for displaying code from GitHub.

[GITHUB-CODE-TAG
   lang="vb"
   samplePath="app/src/main/java/com/pspdfkit/catalog/examples/java/DynamicMultimediaAnnotationExample.java"
   showLineNumbers=true /%]

Usage in Markdoc

To create a code block with additional features, wrap the attributes in {% %}:

[GITHUB-CODE-TAG lang="vb" samplePath="app/src/main/java/com/pspdfkit/catalog/examples/java/DynamicMultimediaAnnotationExample.java" /]

Available Attributes

The Github Code component supports these attributes:

url (required): The URL of the raw code snippet on GitHub.
lang: The language for syntax highlighting (e.g., "js", "python", "bash")
title: Add a title to the code block
frame: Choose display style ("terminal", "browser", "code", "none")
meta: Additional meta information
locale: The locale for the code block
wrap: Whether to wrap long lines (boolean)
preserveIndent: Whether to preserve indentation (boolean)
showLineNumbers: Whether to show line numbers (boolean)
startLineNumber: Start counting from a specific number
mark: Line numbers to highlight (array)
ins: Line numbers to mark as inserted (array)
del: Line numbers to mark as deleted (array)

Usage in Astro Components

In Astro components, you can use the GithubCode component directly:

<GithubCode
  url="https://raw.githubusercontent.com/PSPDFKit/pspdfkit-android-catalog/master/app/src/main/java/com/pspdfkit/catalog/examples/java/DynamicMultimediaAnnotationExample.java"
  language="js"
  title="example.js"
  frame="terminal"
/>

Alert Component

The Alert component is used to display alerts to the user. It can be used to display warnings, errors, or other important information.

Testing here is extremely tricky; Apple saves absolute paths in the binary, so if you happen to have the same username on the build machine and your test machine, it might work, but it fails somewhere else. It also seems that LLDB uses the shared module cache, so you need to delete DerivedData on every run. And (see later in this article), where you store the example and which other files you store also play into this — dare I say, this was extremely confusing and frustrating to debug.

This is a paragraph.

This is another paragraph.

This is a link to a page.

One line alert box.

Default alert with no props. There is no text in this alert. The text is not visible. No text.

One line alert box.

Discover what's new! Check out our changelog for the latest release updates, of which there are a lot.

Usage in Markdoc

To use the Alert component in your Markdoc files, use the following syntax:

[ALERT-TAG text="Alert text" type="warning" line="multi-line" boxed=false /]

Attributes

The Alert component supports the following attributes:

type (optional): The type of alert to display (warning, success, error, neutral-gray)
line (optional): The line style to use (multi-line, single-line)
boxed (optional, boolean): Whether to display the alert in a boxed format (default: false)

Usage in Astro Components

In Astro components, you can use the Alert component directly:

<Alert
  type="neutral-gray"
  line="single-line"
  boxed={false}
>
  One line alert box.
</Alert>

List Component

The List component is used to display lists of items. It can work with both ordered and unordered lists.

Item 1
1. Item 1.1
2. Item 1.2
3. Item 1.3
Item 2
Item 3

Item 1
- Item 1.1
- Item 1.2
- Item 1.3
Item 2
Item 3

First arrow item
Second arrow item
Third arrow item

First check item
Second check item
Third check item

First item
Second item
- Item 3.1
- Item 3.2
  - Item 3.2.1
  - Item 3.2.2
  - Item 3.2.3
- Item 3.3
Fourth item

Quote Component

The Quote component is used to display quotes/testimonials from a person.

Angelica Nierras

Chief Growth Officer

Nutrient helps us significantly accelerate our time to market, provide key services to our clients, and reliably deliver solutions that we can easily integrate into our portfolio.

Faria Education Group

Nutrient helps us significantly accelerate our time to market, provide key services to our clients, and reliably deliver solutions that we can easily integrate into our portfolio.

Usage in Markdoc

To use the Quote component in your Markdoc files, use the following syntax:

[QUOTE-TAG
size="big"
name="Angelica Nierras"
position="Chief Growth Officer"
company="Faria Education Group" /]

Quote here

[QUOTE-TAG /]

Attributes

The Quote component supports the following attributes:

size (optional): The size of the quote (big, small)
name (optional): The name of the person who said the quote
position (optional): The position of the person who said the quote
company (optional): The company of the person who said the quote

Usage in Astro Components

In Astro components, you can use the Quote component directly:

<Quote
  size="big"
  name="Angelica Nierras"
  position="Chief Growth Officer"
  company="Faria Education Group"
/>
  Quote here
</Quote>

CTA Component

The CTA component is used to display a call to action. It can be used to display a button or a link.

Ready to get started?

Usage in Markdoc

To use the CTA component in your Markdoc files, use the following syntax:

[CTA-TAG color="accent" supertitle="Ready to get started?" href="https://www.nutrient.io/try" boxed=false /]
Ready to get started?
[CTA-TAG /]

Attributes

The CTA component supports the following attributes:

color (optional): The color of the CTA (neutral, accent)
supertitle (optional): The supertitle of the CTA
href (optional): The href of the CTA
boxed (optional, boolean): Whether to display the CTA in a boxed format (default: false)

Usage in Astro Components

In Astro components, you can use the CTA component directly:

<CTA
  color="accent"
  supertitle="Ready to get started?"
  href="https://www.nutrient.io/try"
  boxed={false}
/>
  Ready to get started?
</CTA>

Alternate CTA

Try it Free

Try our product for free and see the difference.

Start Free Trial

Upgrade Your Experience

Get access to premium features and priority support.

Upgrade Now Learn More

Tag Component

The Tag component is used to display a tag.

Tag name

Usage in Markdoc

[TAG-TAG color="accent" variant="text" href="/try" filter=false /]

Attributes

The Tag component supports the following attributes:

color (optional): The color of the tag (to be used with variant bullet or text. NOTE: This does not change the color of the button, only the bullet point or text)
variant (optional): The variant of the tag (text, bullet), to be used with color
href (optional): The href of the tag
filter (optional, boolean): Whether to display the tag as a clickable filter (default: false)

Usage in Astro Components

In Astro components, you can use the Tag component directly:

<Tag
  color="accent"
  variant="text"
  href="/try"
  filter={false}
/>
  Tag name
</Tag>

Tables

2 Columns

Feature Description	Status
Advanced user authentication system with multi-factor authentication, password recovery, and session management capabilities	✅ Live
Basic contact form with email validation	🚧 Testing
Comprehensive analytics dashboard featuring real-time user behavior tracking, conversion funnels, and detailed reporting with exportable data formats	📋 Planned

3 Columns

Project Title	Budget	Team Lead Notes
E-commerce platform redesign with modern UI/UX patterns, mobile-first approach, and enhanced checkout flow	$85,000	Sarah mentioned concerns about the timeline given the complexity of the payment integration. Need to discuss with the client about potentially phasing the rollout.
Bug fixes	$2,500	Quick turnaround
Customer relationship management system overhaul including automated email campaigns, lead scoring, and integration with existing sales tools	$45,000	Mike has experience with similar CRM implementations. Should be straightforward but will require data migration.

4 Columns

Course Name	Duration	Prerequisites	Course Description
Introduction to Web Development	12 weeks	None	A comprehensive beginner-friendly course covering HTML5, CSS3, JavaScript fundamentals, responsive design principles, and basic version control with Git. Students will build three projects including a personal portfolio website.
Advanced React Patterns	3 days	React basics, JavaScript ES6+	Intensive workshop focusing on advanced React concepts including custom hooks, context patterns, performance optimization, and state management strategies.
Data Structures	16 weeks	Programming fundamentals, basic mathematics	In-depth exploration of fundamental data structures and algorithms including arrays, linked lists, trees, graphs, sorting algorithms, and complexity analysis with practical implementation exercises.
UX Design Bootcamp	8 weeks	Design thinking basics	Hands-on program covering user research methodologies, wireframing, prototyping tools, usability testing, and design systems creation with real client projects.

5 Columns

Company	Industry	Revenue	Employees	Recent Developments
TechCorp Solutions	Software Development	$2.4M	45	Just secured Series A funding of $8M to expand their AI-powered customer service platform. Planning to hire 20 new engineers and open a European office by Q3. The CEO announced partnerships with three major enterprises.
Local Bakery	Food & Beverage	$180K	8	New location opening next month
DataFlow Analytics	Business Intelligence	$890K	23	Recently launched their machine learning-powered predictive analytics suite. The product has gained traction with mid-market companies looking to optimize their supply chain operations. Currently in talks with a Fortune 500 company for a pilot program.
Green Energy Co	Renewable Energy	$5.7M	78	Completed installation of 50MW solar farm project ahead of schedule. Received government contract worth $12M for rural electrification program. Stock price up 23% this quarter.

6 Columns

Product Name	Category	Price	Inventory	Customer Reviews	Marketing Notes
UltraBook Pro 15"	Laptops	$1,299	47	"Exceptional build quality and performance. The battery life easily lasts a full work day, and the display is crisp and vibrant. Some users reported minor heating issues during intensive tasks, but overall satisfaction is very high. Would definitely recommend for professional use."	Premium positioning working well. Consider highlighting the sustainable materials in next campaign. Sales team reports strong interest from creative professionals.
Wireless Earbuds	Audio	$79	203	"Good value for money but could improve"	Price-sensitive segment
Smart Home Hub	IoT	$149	12	"Setup was more complicated than expected, but once configured, it works flawlessly. Integration with major smart home brands is seamless. The mobile app could use some UI improvements, but the functionality is solid. Great for tech-savvy users."	Inventory running low - reorder soon
Gaming Mouse RGB	Peripherals	$45	89	"Perfect for competitive gaming. Highly responsive and customizable. The RGB lighting effects are a nice touch, though they can be disabled for a more professional look. Ergonomics are excellent for extended gaming sessions."	Popular with streamers and esports community. Consider sponsorship opportunities. Recent firmware update improved performance significantly.

Column 1	Column 2

Android	iOS