gridstack_make_widget

Convert existing DOM elements into interactive grid widgets for dashboard layouts. Specify element selector and positioning options to integrate components into responsive drag-and-drop grid systems.

Instructions

Convert an existing DOM element into a grid widget

Input Schema

TableJSON Schema

Name	Required	Description	Default
`el`	Yes	Element selector to convert
`options`	No	Widget options

Implementation Reference

src/tools/index.ts:1120-1128 (handler)

Handler function that implements the gridstack_make_widget tool logic by generating the appropriate GridStack.js code snippet.

private async makeWidget(params: any): Promise<string> {
  const { el, options = {} } = params;

  return this.utils.generateGridStackCode("makeWidget", {
    element: el,
    options,
    code: `grid.makeWidget('${el}', ${JSON.stringify(options, null, 2)});`,
  });
}

src/tools/index.ts:658-689 (schema)

Input schema definition and description for the gridstack_make_widget tool.

{
  name: "gridstack_make_widget",
  description: "Convert an existing DOM element into a grid widget",
  inputSchema: {
    type: "object",
    required: ["el"],
    properties: {
      el: {
        type: "string",
        description: "Element selector to convert",
      },
      options: {
        type: "object",
        description: "Widget options",
        properties: {
          x: { type: "number" },
          y: { type: "number" },
          w: { type: "number" },
          h: { type: "number" },
          autoPosition: { type: "boolean" },
          minW: { type: "number" },
          maxW: { type: "number" },
          minH: { type: "number" },
          maxH: { type: "number" },
          locked: { type: "boolean" },
          noResize: { type: "boolean" },
          noMove: { type: "boolean" },
        },
      },
    },
  },
},

src/tools/index.ts:657-762 (registration)

The tool is registered in the listTools() method's return array.

  // Advanced Features
  {
    name: "gridstack_make_widget",
    description: "Convert an existing DOM element into a grid widget",
    inputSchema: {
      type: "object",
      required: ["el"],
      properties: {
        el: {
          type: "string",
          description: "Element selector to convert",
        },
        options: {
          type: "object",
          description: "Widget options",
          properties: {
            x: { type: "number" },
            y: { type: "number" },
            w: { type: "number" },
            h: { type: "number" },
            autoPosition: { type: "boolean" },
            minW: { type: "number" },
            maxW: { type: "number" },
            minH: { type: "number" },
            maxH: { type: "number" },
            locked: { type: "boolean" },
            noResize: { type: "boolean" },
            noMove: { type: "boolean" },
          },
        },
      },
    },
  },

  {
    name: "gridstack_remove_all",
    description: "Remove all widgets from the grid",
    inputSchema: {
      type: "object",
      properties: {
        removeDOM: {
          type: "boolean",
          description: "Remove DOM elements",
          default: true,
        },
      },
    },
  },

  {
    name: "gridstack_get_margin",
    description: "Get current margin values",
    inputSchema: {
      type: "object",
      properties: {},
    },
  },

  {
    name: "gridstack_get_column",
    description: "Get current number of columns",
    inputSchema: {
      type: "object",
      properties: {},
    },
  },

  {
    name: "gridstack_get_float",
    description: "Get current float state",
    inputSchema: {
      type: "object",
      properties: {},
    },
  },

  {
    name: "gridstack_add_grid",
    description:
      "Create a new grid with options and children (static method)",
    inputSchema: {
      type: "object",
      required: ["parent"],
      properties: {
        parent: {
          type: "string",
          description: "Parent element selector",
        },
        opt: {
          type: "object",
          description: "Grid options including children",
          properties: {
            children: {
              type: "array",
              items: {
                type: "object",
                description: "Child widget configuration",
              },
              description: "Array of child widgets to load",
            },
          },
        },
      },
    },
  },
];

src/tools/index.ts:840-842 (registration)
Dispatch registration in the callTool switch statement routing to the handler.
```
case "gridstack_make_widget":
  return this.makeWidget(args);
```

GridStack MCP Server