Preview
Pixi Preview
Matter Preview
Manual

Overview

This editor lets you build compound bodies from basic shapes or custom vertices, preview them with Matter.js, and export JSON or code.

Canvas

Set Width/Height and click Apply Size. You can change size only when the scene is empty or only a background is loaded.

Reset Project clears everything and allows you to resize again.

Shapes

Select a tool (Rectangle, Circle, Polygon, Vertices) and click inside the Pixi preview to add a shape.

Paste is enabled after you copy a selection. Paste places the copy at your click position.

Transform Controls

Drag to move. Use the rotation handle to rotate (disabled for circles).

Use the scale handle to resize. Hold Shift for free scaling (non-uniform).

Arrow keys nudge the selected shape (Shift = larger step). Delete removes.

Vertices Workflow

Vertices tool adds points. Hold Ctrl and drag a point to move it.

Use Node Tools: New Vertices Shape creates a new vertices object; Edit Existing Vertices edits the focused one.

Params Panel

Tool Defaults affect the next shape you add.

Selected Shape lets you edit position, scale, angle, and shape-specific parameters.

Chamfer: Only rectangles preview chamfer in Pixi (other shapes show in Matter).

Advanced Vertex Chamfer lets you set per-vertex radius. Apply buttons commit changes.

Testing (Matter)

Static Test creates a non-moving compound body. Dynamic Test uses gravity.

Dynamic and Auto Refresh are mutually exclusive. Clear Body removes test bodies only.

Auto Refresh Static re-creates the static body periodically.

Export

Export creates JSON data and ready-to-paste Matter.js code.