jfluentsJSON to Fluent UI

Fluent UI

BrowserBackend

Export to Python

JSON InputPaste a JSON data instance or load a template to see the UI appear instantly.

Load Template

Choose a template...

JSON Data

{ "store": { "name": "jfluents Market", "currency": "USD", "taxRate": 0.0825, "isLive": true }, "catalog": { "categories": [ "Electronics", "Books", "Home" ], "featuredProduct": { "sku": "SKU-1001", "title": "Wireless Headphones", "price": 149.99, "inStock": true } }, "checkout": { "allowGuestCheckout": true, "shippingMethods": [ "Standard", "Express", "Pickup" ], "paymentProviders": { "stripe": { "enabled": true, "publishableKey": "pk_test_..." }, "paypal": { "enabled": false, "clientId": null } } } }

Generated UIInteractive Microsoft Fluent UI v9 components mapped from your JSON data types and $ui directives.

Store

Name

Name

Currency

Currency

Tax Rate

Tax Rate

Is Live

Is Live

Enabled

Catalog

Categories

Categories

ElectronicsBooksHome

Featured Product

Featured Product

Sku

Sku

Title

Title

Price

Price

In Stock

In Stock

Enabled

Checkout

Allow Guest Checkout

Allow Guest Checkout

Enabled

Shipping Methods

Shipping Methods

StandardExpressPickup

Payment Providers

Payment Providers

Stripe

Stripe

Enabled

Enabled

Enabled

Publishable Key

Publishable Key

Paypal

Paypal

Enabled

Enabled

Disabled

Client Id

Client Id