Start: Press N to add your first node
100%
SNAP 12px

Start building your topology

This editor is keyboard-first. Begin with a node, then connect it with links.

  • N add-node tool · L draw link · V select (click canvas to place)
  • Click + drag on empty canvas to box-select multiple items
  • ? opens the complete shortcut guide any time
Layers
Properties
Select a node, link, or anchor to edit its properties.
▶ Choreography Click to expand
0 selected Align
Space
Tool: Select x: 0, y: 0 Nodes: 0 · Links: 0 · Steps: 0 Tip: press N to add a node Zoom: 100% History: 0 Snap: 12px Timeline Live Sync
Save as HTML 

  







  

    
Import HTML  

    

      
Paste exported designer code below. Supports the generated topo.node(), topo.link(), etc. format.

      
    

  







  

    
Import JSON  

    

      
Paste a JSON snapshot exported from the editor (File → Save as JSON).

      
    

  







  

    
Import Custom Node  

    

      
Paste the TopologyDesigner.registerNodeType(...) code generated by the Node Designer.

      
    

  







  

    
Add Elements to Phase 

    

  







  

    
Choreographer Builder

    

      
      
      
      
    

    

    
    
    

    
    
  

  

    
    

      
      

        

          Available Nodes
          
        

        
        

      

      
      
      
      
      
      
    

    
    

      
      

        
        
        Step 0 / 0
        
        
        

        
      

    

  







  
Basic

  
Appear (fade + rise)

  
Draw (stroke path)

  
Directional

  
Wipe Left ←

  
Wipe Right →

  
Wipe Up ↑

  
Wipe Down ↓

  
Cascade (diagonal)

  
Dynamic

  
Zoom In

  
Pop (overshoot)

  
Bounce (drop in)

  
Flip (3D Y-axis)

  
Flip Up (3D X-axis)

  
Glow (energy burst)







  

    
Auto Layout 

    

      

        
        
      

      

        
        
      

      

        
        
      

      

        
        
      

      

        
        
      

      

        
      

      
Layout will arrange nodes in hierarchical tiers based on link connections.

      

        
Quick Layout (LayoutEngine)

        

          
          
          
          
          
        

      

    

  











  

    
Keyboard Shortcuts

    

      
Tools

      VSelect tool
      NAdd node
      LDraw link
      MMulti-point link
      APlace anchor
      HPan tool (hand)
      GToggle snap to grid
      RToggle guide visibility
      PToggle step preview
      
Editing

      Ctrl+ZUndo
      Ctrl+Shift+ZRedo
      Ctrl+ASelect all objects
      Ctrl+CCopy selection
      Ctrl+VPaste
      Ctrl+FFind / jump to object
      Del / BackspaceDelete selection
      EscapeDeselect / cancel
      
Selection

      Click + DragMarquee select (empty canvas)
      Shift + ClickAdd/remove from selection
      Shift + MarqueeAdd to existing selection
      Shift+TToggle isometric tilt
      
Canvas

      + / =Zoom in
      -Zoom out
      0Zoom to fit
      Space + DragPan canvas
      ScrollZoom at cursor
      
Guides

      RToggle guide visibility
      Drag handleReposition guide
      Double-click handleRemove guide
      
Links

      1Straight line style
      2Orthogonal line style
      3Curved line style
      Double-click waypointRemove waypoint
      
Other

      ?Show this help