A page layout built on lines, not stacked surfaces​

This is the change you'll feel the most. Page structure used to come from nested surfaces; it now comes from lines. Sidebars, detail panels, and content regions sit flush on the page background, separated by thin dividers.

Surfaces are still there, doing the job they're best at: grouping related content rather than carrying the page structure. With structure coming from alignment and dividers, instead of stacked backgrounds, the interface is calmer, dense pages are easier to scan, and a surface now genuinely means "these things belong together."

Before​

After​

More vibrant colors, cleaner grays​

Status colors are cleaner and brighter. Success, warning, and critical are now noticeably more saturated, so a critical alert reads as urgent, at a glance, and a success state shows the confidence it should.

The gray shades were rebuilt too. The whole neutral scale was regenerated from scratch, which removes the general grayness that was there before. Dark mode changed from heavy blue-gray to a more neutral and readable coloring.

Dark mode now follows the same elevation logic as light mode: the higher an element sits, the brighter it is. Depth reads identically in both themes, so a raised panel or a floating menu is recognizable at a glance, and dense pages stay calm and easy to scan.

Fields that read as interactive​

Fields are now outlined and bright rather than filled. An empty field reads immediately as somewhere you can enter text, and a form full of different fields feels lighter and uncrowded.

Gray now does a more specific job. Read-only and disabled fields keep a gray background, which makes those states unmistakable at a glance. Now, gray reliably means "you can't edit this." Chips follow the same rule, trading solid blocks for outlines.

Refreshed chart colors​

Chart colors followed the UI refresh with the same intent: more vivid, more distinct. The sequential palettes were rebuilt using the OKLCH color system, a perceptually-uniform model where equal numerical steps look like equal steps to the eye. All the other palettes are derived from these new shades.

The mid-range shades keep their full saturation now, so overlapping chart series stay visually distinct even in dense charts. Charts across dashboards, notebooks, and custom apps all pick up the new colors automatically thanks to the Strato design tokens.

More chart palettes are on the way, including a vivid categorical set and several themed palettes.

What this means for your app​

Nothing to migrate. The refresh ships through Strato's design tokens, so any component you already use picks it up automatically without API changes, and no breaking changes either.

If you style anything yourself, design tokens are what save you here. Token references resolve to CSS custom properties, so anything built on them moved along with the rest and is already up to date.

The spots worth a close look are hardcoded values: anywhere a color or style was written literally to match Strato by eye, instead of referenced from a token. Those didn't move, so they may now sit slightly out of step.

The refresh is live now, across every Strato app your team already ships. Take a look at your apps today, and if something looks off, let us know through the Feedback button at the bottom of this page.

• 4 new code optimization guides
• A new error messages pattern
• App Toolkit updates
• A look ahead at Strato 4.0
• An announcement about the Developer Newsletter

The next session is Tuesday, November 10.

Here are the topics we covered, in the order they appear in the recording, with links to the documentation for each one.

New for app builders​

New guides under Code optimization:

• Stale-while-revalidate—serve a cached result instantly while a fresh one loads in the background, so users see data instead of a spinner. See Stale-while-revalidate.
• Prevent layout shift—reserve the right amount of space during loading so content below doesn't jump. See Prevent layout shift.
• Bundler-friendly code—3 common habits (TypeScript enums, module-level side effects, and classes) that quietly block tree-shaking in app functions. See Bundler-friendly code.

From the Strato design system​

• Error messages—a new pattern covering which component to reach for (EmptyState, HealthIndicator, MessageContainer, or Toast) and 8 principles for writing error copy that helps users recover. See Error messages.
• Accessibility improvements—Strato 3.11 through 3.13 shipped a batch of fixes across keyboard navigation, screen reader announcements, and accessible names on icon-only triggers. Run dt-app update to pick them up with no code changes. See the components changelog and Accessibility.

App Toolkit updates​

The --hmr flag now covers action and settings widgets in addition to app UIs, and 2 new scaffold commands—dt-app document create and dt-app setting create—stub out the boilerplate for you. See the App Toolkit release notes.

Plan ahead for Strato 4.0​

