Tangramino

English | 简体中文

A schema-driven low-code framework for building visual editors and workflow designers.

✨ Features

Feature	Description
🎯 Schema-Driven	JSON-based architecture defining UI structure, behavior, and data flow
🔌 Framework Agnostic	Core engine is UI-independent, with React bindings provided
🎨 Visual Editing	Production-ready drag-and-drop editor and flow designer
🔧 Plugin System	Extensible architecture supporting custom plugins
📦 Modular	Use engine alone or build complete editing experiences
🛡️ Type-Safe	Full TypeScript support

📦 Core Packages

Package	Description	Version
@tangramino/engine	Framework-agnostic JSON Schema engine
@tangramino/react	React view rendering library
@tangramino/base-editor	Visual drag-and-drop editor framework
@tangramino/flow-editor	Professional flow diagram editor

🎯 How to Choose?

Your Goal	Recommended Package
Build a drag-and-drop page editor	@tangramino/base-editor
Build a workflow/flow designer	@tangramino/flow-editor
Schema engine and React view rendering	@tangramino/engine + @tangramino/react
Learn from a complete example	playground/antd-demo

🏗️ Architecture

┌─────────────────────────────────────────────────────────┐
│  Editor Layer (@tangramino/base-editor, flow-editor)    │
│  • Drag & Drop  • Material System  • Canvas & Selection │
└────────────────────────────┬────────────────────────────┘
                             │
┌────────────────────────────▼────────────────────────────┐
│         View Layer (@tangramino/react)                  │
│  • Component Rendering  • Hooks & HOC  • Event Binding  │
└────────────────────────────┬────────────────────────────┘
                             │
┌────────────────────────────▼────────────────────────────┐
│         Engine Layer (@tangramino/engine)               │
│  • Schema Management  • Event System  • State Control   │
└─────────────────────────────────────────────────────────┘

🚀 Quick Start

Building an Editor

npm install @tangramino/base-editor

import React from 'react';
import { EditorProvider, CanvasEditor, Draggable, useEditorCore } from '@tangramino/base-editor';

const materials = [
  {
    type: 'button',
    title: 'Button',
    Component: (props) => <button {...props}>{props.children || 'Click'}</button>,
    defaultProps: { children: 'Button' },
  },
];

function App() {
  return (
    <EditorProvider materials={materials}>
      <div style={{ display: 'flex', height: '100vh' }}>
        <MaterialPanel />
        <CanvasEditor style={{ flex: 1 }} />
      </div>
    </EditorProvider>
  );
}

function MaterialPanel() {
  const { materials } = useEditorCore();
  return (
    <div style={{ width: 200, padding: 16 }}>
      {materials.map((m) => (
        <Draggable key={m.type} material={m}>
          <div style={{ padding: 8, border: '1px solid #ddd', marginBottom: 8, cursor: 'move' }}>
            {m.title}
          </div>
        </Draggable>
      ))}
    </div>
  );
}

Flow Editor

import { FlowEditor, EditorRenderer } from '@tangramino/flow-editor';

const nodeTypes = [
  {
    type: 'start',
    title: 'Start',
    renderNode: () => <div className='node-start'>Start</div>,
  },
  {
    type: 'action',
    title: 'Action',
    renderNode: ({ data }) => <div className='node-action'>{data.name || 'Action'}</div>,
  },
];

function App() {
  const [flowData, setFlowData] = useState({ nodes: [], edges: [] });

  return (
    <FlowEditor nodes={nodeTypes} value={flowData} onChange={setFlowData}>
      <EditorRenderer />
    </FlowEditor>
  );
}

Basic Mode

import { createEngine } from '@tangramino/engine';
import { ReactView } from '@tangramino/react';

const schema = {
  elements: {
    root: { type: 'container', props: {} },
    'btn-1': { type: 'button', props: { children: 'Click Me' } },
  },
  layout: { root: 'root', structure: { root: ['btn-1'] } },
};

const engine = createEngine(schema);

function App() {
  return (
    <ReactView
      engine={engine}
      components={{
        container: ({ children }) => <div>{children}</div>,
        button: (props) => <button {...props} />,
      }}
    />
  );
}

💡 Demo

Explore our production-ready demo with 25+ Ant Design components:

git clone https://github.com/keiseiTi/tangramino.git
cd tangramino
pnpm install
pnpm dev:antd  # http://localhost:5173

Features: Material Panel • Visual Canvas • Property Editor • Undo/Redo • Schema Operation • Preview • Flow Designer

📖 Documentation

• Getting Started
• Schema Concepts
• Material System
• Plugin Development
• API Reference

🛠️ Development

pnpm install     # Install dependencies
pnpm watch       # Watch mode
pnpm dev:antd    # Run demo
pnpm build       # Build all packages

🤝 Contributing

We welcome contributions! See Contributing Guide.

📄 License

MIT © Tangramino