Add Alpine.js visual database schema editor plugin

[Copilot]

Implements a visual database schema editor as an Alpine.js plugin with interactive canvas controls, table management, and relational modeling capabilities.

Implementation

Core Plugin (src/index.js)

• Alpine component exposing databaseEditor data API
• Canvas state management (pan, zoom, viewport transforms)
• Table/field CRUD operations with reactive updates
• Relation rendering via dynamically generated SVG paths

Features

• Pan (shift+drag, middle-click) and zoom (scroll wheel, 20-200%)
• Right-click context menu for table creation
• Drag tables by header, double-click name to edit
• Add/remove fields with 8 SQL data types
• Create relations by dragging between field handles (blue circles)
• Curved SVG lines for relationships, recalculated on table movement

Build Output

• ESM bundle: 8.8KB (5.1KB minified)
• Standalone demo with bundled Alpine.js: 113KB
• Zero dependencies beyond Alpine.js peer dependency

Usage

<script type="module">
  import databaseEditor from './dist/alpine-database-editor.js';
  Alpine.plugin(databaseEditor);
</script>

<div x-data="databaseEditor">
  <div 
    @contextmenu="onCanvasContextMenu($event)"
    @wheel="onCanvasWheel($event)"
    x-ref="canvas">
    <!-- Canvas content -->
  </div>
</div>

Demo

Users and Posts tables with foreign key relation (user_id → id)

Interactive demo files in demo/ directory demonstrate all features. Run npm run build:demo and open demo/standalone.html.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• unpkg.com
  • Triggering command: curl -o alpine.min.js REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Create an Alpine.js plugin for a visual database schema editor.
Features:

1. A pannable and zoomable canvas.
2. Right-click context menu on canvas to create new, draggable tables.
3. Tables have an editable name.
4. Users can add/remove fields to tables and set each field's data type.
5. Users can create relations by clicking a handle on a field and dragging a line to connect it to another field.

---

💡 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.