Work began on LVGL's UI Editor 🎉

Announcements
31

I’ve asked ChatGPT to show examples for basic card element in XML, JSON, TOML, and YAML:

XML:

<card>
    <title style="font-size: 20px; font-weight: bold;">Card Title</title>
    <description style="font-size: 14px; color: #666;">This is the card description.</description>
    <button style="background-color: #4CAF50; color: white; padding: 10px 20px;">
        <label>Click Me</label>
    </button>
</card>

JSON:

{
  "card": {
    "title": {
      "text": "Card Title",
      "style": {
        "font-size": "20px",
        "font-weight": "bold"
      }
    },
    "description": {
      "text": "This is the card description.",
      "style": {
        "font-size": "14px",
        "color": "#666"
      }
    },
    "button": {
      "label": "Click Me",
      "style": {
        "background-color": "#4CAF50",
        "color": "white",
        "padding": "10px 20px"
      }
    }
  }
}

TOML:

[card.title]
text = "Card Title"
font-size = "20px"
font-weight = "bold"

[card.description]
text = "This is the card description."
font-size = "14px"
color = "#666"

[card.button]
label = "Click Me"
background-color = "#4CAF50"
color = "white"
padding = "10px 20px"

YAML:

card:
  title:
    text: Card Title
    style:
      font-size: 20px
      font-weight: bold
  description:
    text: This is the card description.
    style:
      font-size: 14px
      color: "#666"
  button:
    label: Click Me
    style:
      background-color: "#4CAF50"
      color: white
      padding: "10px 20px"

I still love XML the most because it’s short and familiar. What do you think?

4 Likes