An Introduction to Server-driven UI

Hey fellow developer 👋

Tired of rebuilding your app for every small change?

Does each update make your app heavier and slower?

Wish you could push instant UI updates — no store approvals, no waiting?

Then it’s time to explore SDUI (Server-Driven UI) — a smarter way to build flexible, instantly updatable apps.

What is Server-Driven UI (SDUI)?

Server-Driven UI is an approach where the backend defines how the interface looks and behaves. Instead of hard-coding screens into every app, the client simply renders what the server describes — usually through a structured JSON schema.

How SDUI works

1. The client requests a layout from the server (e.g. “home screen”).
2. The server responds with a schema describing components and data.
3. The client renders that structure natively (React, SwiftUI, Flutter, etc.).

{
  "type": "List",
  "children": [
    { "type": "Text", "props": { "text": "Hello Mariana 👋" } },
    { "type": "Button", "props": { "label": "Check Updates", "action": "OPEN_UPDATES" } }
  ]
}
  

This schema defines both structure and behavior — it’s the blueprint the app uses to render its UI.

Why teams love SDUI

• No app-store delays — update instantly from the backend.
• Consistent design — the same layout logic everywhere.
• Composable UIs — reuse the same server blocks across multiple apps.
• A/B testing made easy — send different layouts per user.

When to use SDUI

• Apps with dynamic or frequently updated content (e-commerce, news, travel).
• Products targeting multiple platforms with shared design logic.
• Teams running rapid A/B tests or server-side feature flags.

SDUI transforms how we think about front-end updates: instead of deploying a new version, you just update what the server says — like flipping a switch for your entire ecosystem.

A Concrete Example: Building SDUI in Flutter

Let’s put SDUI into practice using Flutter. Imagine your server sends a simple JSON describing a UI card for a product. The client doesn’t know beforehand what components will appear — it just renders whatever the server instructs.

1) The JSON sent by the server

{
  "type": "Column",
  "children": [
    { "type": "Image", "props": { "url": "https://example.com/sneaker.png" } },
    { "type": "Text", "props": { "value": "Nebula Sneaker", "style": "title" } },
    { "type": "Text", "props": { "value": "$129", "style": "price" } },
    { "type": "Button", "props": { "label": "Add to cart", "action": "ADD_TO_CART" } }
  ]
}
  

The schema above defines a layout: a column with an image, two texts, and a button.

2) The Flutter renderer

This small function interprets the schema and builds widgets dynamically:

import 'package:flutter/material.dart';
import 'dart:convert';

Widget buildFromJson(Map<String, dynamic> node) {
  switch (node['type']) {
    case 'Column':
      return Column(
        children: (node['children'] as List)
          .map((child) => buildFromJson(child))
          .toList(),
      );
    case 'Text':
      final props = node['props'] ?? {};
      final style = props['style'] == 'title'
          ? const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)
          : const TextStyle(fontSize: 16);
      return Text(props['value'] ?? '', style: style);
    case 'Image':
      return Image.network(node['props']['url']);
    case 'Button':
      final label = node['props']['label'] ?? 'Button';
      return ElevatedButton(
        onPressed: () => print(node['props']['action']),
        child: Text(label),
      );
    default:
      return const SizedBox.shrink();
  }
}
  

3) Using it in your app

class SDUIScreen extends StatelessWidget {
  final String jsonData = '''{
    "type": "Column",
    "children": [
      { "type": "Text", "props": { "value": "Welcome to SDUI!" } },
      { "type": "Button", "props": { "label": "Learn More", "action": "OPEN_DOCS" } }
    ]
  }''';

  @override
  Widget build(BuildContext context) {
    final schema = json.decode(jsonData);
    return Scaffold(
      appBar: AppBar(title: const Text('Server-Driven UI')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: buildFromJson(schema),
      ),
    );
  }
}
  

What this achieves

• Change the JSON on the server → the UI updates instantly.
• No need to rebuild or redeploy your Flutter app.
• The same JSON could be rendered by iOS, Android, or Web clients.

With this approach, your Flutter app becomes a universal UI engine — lightweight, flexible, and always up to date with the server’s definitions.

Limitations of SDUI

While SDUI offers flexibility and instant updates, it’s not a silver bullet. Like any architecture, it introduces trade-offs that teams must consider when planning their app’s structure and scalability.

In short, SDUI gives you flexibility — but demands structure. With clear contracts, version control, and caching, these limitations can be managed effectively.

Server-Driven UI redefines how apps evolve — giving teams the power to update interfaces instantly, unify platforms under one logic, and experiment faster than ever before.

By shifting control from the client to the server, SDUI enables continuous delivery of new layouts and features without the traditional deployment bottlenecks of mobile development.

However, this flexibility comes with the need for careful design — schema validation, caching strategies, and robust monitoring are key to keeping things stable and performant.

The next generation of apps won’t just fetch data — they’ll fetch their entire interface.

💬 Want to discuss more about SDUI?

Feel free to reach out — I’d love to connect and exchange ideas!

Email: henriquedefreitasserra@hotmail.com

LinkedIn: linkedin.com/in/hdfs05