@makemind/app-builder-ui

The App Builder's editing surface: a component palette, a canvas and a property panel, as React components. It reaches no service and imports no router — you supply the data and the navigation.

Most integrations want @makemind/app-builder instead, which is this package plus a data source and one component to mount. Use this one when you want your own arrangement of the panels, or only the palette.

Install

npm install @makemind/app-builder-ui

react and react-dom (18 or newer) are peers.

The whole editor, unwired

import { BuilderWorkspace } from '@makemind/app-builder-ui';
import '@makemind/app-builder-ui/styles.css';

<BuilderWorkspace
  page={page}                       // { id, name, path, title, components }
  pages={pages}
  onSave={(components) => save(components)}
  onSelectPage={(id) => open(id)}
/>

BuilderWorkspace owns the component tree and the seven edits you can make to it (drop, move, select, update, delete, duplicate, and the keyboard shortcuts for them). It hands the result to onSave and tracks whether anything is unsaved — it is the only thing that can know, since it holds the tree.

onSave may be async. The dirty flag clears when it resolves; if it rejects, "Unsaved changes" stays up, because at that moment the tree exists only in the browser.

The panels on their own

import { ComponentPalette, Canvas, PropertyPanel } from '@makemind/app-builder-ui';

Lay them out however you like. Canvas takes components and reports drops and moves; PropertyPanel takes the selected node and reports updates.

The catalog, without React

import { componentRegistry, PUBLISHABLE_TYPES, isPublishable }
  from '@makemind/app-builder-ui/catalog';

A separate entry point carrying the palette as data — every component definition, its properties, defaults and category. No React, so it can be read from a Node script: build a page programmatically, validate one, or generate documentation from the palette rather than from a copy of it.

What is in the palette

108 component types are declared. 56 are publishable — those are the ones the palette offers, the canvas draws and the publisher emits. PUBLISHABLE_TYPES is that list, and isPublishable(type) is the question.

The 56 are rendered by 27 widget components (several types share a renderer), covering layout, typography, media, form inputs, data display, navigation, feedback and AI.

Types

ComponentNode is the tree. ComponentType is the closed union of what may go in it. Both are exported, and both are the canonical declarations — the canvas, the palette, the property panel and the emitter all read these, so a document written by this editor is described by exactly one type.

Theming

Everything is styled with CSS custom properties, and the package ships defaults for all 37 at specificity zero (:where()), for light and dark. Define any of them on :root and yours win with no override gymnastics.

Developing against a checkout

Linked from source, your bundler will resolve two copies of React and every hook here reads null. Add resolve.dedupe: ['react', 'react-dom']. Installed from the registry this cannot happen — React is a peer.