Implement visual designer for Object UI schemas by Copilot · Pull Request #1 · objectstack-ai/objectui

Copilot · 2026-01-13T11:23:24Z

Adds @object-ui/designer package - a visual editor for creating and modifying Object UI schemas through a GUI.

Components

DesignerContext: State management for schema, selection, and CRUD operations
Canvas: Live preview with click-to-select and visual highlighting
ComponentPalette: Categorized browser for 50+ components (Form, Layout, Overlay, etc.)
PropertyPanel: Dynamic forms generated from component metadata with type-specific inputs
Toolbar: JSON import/export with modal editor
Designer: Main component integrating three-column layout

Usage

import { Designer } from '@object-ui/designer';

function App() {
  const [schema, setSchema] = useState({ type: 'div', body: [] });
  return <Designer initialSchema={schema} onSchemaChange={setSchema} />;
}

Implementation Details

Real-time preview updates on property changes
Automatic ID generation for all nodes
Recursive tree operations for nested schemas
Support for both single-node and array body types
Click-to-add workflow (drag-and-drop deferred)

Documentation

English README with API reference
Chinese implementation guide
Visual layout documentation
Working demo application

Node operations handle schema mutation immutably. Selection state syncs across all panels via Context. Component metadata drives property form generation dynamically.

Original prompt

帮我开发设计器

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot

Pull request overview

This PR implements a comprehensive visual designer package for creating and modifying Object UI schemas through a graphical interface. The designer provides real-time preview, component palette, property editing, and JSON import/export capabilities.

Changes:

Added @object-ui/designer package with 6 core React components
Implemented context-based state management for schema operations
Created demo application with Vite + React 19
Added comprehensive documentation (English README, Chinese implementation guide, visual guide)

Reviewed changes

Copilot reviewed 21 out of 22 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/designer/tsconfig.json	Configured TypeScript with ES2020 target, module paths, and build settings
packages/designer/src/index.ts	Main entry point exporting Designer components, context, hooks, and types
packages/designer/src/context/DesignerContext.tsx	State management context with schema CRUD operations and helper functions
packages/designer/src/components/Toolbar.tsx	Top toolbar with JSON import/export and modal editor
packages/designer/src/components/PropertyPanel.tsx	Dynamic property editor with type-specific inputs
packages/designer/src/components/Designer.tsx	Main component integrating three-column layout
packages/designer/src/components/ComponentPalette.tsx	Categorized component browser with click-to-add functionality
packages/designer/src/components/Canvas.tsx	Live preview canvas with selection and hover highlighting
packages/designer/package.json	Package configuration with dependencies and scripts
packages/designer/VISUAL_GUIDE.md	Visual documentation of interface layout and features
packages/designer/README.md	Comprehensive usage guide with API reference
packages/designer/IMPLEMENTATION.zh-CN.md	Chinese implementation guide
examples/designer-demo/*	Complete demo application setup
DESIGNER_SUMMARY.md	Bilingual implementation summary

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-13T11:59:39Z

packages/designer/tsconfig.json

  },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "../renderer", "../ui"]


The exclude pattern '../renderer' and '../ui' use relative paths that may not work as intended from the tsconfig location. Consider using absolute patterns or verifying these paths exclude the intended directories.

Suggested change

"exclude": ["node_modules", "dist", "../renderer", "../ui"]

"exclude": ["node_modules", "dist"]

Copilot · 2026-01-13T11:59:39Z

packages/designer/src/context/DesignerContext.tsx

+
+// Helper function to ensure all nodes have unique IDs
+const ensureNodeIds = (node: SchemaNode, idPrefix = ''): SchemaNode => {
+  const nodeId = node.id || `${idPrefix}${node.type}-${Math.random().toString(36).substr(2, 9)}`;


Using Math.random() for ID generation can result in collisions. Consider using a more robust ID generation method like crypto.randomUUID() or a library like uuid for guaranteed uniqueness.

Copilot · 2026-01-13T11:59:40Z

packages/designer/src/components/Toolbar.tsx

+
+  const handleCopyJson = () => {
+    navigator.clipboard.writeText(JSON.stringify(schema, null, 2));
+    alert('Schema copied to clipboard!');


Using alert() is not user-friendly and blocks the UI. Consider using a toast notification or non-blocking feedback mechanism instead.

Copilot · 2026-01-13T11:59:40Z

packages/designer/src/components/PropertyPanel.tsx

+  };
+
+  const handleDelete = () => {
+    if (confirm('Are you sure you want to delete this component?')) {


Using confirm() is not consistent with modern UI patterns. Consider using a custom dialog component or alert-dialog from @object-ui/ui for better user experience.

Copilot · 2026-01-13T11:59:40Z

examples/designer-demo/postcss.config.js

+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../../packages/ui/src/**/*.{js,ts,jsx,tsx}",
+    "../../packages/renderer/src/**/*.{js,ts,jsx,tsx}",
+    "../../packages/designer/src/**/*.{js,ts,jsx,tsx}",
+  ],


The 'content' field is for Tailwind CSS configuration, not PostCSS. This configuration should be in tailwind.config.js. PostCSS config should only contain plugins like 'tailwindcss' and 'autoprefixer'.

