DatoCMS changelog for new features and general improvements

Content Delivery API

## [Introducing DatoCMS Cache Tags](https://www.datocms.com/product-updates/introducing-datocms-cache-tags.md)

[date: 2024-07-15T09:03:59.741+02:00]

We’re truly excited to announce **DatoCMS Cache Tags** — an innovative and easy-to-implement solution that ensures your CDN **always serves fresh content** while maintaining top performance with cached content.

(Image content)

With minimal effort on your side, you get to enjoy:

-   **Top-notch performance and instant updates** - Whenever something changes in DatoCMS, visitors immediately see it, while all the rest stays cached for speed. 🎯🏃🏽‍♀️
-   **Developer Relief** \- No need to code complex invalidation logic; we handle it all for you! 👩🏾‍💻😌
    
-   **Cost Efficiency** \- Reduce hosting (and DatoCMS!) costs with precise caching, avoiding things like rebuilding your whole website just to fix a typo. 🤦🏻‍♂️🙄
    

Here's a few ways to get started:

-   [**Read the full announcement**](https://www.datocms.com/blog/introducing-datocms-cache-tags.md) on our blog.
-   Dive into the [**documentation**](https://www.datocms.com/docs/content-delivery-api/cache-tags.md).
    
-   [**Try our starter**](https://github.com/datocms/nextjs-with-cache-tags-starter) to learn firsthand how DatoCMS Cache Tags work within a Next.js project!
    

UI Improvement

## [Set input placeholder text for common fields](https://www.datocms.com/product-updates/set-input-placeholder-text-for-common-fields.md)

[date: 2024-07-02T12:19:10.320+02:00]

You can now customize the placeholder text for some of the most used fields in DatoCMS. This allows you to give specific instructions to your editors when they are creating content.

(Video content)

This option is now available for the following fields and presentation modes:

-   **Single-line String Text**,Text input editor presentation
-   **Multiple-paragraph Text**, Simple textarea presentation
    
-   **Integer Number**
-   **Floating-point Number**
    
-   **Slug**
    

Video API

## [Adjust auto-generated captions](https://www.datocms.com/product-updates/adjust-auto-generated-captions.md)

[date: 2024-06-20T15:19:44.106+02:00]

You can now easily fix any mistake in your 🤖 generated subtitles, to perfectly match your video content!

(Image content)

Just click on the icon next to the subtitles name to download the generated subtitles in .vtt format, open the file in your preferred editor to make any necessary changes, and re-upload the file.

That’s it! You are now in full control of your subtitles.

Video API

## [Stream videos in 4K](https://www.datocms.com/product-updates/stream-videos-in-4k.md)

[date: 2024-05-30T10:57:16.447+02:00]

*Please note: this feature is currently* ***available only for Enterprise plans****, and needs to be enabled by our team, as a different streaming price applies for videos delivered above 1080p (*[*read more)*](https://www.datocms.com/docs/plans-pricing-and-billing/overcharges-on-api-and-bandwidth.md#4k-video-streaming).

If you upload a video with a resolution exceeding 1080p and have the “4K Video Streaming” feature activated on your plan, your viewers can experience ultra-high-definition streaming in 2K (1440p) or 4K (2160p).

(Video content)

The video player smartly selects the optimal resolution based on both the screen’s density and the player’s size on the page, ensuring it delivers these stunningly sharp resolutions only when supported. Enjoy a visually immersive experience like never before!

P.S. Want to see 4K videos in action? Have a look at the ones on the [DatoCMS User Guides](https://www.datocms.com/user-guides.md)!

New Video API

## [Add subtitles and audio tracks to your videos](https://www.datocms.com/product-updates/add-subtitles-and-audio-tracks-to-your-videos.md)

[date: 2024-05-13T15:52:43.403+02:00]

We've made it easier to make your videos more accessible and reach a wider audience! You can now:

-   📝 Upload SRT or VTT subtitle files
-   🎧 Add alternate audio tracks in M4A, MP3, or WAV format
    
-   🤖 Auto-generate captions from your videos' audio (for videos uploaded in the last 7 days)
    

To get started, upload your video and head to the "Additional audio tracks and subtitles" section once it's processed. For auto-generated captions, you will simply need to provide the video language and a description.

For more details, check out [our docs.](https://www.datocms.com/docs/asset-api/videos.md#subtitles-closed-captions-additional-audio-tracks)

Dashboard New

## [Data usage stats in Dashboard = Peace of Mind 😌](https://www.datocms.com/product-updates/data-usage-stats-in-dashboard-peace-of-mind.md)

[date: 2024-05-08T11:24:24.427+02:00]

Our Dashboard now provides comprehensive access to how much data your projects are using. We've made two significant changes to improve your experience.

**Easily forecast monthly usage**

We've added a new section to the "Plan and billing" page, which clearly displays your usage of bandwidth, API calls, and video streaming.

(Video content)

-   A green light indicates that everything is within normal usage limits.
-   An orange light warns that, given the current usage trends, some metrics may exceed your monthly limits.
    
-   A red light means that usage has already surpassed the monthly limits provided in your plan and you will incur in additional fees.
    

As a result of this addition, we renamed the "Resources consumption" section to "Plan limits and usage", and removed bandwidth, API calls, and video streaming metrics, since they now have a dedicated section.

**Introducing the Data Usage Page**

We've created a new Data Usage page that offers a comprehensive overview of your usage metrics.

(Video content)

-   Three graphs display the current month's bandwidth, API calls, and video streaming usage, aggregated across all projects within your scope (personal projects for personal accounts or organization-wide).
-   Similar to the CMS, you can now track usage and easily compare it to the previous month.
    
-   If you select "Distribution", a pie-chart view will show usage distribution across all projects. By clicking on a slice, you can drill down to view data for a specific project.
    

The Data Usage page also provides:

-   Warning messages on each graph when usage levels are high, providing access to a detailed forecast for the month.
-   Ability to download usage information in CSV format for further analysis.
    
-   Access to historical data from previous months.
    

New UI Improvement

## [Set Default Organization on Dashboard](https://www.datocms.com/product-updates/set-default-organization-on-dashboard.md)

[date: 2024-04-15T14:02:49.717+02:00]

We've just shipped an update that will save unnecessary clicks (and frustration!) for those who primarily operate within Organizations. You can now set an Organization as the default destination upon logging into the DatoCMS Dashboard, instead of always being directed to your personal account.

To activate this option, simply click on the "bookmark" icon next to an Organization to make it your default account.

(Video content)

And don't worry, you can also switch back to your personal account or select a different Organization whenever you need to.

New UI Improvement CLI

## [Environments renaming](https://www.datocms.com/product-updates/environments-renaming.md)

[date: 2024-04-11T12:11:26.585+02:00]

It is now possible to change the name of existing environments, including the primary environment:

(Video content)

Renaming the environments does not cause work interruptions for the connected editors, and it is possible to perform this operation even using the latest version of the CLI:

```plaintext
npx datocms environments:rename old-name new-name
```

New Integrations Performance optimization

## [New lightweight Image component for React, Vue and Svelte](https://www.datocms.com/product-updates/new-lightweight-image-components.md)

[date: 2024-04-09T15:35:49.719+02:00]

Now that both [`loading=lazy`](https://caniuse.com/loading-lazy-attr) and [`aspect-ratio`](https://caniuse.com/?search=aspect-ratio) are broadly supported (\> 93% of browsers), we are thrilled to enhance our React, Vue and Svelte SDKs by **introducing a new image component that takes advantage of the browser's native capabilities**!

#### What does it do?

The new image component:

-   Generates a single `<picture />` element — much easier to style, no need for a `layout` prop!;
-   Implements lazy-loading using the native [`loading="lazy"` attribute](https://web.dev/articles/browser-level-image-lazy-loading);
    
-   Sets the blur-up thumb placeholder as the background to the image itself;
-   Creates the smallest possible JS footprint — in the case of React, it's implemented as a [server component](https://nextjs.org/docs/app/building-your-application/rendering/server-components), therefore it doesn't generate any JS and can be rendered and optionally cached on the server.
    

#### What's it called?

On React, this new image component is called [`<SRCImage />`](https://github.com/datocms/react-datocms/blob/master/docs/image.md#image) to emphasize that it's a server component.

Its Vue and Svelte equivalents are both called `<NakedImage />`, to distinguish them from the existing `<Image />` component that generates a more complex HTML output composed of multiple elements around the main `<picture />` element.

#### What about the existing image component?

The "old" component `<Image />` continues to be supported and remains relevant. Since it runs on the browser, it has the ability to set a cross-fade effect between the placeholder and the original image. It also implements lazy-loading through `IntersectionObserver`, which allows customization of the thresholds at which lazy loading occurs.

So in short, if you need more advanced configuration options, or need to support older browsers, the existing `<Image />` continues to be the preferable solution.

#### Releases

For all the details, you can refer to the release page of individual npm packages:

-   React: [https://github.com/datocms/react-datocms/releases/tag/v6.0.0](https://github.com/datocms/react-datocms/releases/tag/v6.0.0)
-   Vue: [https://github.com/datocms/vue-datocms/releases/tag/v6.0.0](https://github.com/datocms/vue-datocms/releases/tag/v6.0.0)
    
-   Svelte: [https://github.com/datocms/datocms-svelte/releases/tag/v2.0.1](https://github.com/datocms/datocms-svelte/releases/tag/v2.0.1)
    

UI Improvement

## [Record titles on display when editing](https://www.datocms.com/product-updates/record-titles-on-display-when-editing.md)

[date: 2024-03-22T12:16:26.905+01:00]

We've just released a small yet nifty enhancement to the Content section. As you dive into editing a record, you'll now see the record's title displayed prominently at the top of the editing area, along with the collection's emoji if there is one. This tweak provides a clearer context as you make updates.

(Video content)

For those times when you need to switch from editing a record to viewing its associated model, and provided your account has the necessary permissions, just click on the menu located right next to the record title for quick access.

(Image content)