https://github.com/behzadam/sdui

Server-Driven UI Sample With Conditionally Rendered Components
https://github.com/behzadam/sdui

form-builder nextjs react server-driv server-side-rendering typescript ui-builder

Last synced: 3 months ago
JSON representation

Server-Driven UI Sample With Conditionally Rendered Components

• Host: GitHub
• URL: https://github.com/behzadam/sdui
• Owner: behzadam
• Created: 2024-08-15T19:42:06.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-09-06T07:12:49.000Z (8 months ago)
• Last Synced: 2024-12-18T14:37:01.569Z (4 months ago)
• Topics: form-builder, nextjs, react, server-driv, server-side-rendering, typescript, ui-builder
• Language: TypeScript
• Homepage: https://sdui-eta.vercel.app/
• Size: 159 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# SDUI: Server-Driven UI with Conditional Form Builder

A React & Next.js project demonstrating the implementation of Server-Driven UI with a dynamic form builder based on a JSON configuration file. [What is Server-Driven UI?](https://www.judo.app/blog/server-driven-ui) | [Watch this video (in Persian)](https://youtu.be/D7nj1oK3YwQ?si=4ZQVo_6puffjGRhz)

## Features

- Dynamic Form Generation: Creates forms based on a JSON definition, allowing for flexible customization and updates without recompiling the frontend.

- Conditional Logic: Implements conditional rendering and validation rules based on user input, providing a more interactive and user-friendly experience.

- JSON Configuration: Uses a JSON file to define form structure, fields, validation rules, and conditional logic.

### JSON Configuration Sample

```json

{

  "label": "Conditional field",

  "type": "text",

  "name": "name",

  "uid": "bd90f44a-d479-49ae-ad66-c2c475daa66b",

  "value": null,

  "logic": {

    "if": "Any",

    "conditions": [

      {

        "when": "f61233e8-565e-43d0-9c14-7d7f220c6020",

        "is": "EqualTo",

        "value": "2"

      },

      {

        "when": "f61233e8-565e-43d0-9c14-7d7f220c6020",

        "is": "EqualTo",

        "value": "4"

      }

    ]

  }

}

```

## Demo

https://github.com/user-attachments/assets/9a6bae57-2aac-4d78-84c0-88c3827080f0

## License

This project is licensed under the MIT License.