Update

Display changelog entries, version updates, and product announcements with labeled sections and timeline layouts.

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.

Example: New features

We've added support for real-time collaboration and team workspaces.

• Multi-user editing with live cursor tracking
• Team workspace management
• Enhanced permission controls

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.

Prefer writing in code? You can switch to MDX view inside the Web Editor to write or edit this component using the same syntax as the Code Editor. This is useful if you want full control while staying in the Web Editor.

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).
   • 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>

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

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

• label (string): Required. The primary label displayed in the sidebar. Typically used for dates (YYYY-MM-DD format) or version identifiers.
• description (string): Required. Supporting description displayed below the label. Commonly used for version numbers, release types, or brief categorizations.
• tags (array): Optional array of tag strings to categorize the update. Tags display as small badges below the label and description.
• children (node): Required. The main content of the update. Supports all MDX content including headings, text, code blocks, images, cards, callouts, and other components.

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.

Combine Update blocks with Cards, Callouts, Steps, and Tabs to build rich changelog and announcement pages that are easy to scan and delightful to read.