Suggested change

content: [

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}",

"../../packages/ui/src/**/*.{js,ts,jsx,tsx}",

"../../packages/renderer/src/**/*.{js,ts,jsx,tsx}",

"../../packages/designer/src/**/*.{js,ts,jsx,tsx}",

],

plugins: {

tailwindcss: {},

autoprefixer: {},

},

github-actions · 2026-01-13T12:54:03Z

✅ All checks passed!

✅ Type check passed
✅ Tests passed
✅ Lint check completed

- Fix handleExportCSV to guard on gridRef.current?.api (issue #1) - Add dedicated onContextMenuAction callback instead of overloading onCellClicked (issue #2) - Remove icon property from customItems to prevent HTML injection (issue #3) - Remove validation claim from README - only basic AG Grid editing (issue #4) - Add test assertions for all new inputs (editable, exportConfig, etc.) (issue #5) - Fix onExport type to only support 'csv' format (issue #6) - Remove unused ColumnConfig properties (autoSize, groupable) (issue #9) - Type schema props with proper interfaces instead of 'any' (issue #10) - Update export description to only mention CSV (issue #11) - Add AG Grid Community vs Enterprise section to docs (issue #8) - Update README and docs with new callback and clarifications All tests pass (8/8), lint clean (0 errors) Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

…warning, i18n fallback - Issue #1: Normalize `in`/`not in` operators to backend-compatible `or`/`and` of `=`/`!=` - Issue #2: Filter merging now validates and filters empty conditions - Issue #3: CSV export safely serializes arrays (semicolon-separated) and objects (JSON) - Issue #5: Request counter prevents stale data from overwriting latest results - Issue #6: PullToRefresh resets pull distance immediately to prevent UI lock - Issue #7: $top configurable via schema.pagination, data limit warning shown - Issue #8: Extended i18n fallback translations for all ListView labels - Issue #9: Defensive null checks in effectiveFields for mismatched objectDef - Issue #10: Added FilterNormalization, Export, and DataFetch test suites Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Initial plan

0914016

Copilot AI assigned Copilot and huangyiirene Jan 13, 2026

Copilot started work on behalf of huangyiirene January 13, 2026 11:23 View session

Copilot AI and others added 4 commits January 13, 2026 11:31

Add designer package implementation with core components

d6cd72a

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Add designer documentation in English and Chinese

49fc280

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Add visual guide for designer interface

4842ed4

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Add bilingual implementation summary

e4bde45

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add designer feature to application~~ Implement visual designer for Object UI schemas Jan 13, 2026

Copilot AI requested a review from huangyiirene January 13, 2026 11:38

Copilot finished work on behalf of huangyiirene January 13, 2026 11:38

huangyiirene requested review from Copilot and removed request for huangyiirene January 13, 2026 11:58

Copilot AI reviewed Jan 13, 2026

View reviewed changes

hotlong added 5 commits January 13, 2026 20:37

移除不必要的 React 导入并更新 tsconfig.json 以支持设计器功能，添加基础 CSS 样式文件

b7403f1

更新 PostCSS 和 Tailwind 配置以支持设计器功能，添加自定义颜色和边框半径

74dace3

为设计器功能更新 tsconfig 配置，添加对 @object-ui/ui 的路径支持

031faff

Merge branch 'main' into copilot/add-designer-feature

d3a78d4

更新 tsconfig 配置，添加对测试文件的排除规则

d1f0d0c

huangyiirene marked this pull request as ready for review January 13, 2026 12:53

huangyiirene merged commit 9c5497b into main Jan 13, 2026
2 of 5 checks passed

Copilot AI mentioned this pull request Jan 23, 2026

Enhance playground examples to demonstrate complete component library #170

Merged

This was referenced Feb 16, 2026

fix: resolve CI failures — coverage threshold and E2E webserver timeout #553

Merged

fix(ListView): normalize filter AST, safe export, request debounce, data limit warning #659

Merged

Copilot AI mentioned this pull request Feb 21, 2026

feat(plugin-designer): P1.1 Designer Interaction — ViewDesigner + DataModelDesigner #686

Merged

hotlong mentioned this pull request Feb 22, 2026

通用 Schema-Driven 配置面板框架建设及全平台接入 #731

Closed

21 tasks

Copilot AI mentioned this pull request Mar 31, 2026

Fix dashboard to not display hardcoded data on server errors #1152

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement visual designer for Object UI schemas#1

Implement visual designer for Object UI schemas#1
huangyiirene merged 10 commits intomainfrom
copilot/add-designer-feature

Copilot AI commented Jan 13, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 13, 2026

Uh oh!

Copilot AI Jan 13, 2026

Uh oh!

Copilot AI Jan 13, 2026

Uh oh!

Copilot AI Jan 13, 2026

Uh oh!

Copilot AI Jan 13, 2026

Uh oh!

Uh oh!

github-actions bot commented Jan 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	"exclude": ["node_modules", "dist", "../renderer", "../ui"]
	"exclude": ["node_modules", "dist"]

Conversation

Copilot AI commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Components

Usage

Implementation Details

Documentation

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Jan 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Copilot AI commented Jan 13, 2026 •

edited

Loading