website·Indexed 35 days ago
https://developers.mastergo.comAPI reference and development guides for building MasterGo plugins and integrating with the MasterGo OpenAPI. Includes detailed documentation on node types (such as FrameNode, ComponentNode, and TextNode), the global mg object, design variables, and DevMode for generating DSL and code. Covers plugin lifecycle management, UI construction, and OpenAPI endpoints for organization, project, and file management.
ComponentSetNode represents a component set layer in MasterGo, which is essentially a collection of component variants. Its type property is always 'COMPONENT_SET'.MasterGO plugins use a split architecture for security and functionality:
<iframe>. It has full access to Web APIs (HTML, CSS, JS) for building the visual interface but cannot directly access the MasterGO Plugin API or file content.XMLHTTPRequest). It supports standard ES2021 features like Promise, Uint8Array, and JSON.Communication between the UI and the Sandbox is required to build interactive plugins.
PenNode is the most versatile node for representing graphics, allowing the specification of individual vertices, line segments, and areas. It is created using the pen or pencil tools. Similar to GroupNode, its position and size automatically adapt based on its vertices.ComponentItemVal type defines the data structure for elements returned by getComponentListVal(). It contains metadata about the component, including its dimensions, identity, and location.type ComponentItemVal = {
id: string
name: string
componentSignature: string
cover: string
description: string
documentationLinks: Array<{ url: string }>
height: number
width: number
isExternal: boolean
isHidden: boolean
pageId: string
pageName: string
ukey: string
version: number
componentNameAlias: string
parentId?: string
}FrameNode is a container node used to define the hierarchical structure of a layout. Unlike GroupNode, a FrameNode acts more like a folder or directory for layers and typically has its own dimensions (though in auto-layout containers, dimensions are determined by child nodes). Note that designers can convert between FrameNodes and GroupNodes, so plugins should not assume a node's type remains constant.libraryId for each file.# Example request
GET /openapi/v1/project/:projectId/lib/documents
Headers: X-MG-Authentication: <your_token># Example request
curl -X GET "https://<your-domain>/openapi/v1/document/:documentId/subscribeTeamLibraries/detail?withPresetLib=true" \
-H "X-MG-Authentication: <your-token>"code (success is 'OK'), a msg string, and a meta object containing a trace ID for troubleshooting. The primary data is located in data.teamLibrary, which provides a comprehensive overview of the library's assets.{
"code": "OK",
"msg": "",
"meta": {
"time": 123456789,
"trace": "trace-id-for-debugging"
},
"data": {
"teamLibrary": [
{
"id": "library-id",
"documentId": 123,
"documentName": "Library Name",
"projectId": 456,
"teamId": 789,
"publishedScope": "scope-value",
"createdAt": "timestamp",
"updatedAt": "timestamp",
"creator": { "id": 1, "name": "User Name", "avatar": "url" },
"componentSets": [
{
"ukey": "unique-set-key",
"name": "Set Name",
"description": "Description",
"cover": "url",
"documentId": 123,
"layerId": "layer-id",
"createdAt": "timestamp",
"updatedAt": "timestamp",
"lastUpdator": { "id": 1, "name": "User Name", "avatar": "url" },
"pageInfo": { "pageId": "id", "pageName": "name", "layerId": "id", "frameName": "name", "backgroundColor": "#hex" }
}
],
"components": [
{
"ukey": "unique-comp-key",
"componentSetUkey": "parent-set-key",
"name": "Component Name",
"description": "Description",
"type": "type-value",
"width": 100,
"height": 50,
"cover": "url",
"documentId": 123,
"layerId": "layer-id",
"createdAt": "timestamp",
"updatedAt": "timestamp",
"lastUpdator": { "id": 1, "name": "User Name", "avatar": "url" },
"pageInfo": { "pageId": "id", "pageName": "name", "layerId": "id", "frameName": "name", "backgroundColor": "#hex" }
}
],
"styles": [
{
"ukey": "unique-style-key",
"name": "Style Name",
"styleType": "type",
"styleSubType": 1,
"description": "Description",
"cover": "url",
"documentId": 123,
"createdAt": "timestamp",
"updatedAt": "timestamp",
"sortIndex": "index",
"lastUpdator": { "id": 1, "name": "User Name", "avatar": "url" }
}
]
}
]
}
}mg.codegen API is available exclusively in development mode. It allows developers to generate Domain Specific Language (DSL) data from layer information and then convert that DSL into framework-specific code.interface CodegenAPI {
// Methods for event handling, template setting, and code/DSL retrieval
}mg.WebSocket is a wrapper around the browser's native WebSocket API, allowing plugins to manage connections directly from the canvas page. It supports JSON-based text protocols but does not currently support binary messages (Blob/ArrayBuffer).// Basic connection
const ws = mg.WebSocket.connect('ws://localhost:50678');
// Connection with sub-protocols
const ws2 = mg.WebSocket.connect('wss://example.com/ws', ['soap', 'wamp']);ConnectorNode is a specialized node type used to create connector lines between layers in MasterGo. Its type property is always 'CONNECTOR'. It inherits base node properties and includes specific attributes for managing the line's start and end points, stroke styles, and associated text.