The next major Strato version (expected around end of CQ1) will require React 19, replace Jest with Vitest, and ship ES modules only. Nothing to act on today, but worth bookmarking Upcoming changes—and if you're still on Jest, Create unit tests with Vitest is already published.

The Developer Newsletter has ended​

The Developer Newsletter published its final edition (#38) in August. The What's new blog is where we publish app-development news now. The archive stays online on the community.

From the community​

How do you get secrets into an app function? Not with a .env file—those aren't picked up at runtime. Use the Credential Vault for a shared credential an admin owns, or app settings with a "type": "secret" property for config each installation's users supply. See Manage secrets and Store app settings.

Next session​

The next App Development Office Hours is Tuesday, November 10, 4:00 PM CET / 10:00 AM EST. Registration isn't open yet—we'll share the event on LinkedIn closer to the date, and you'll be able to sign up there.

Why Vite​

The old dev server was one of the oldest, most interconnected parts of the toolchain, and esbuild's plugin model made it brittle to extend. Plugins weren't chainable and each file could pass through only one loader, which caused friction for features like i18n combined with vanilla-extract. Adding support for common tooling such as Sass meant hand-rolling it in the build.

Vite solves this the way the rest of the ecosystem already has—Angular, SolidStart, Remix, Astro, and React's own recommended setup all build on it. Its Rollup-compatible plugin system gives you a huge catalog of integrations out of the box, and it leaves the toolchain far easier to maintain and evolve. The migration also moved the toolchain onto Vite 8 with Rolldown support, keeping it aligned with where the ecosystem is heading.

Instant feedback with HMR​

Run the dev server with the new --hmr flag and you get two immediate wins: the server starts significantly faster, and edits show up in the browser instantly, without a full-page reload:

npx dt-app dev --hmr

Because the page never reloads, your app keeps its state across edits, so you stay in flow instead of clicking your way back to where you were. Fastify is gone from this path, source maps still work exactly as before, and breakpoints still hit—so debugging is unchanged. HMR works for the app UI as well as for Workflow and Settings widgets.

Smaller production bundles with code splitting​

The new production build is opt-in behind the --optimize flag, which is available on the build, deploy, and analyze commands. Add --enable-code-splitting to break your bundle into chunks that load on demand instead of shipping everything upfront:

npx dt-app build --optimize --enable-code-splitting
npx dt-app deploy --optimize --enable-code-splitting

When code splitting is on, the build automatically splits lazy loaded components into their own chunks. The build splits CSS the same way. If you use vanilla-extract, it keeps working, though you might need its dedicated Vite plugin. You don't create a vite.config.js — the toolkit manages Vite configuration internally.

Check out the Lazy loading quickstart for a step-by-step guide to converting your routes and heavy components to lazy loading. The Understand lazy loading guide explains the principles and provides more detailed guidance.

What's next​

These features are opt-in for now, but that's changing. In the near future, Vite will be the default engine for all dt-app commands—no flags required. Stay tuned for more updates.

Start with the right component or pattern​

Where and when you show an error matters as much as the words you use. A field validation error, a Toast, and a MessageContainer can all communicate failure, but with different weight and urgency. The pattern gives you a shared starting point: which component to reach for, how to match the visual weight to the severity, and where to place the message so it's as close to the problem as possible.

That consistency adds up. Across teams and features, a common approach means users get a predictable experience no matter what went wrong.

Write effective copy​

The pattern covers key principles for writing effective error messages, each with a side-by-side do/don't example drawn from real Dynatrace UI copy:

• Use simple words
• Be specific
• Show a way forward
• Skip obvious next steps
• Avoid generic errors or raw codes
• Don't assign blame
• Don't be overly apologetic
• Don't exaggerate or downplay

These principles also make a good prompt checklist when you're using an LLM to generate or review error copy. Pattern pages are designed to be the foundation your content is built on, so you can scale without losing consistency.

Read the full pattern in the Error messages reference.

Composable slots​

The headline change is that slots are composable: Header, Sidebar, Content, and Details can live anywhere in your component tree—inside an <Outlet />, a <Suspense> boundary, or any wrapper—instead of having to be direct children. That's what makes it work cleanly with routers, where the layout frame and the routed content can own different slots. Beyond that, panel state is preserved across collapse and expand, the details panel can render side-by-side or as an overlay, and panels are responsive with their own breakpoints.

Migrating from Page​

Most of the migration is mechanical, so you just need to rename the slots and a few props. A few APIs changed along the way (expand/collapse controls are always on, content always stays mounted) and the default breakpoints are different, so review any breakpoint overrides after you switch.

Start with the PageLayout component and the migration guide.

New for app builders​

• Custom page titles—set a descriptive browser-tab title with the usePageTitle hook, so users can tell multiple open tabs apart. See Page titles.
• Lazy loading—a deeper guide on code splitting, route- and view-based lazy loading, when not to split, and how to parallelize a chunk download with its Grail query. See Understand lazy loading.

From the Strato design system​

• PageLayout—the new, more flexible replacement for Page, with composable slots and a split-or-overlay details panel. See the PageLayout component and its migration guide.
• Accessibility foundation—a new design-foundation page covering what you need to build inclusive apps — WCAG 2.2 AA, and what Strato handles for you. See Accessibility.
• TimeframeSelector—from @dynatrace/strato-components v3.1+, it shows users their recently used timeframes automatically — no code changes required. See TimeframeSelector.
• XYChart—a low-level, composable option for charts the ready-made components can't build — heatmaps, scatterplots, and more. See XYChart.

From the community​

One thread we highlighted: a user asked whether they could set a custom page title in a Dynatrace app. It was on the roadmap then, and it's now shipped, with the usePageTitle hook above. Your questions genuinely feed what we prioritize.

Next session​

The next App Development Office Hours is Tuesday, September 8, 16:00 CEST / 10:00 EDT. Register via the LinkedIn event.

Got a topic you'd like us to cover? Drop it in the Developer Q&A Forum.

Lazy loading: ship less upfront​

By default, an app bundles every page and component into one download, even the ones the user never opens. Lazy loading splits that bundle into chunks that load on demand, using React's lazy() and <Suspense>. The App Toolkit now supports this out of the box.

The highest-impact, lowest-risk place to start is the route level: load only the page the user navigates to. From there, you can defer in-page views that sit behind an interaction (tabs, drawers, modals), and even fire a Grail query while the browser is still downloading the component that will render it. The guide also covers where not to split: anything above the fold, or smaller than ~20–30 KB, usually isn't worth a separate chunk.

Stale-while-revalidate: reuse what you've fetched​

Grail queries can take seconds, and much of the data an app shows such as host lists, topology, or configuration, doesn't change second to second. Stale-while-revalidate (SWR) renders cached data instantly, then quietly refreshes it in the background and swaps in the new result if anything changed. No spinner, no blank screen.

You mostly get this for free: useDql from @dynatrace-sdk/react-hooks is built on TanStack Query and ships with SWR support. The guide walks through setting staleTime per data type, using placeholderData to avoid a flash of loading state on filter changes, and the key distinction between isLoading (first load) and isFetching (background refresh).

Why both matter​

The two techniques map neatly onto Core Web Vitals: lazy loading reduces the JavaScript the browser parses before first render, which helps LCP; while SWR removes loading states from repeat navigation, which helps INP.

What's changing​

You add a small usePageTitle hook to your project and call it from each routed page. The app shell composes the rest of the tab title (app name, tenant, "Dynatrace") around the part you set. One thing to watch: only set a title for views with a persistent URL — updating it for transient overlays or modals confuses the browser's back/forward history.

The Page titles guide has the full walkthrough, including the hook itself and how to set titles for widgets.

Community works​

This one closed a loop with the community — it started as a question on the Developer Q&A forum. If there's something you're missing, that's a good place to ask.

What's new is the new home for app developer news on Dynatrace Developer. It's a single, searchable, filterable feed of news worth knowing, without all the channel-hopping.

What you'll find here​

This isn't a changelog—you'll still find those in Release notes.

In What's new, you can expect a steady mix of updates about new features and ideas, interesting events and tools for your work, plus lots of other topics that matter to app creators.

Today, you see the MVP. More features are coming soon. Use the feedback button at the bottom of the page to tell us what you want more of (or less of).