Server-driven UI (SDUI)

Server-driven UI (SDUI) is a way of building user interfaces that are specified on the server.

The gist of the concept:

  • You build a library of UI components the usual way in your web app or mobile app (say, a bunch af React components or Swift UI components).
  • For your app’s various pages and screens, rather than hard-code a composition of these components (with hard-coded props, content, etc.), you specify this composition as some data structure (say, some JSON schema).
  • You store and manage this data structure on the server, so that it’s easily edited.
  • In your app, when rendering a page or screen, you first query this data structure from the server, and then render the page or screen based on this spec.

Some benefits and characteristics of this approach:

  • Nimble: You can quickly update your UI without redeploying your app and going through any app store publish process.
  • Platform-independent: You can control your UIs this same way across platforms, whether web or mobile.
  • Dynamic: You can more easily make your UI dynamic with respect to the user’s persisted data.

It’s very similar to using a headless CMS in spirit, but SDUI more specifically describes use cases that are geared toward building user interfaces rather than (say) blog posts.

Plasmic is a visual editor that exposes its model representation via API, so it fits the SDUI use case naturally. The editing experience being visual means editors are not working with JSON data structures or filling out nested forms, but could be directly seeing and manipulating the UI that they are building. Plasmic users can visually drag-and-drop your existing components to compose some larger screen or experience. Developers can query Plasmic’s API for the latest such arrangement of components to determine how to render them in the corresponding mobile app or web app.

You can also learn more about a real-world case study of SDUI in A Deep Dive into Airbnb’s Server-Driven UI System.

Was this page helpful?

Give feedback on this page