# Wireframe

> Convert HTML to an editable UI wireframe inside a MockFlow IdeaBoard wireframe frame.

Source: https://mockflow.com/developers/reference/item-types/wireframe

Send `"type": "wireframe"`.

Convert HTML to an editable UI wireframe inside a MockFlow IdeaBoard wireframe frame.

Also available as the MCP tool `render_wireframelite`. The same payload works through either surface.

### Fields

- `html` (string, required): Complete HTML document with inline CSS to convert to an editable wireframe. Can be a full page/screen OR a single section/widget (login card, navbar, pricing table, etc.) sized to its natural width.
- `fidelity` (enum<string>): Wireframe fidelity. "low" = lo-fi outline (default), "hi" = polished high-fidelity mockup. One of `low` or `hi`.
- `title` (string): Short screen title shown on the wireframe frame's header (e.g. "Dashboard", "Login"). Name the SCREEN, not the request. Falls back to the HTML <title> tag when omitted.
- `viewportWidth` (number): Viewport width in px the frame pins to (mobile ~390, tablet ~820, desktop ~1280). For a multi-screen app pass the SAME value on every screen call so all frames align at one width; omit for a single widget so the frame hugs its content.

## Example

```json
{
  "type": "wireframe",
  "data": {
    "html": "string",
    "fidelity": "low",
    "title": "Q4 Launch Planning",
    "viewportWidth": 0
  }
}
```