-
-
Notifications
You must be signed in to change notification settings - Fork 82
docs: Add 'What is SDUI?' documentation page #380
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Some comments aren't visible on the classic Files Changed page.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -28,6 +28,7 @@ | |
| "pages": [ | ||
| "introduction", | ||
| "quickstart", | ||
| "sdui", | ||
| "cli", | ||
| "project_structure" | ||
| ] | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| --- | ||
| title: "What is SDUI?" | ||
| description: "Definition, pros and cons, and companies who have adopted it" | ||
| --- | ||
|
|
||
| Server-Driven UI (SDUI) is an approach where the server decides the layout and behavior of a screen, and the mobile app simply renders it. When a screen loads, the app fetches a description from the server that specifies which components to display, how to arrange them, and what actions they should perform. | ||
|
|
||
| ## How is SDUI different from traditional approaches? | ||
|
|
||
| In a traditional Client-Driven UI model, the app’s UI is tightly coupled to its codebase. The client handles everything; layouts, business logic, and rendering. Any change, whether updating a button style or adding a new feature, requires modifying code, testing, and submitting a new version to the app stores. This leads to slow release cycles, limited flexibility, and poor scalability. | ||
|
|
||
| SDUI flips this model. Instead of hardcoding the UI inside the app, the server determines what the UI should look like. The client’s role is simply to render whatever the server sends. | ||
|
|
||
| A helpful analogy is how a browser renders a website. The browser doesn’t know ahead of time what the page contains; it just knows how to interpret and display HTML. Similarly, in SDUI, the app knows how to render predefined components, while the server controls which components appear and how they’re structured. | ||
|
|
||
| ### How SDUI works: | ||
|
|
||
| 1. The server defines the UI structure in a lightweight format (usually JSON) | ||
| 2. The app receives this UI schema and renders it dynamically. | ||
| 3. To update the UI, you simply change it on the server — the app reflects it instantly, with no app-store release required. | ||
|
|
||
| <img src="./assets/sdui.png" alt="Diagram showing the SDUI flow: server sends JSON schema, app renders widgets." /> | ||
|
|
||
| ### Pros: | ||
|
|
||
| - Rapid deployment without App Store delays | ||
| - Reduced app size & complexity | ||
| - Platform consistency & faster feature parity | ||
| - Accelerated development & cost savings | ||
|
|
||
| ### Cons: | ||
|
|
||
| - Higher implementation complexity (Stac makes this much easier) | ||
| - Limited use cases for fully offline applications | ||
|
|
||
| ## Good Use Cases | ||
|
|
||
| - **Home & Explore Sections:** dynamic carousels, promotional modules, editorial stacks | ||
| - **Onboarding Flows:** reorder steps, control form elements | ||
| - **Paywalls & Offers:** dynamic pricing tables, region-specific plans, time-boxed promotions | ||
| - **Feature Flags & Experiments:** real-time A/B testing, targeted rollouts | ||
|
|
||
| ## Companies actively building with SDUI | ||
|
|
||
| Server-Driven UI has gained significant traction in recent years. Both startups and large enterprises now use it extensively. | ||
|
|
||
| - **Netflix** | ||
| - **Airbnb** | ||
| - **Delivery Hero** | ||
| - **Uber** | ||
| - **Shopify** | ||
| - **Meta** | ||
| - **Spotify** | ||
| - **PhonePe** | ||
|
|
||
| ## Next steps | ||
|
|
||
| - Try the quick start in [Quickstart](./quickstart) to render your first server‑driven screen. | ||
| - Read how Stac renders widgets in [Rendering Stac Widgets](./concepts/rendering_stac_widgets). | ||
| - Explore the widget catalog under [Widgets](./widgets/). | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.