Skip to main content

Mockup Plugin

The Mockup plugin provides an interactive canvas for creating UI mockups and prototypes directly within Backstage.

Overview​

PropertyValue
Package@internal/plugin-mockup
TypeFrontend
Plugin IDmockup
Backendmockup-backend
Libraryreact-grid-layout

Architecture​

Components​

MockupPage​

Main mockup editing interface.

<MockupPage />

Features:

  • Interactive canvas
  • Component palette
  • Properties panel
  • Save/load functionality

MockupManagementPage​

CRUD management for mockups.

<MockupManagementPage />

Features:

  • List all mockups
  • Create new mockups
  • Delete mockups
  • Version history

MockupPreviewPage​

Read-only preview of mockups.

<MockupPreviewPage mockupId="xxx" />

Features:

  • Full-screen preview
  • Responsive scaling
  • Share link generation

MockupCanvas​

The interactive design canvas.

<MockupCanvas layoutData={layout} onChange={handleChange} editable={true} />

Features:

  • Drag-and-drop components
  • Resize handles
  • Grid snapping
  • Component configuration

Routes​

PathComponentDescription
/MockupPageMain editor
/managementMockupManagementPageMockup list/CRUD
/previewMockupPreviewPagePreview mode

API Client​

interface MockupApi {
  // Mockup operations
  listMockups(owner?: string): Promise<Mockup[]>;
  getMockup(id: string): Promise<Mockup>;
  createMockup(input: CreateMockupInput): Promise<Mockup>;
  updateMockup(id: string, input: UpdateMockupInput): Promise<Mockup>;
  deleteMockup(id: string): Promise<void>;

  // Version operations
  saveVersion(mockupId: string, layoutData: LayoutData): Promise<Version>;
  listVersions(mockupId: string): Promise<Version[]>;
  getVersion(mockupId: string, versionId: string): Promise<Version>;
}

Data Structures​

Mockup​

interface Mockup {
  id: string;
  name: string;
  description?: string;
  owner: string;
  createdAt: string;
  updatedAt: string;
  latestVersion?: Version;
}

Version​

interface Version {
  id: string;
  mockupId: string;
  versionTag?: string;
  layoutData: LayoutItem[];
  createdBy: string;
  createdAt: string;
}

LayoutItem​

interface LayoutItem {
  i: string; // Unique ID
  x: number; // Grid X position
  y: number; // Grid Y position
  w: number; // Width in grid units
  h: number; // Height in grid units
  component: string; // Component type
  props: Record<string, any>; // Component properties
}

Component Palette​

Available components for mockups:

ComponentDescriptionProperties
textText blockcontent, fontSize, color
buttonButton elementlabel, variant, color
inputInput fieldplaceholder, type
cardCard containertitle, content
imageImage placeholdersrc, alt
dividerHorizontal dividerstyle
listList componentitems, style

Grid Configuration​

The canvas uses react-grid-layout:

const gridConfig = {
  cols: 12,
  rowHeight: 30,
  margin: [10, 10],
  containerPadding: [10, 10],
  compactType: "vertical",
  preventCollision: false,
};

Usage Example​

Creating a Mockup​

// Create new mockup
const mockup = await mockupApi.createMockup({
  name: "Dashboard Design",
  description: "Main dashboard layout",
});

// Save initial layout
await mockupApi.saveVersion(mockup.id, [
  {
    i: "1",
    x: 0,
    y: 0,
    w: 12,
    h: 2,
    component: "text",
    props: { content: "Dashboard" },
  },
  {
    i: "2",
    x: 0,
    y: 2,
    w: 6,
    h: 4,
    component: "card",
    props: { title: "Stats" },
  },
  {
    i: "3",
    x: 6,
    y: 2,
    w: 6,
    h: 4,
    component: "card",
    props: { title: "Chart" },
  },
]);

Loading a Mockup​

// Get mockup with latest version
const mockup = await mockupApi.getMockup('xxx');

// Render in canvas
<MockupCanvas layoutData={mockup.latestVersion.layoutData} />