easels.dev

write_html

Insert markup you already have. For building a page, screen or section from a description use generate_design instead; this is for a small component, a fix, or a logo. Write an HTML fragment into a parent and it becomes real nodes the person can then select and drag. Use inline style attributes for CSS. Flow layout works: a div with display:flex lays its children out for real, so prefer flex and grid over positioning every child by hand. Position the fragment root with position:absolute plus left and top to place it on the artboard. Semantic tags are kept, so use h1, p, button and a rather than divs everywhere. Returns the ids created and the boxes the browser laid them out at.

Input schema

{
  "type": "object",
  "properties": {
    "parentId": {
      "type": "string",
      "description": "Artboard or frame id to write into."
    },
    "html": {
      "type": "string",
      "description": "An HTML fragment. May have several roots."
    },
    "mode": {
      "type": "string",
      "enum": [
        "append",
        "replace"
      ],
      "description": "append adds to the parent; replace swaps its children. Defaults to append."
    }
  },
  "required": [
    "parentId",
    "html"
  ]
}