Widget System Testing

This page demonstrates the widget embedding system with type transformations.

Part 1: MDX Component Syntax

MDX allows using React components directly with JSX syntax. Props are typed natively.

Widget1 - Full Featured (MDX)

{
  "title": "MDX Widget",
  "count": 123,
  "enabled": true,
  "tags": [
    "tag1",
    "tag2",
    "tag3"
  ],
  "colors": [
    "purple",
    "orange"
  ]
}

Widget1 - Disabled (MDX)

{
  "title": "Disabled via MDX",
  "count": 0,
  "enabled": false
}

Widget1 - Arrays (MDX)

{
  "title": "First MDX",
  "count": 10,
  "tags": [
    "tag1",
    "tag2"
  ],
  "colors": [
    "red",
    "pinky"
  ]
}

Unknown Widget - Placeholder Test (MDX)

{
  "someParam": "test"
}

Part 2: HTML Tag Syntax (Braces parser)

Widgets can be embedded using [WidgetName param="value"] syntax. All values are strings and transformed by schema.

Widget1 - Basic Example

Widget1 - With All Parameters

Widget1 - Single Array Value (forceArray test)

Widget1 - Invalid Color Validation Test

This widget has invalid color values that should trigger Joi validation errors:

Part 3: Iframe Embedding (External Sites)

Widgets can be embedded on external sites via iframe using /widgets/[WidgetName] route with URL query parameters.

Widget1 - Basic Iframe

Widget1 - With All Parameters

Widget1 - Disabled State

Unknown Widget - Error Handling

Part 4: Real life Widgets

Carousel Widget (Braces parser)

Grid Widget (Braces parser)
Filters: "rent", createdOnDesc, count=9, maxColumns=6

Display a single blog post in a horizontal card format.

Latest Blog Post (MDX)

Second Latest Post (Braces parser)

Specific Post by Slug (Braces parser) w/ Custom Title

Static Page by Slug (Braces parser)

End of test page.