Update

Overview

The Update component creates clean, timeline-style blocks with a label on the left (date, version, or tag) and rich content on the right. It’s perfect for:

• Release notes and changelog entries

• Product or feature announcements

• Version upgrade/deprecation notices

• Roadmap milestones or status updates

You can use Updates in two ways:

• Editor UI: Insert and edit Update blocks visually (no code needed).

• MDX: Use the <Update> component with label, description, and tags props.

Using with Web Editor

Add an Update block

1. Place your cursor where you want the update.

2. Type / to open the Search and Add menu.

3. Search for Update and select it.

4. A new update is created with the current date as the label.

Write update content

• Click in the content area to the right of the label (where it says Type here…).

• Start writing your update.

• You can add any rich content here:

  • Text, headings, bullet or numbered lists

  • Images, videos, tables, code blocks, callouts, cards, steps, tabs, etc.

Each Update block is just like a regular content section, styled as a changelog row.

Edit label, description, and tags

1. On the right side of the Update block, click the three-dot menu.

2. The Update Settings panel opens with:

• Label: The main tag shown on the left (for example, 2025-12-11 or v2.3.0).

  • Keep a consistent format across updates (for product updates, dates usually work best).

• Description: A short note shown under the label (for example, New, Patch, v2.3.0, or Performance improvements).

• Tags – Optional tags for each update. Type multiple tags separated by commas, e.g. Bug fix, New.

Click Save to apply the changes.

Create a timeline of updates

• Add multiple Update blocks, one after another, to build a changelog timeline.

• Use labels (dates or versions) + tags (e.g. New, Bug fix, Breaking) to help readers quickly scan what changed and when.

Using with Code Editor

Basic syntax

Use the <Update> component to create changelog entries with labels and descriptions:

<Update label="2024-10-15" description="v1.2.0">
  Released new analytics dashboard with real-time metrics and custom reporting.
</Update>

Tags

Add optional tags to categorize and label updates:

<Update 
  label="2024-10-20" 
  description="v2.0.0"
  tags={["breaking", "security", "performance"]}
>
  ### Example: Major release
  
  This release includes breaking changes and performance improvements.
  
  - Updated API authentication flow requiring new credentials
  - Optimized database queries for 3x faster response times
  - Enhanced security with improved encryption standards
</Update>

Rich content

Updates support all MDX components including code blocks, images, cards, and other components:

<Update label="2024-10-18" description="Feature Launch" tags={["feature"]}>
  ### Example: API Playground
  
  Test API endpoints directly from documentation with our new interactive playground.
  
  <Columns cols={2}>
    <Card title="Try it now" icon="play-circle" href="/api-documentation-and-playground/interactive-playground-setup">
      Explore the playground with live examples
    </Card>
    <Card title="API Reference" icon="book-open" href="/api-documentation-and-playground/api-authentication">
      View complete endpoint documentation
    </Card>
  </Columns>
  
  <Callout kind="tip">
    The playground supports all authentication methods and provides instant response previews.
  </Callout>
</Update>

Sequential updates

Stack multiple updates to create a changelog timeline:

<Update label="2024-10-22" description="v2.1.1" tags={["bugfix"]}>
  - Fixed authentication token refresh issue
  - Improved error messages for API validation
  - Updated dependencies for security patches
</Update>

<Update label="2024-10-15" description="v2.1.0" tags={["feature"]}>
  - Added bulk export functionality
  - Implemented advanced search filters
  - Enhanced mobile responsive design
</Update>

<Update label="2024-10-01" description="v2.0.0" tags={["breaking", "feature"]}>
  - Complete UI redesign with modern interface
  - New team collaboration features
  - Performance improvements across all modules
</Update>

Advanced options

Attributes

Common patterns

• Release changelog: Dates as labels, versions as descriptions, with tags like feature, bugfix, and breaking.

• Product announcements: Feature name or launch date as label, tags like New or Improvement.

• API changes: Version labels plus tags like deprecated, security, or migration.

• Security notices: Use tags such as security and critical for quick scanning.

• Roadmap highlights: Milestones labeled by quarter or date, with tags such as Planned, In progress, Released.