Develop – Creative Coding IDE

The Develop module is your creative workbench. Here you write code, see live previews, and control parameters in real-time.

Overview

Feature Description
Monaco Editor VS Code editor in browser
Grid View Multi-artwork preview
Parameter Panel Tweakpane integration
Sockets Real-time communication

Editor

The integrated Monaco Editor offers:

  • Syntax highlighting for TypeScript/JavaScript
  • IntelliSense with cc-toolbox types
  • Error markers
  • Multi-cursor editing

Keyboard Shortcuts

Shortcut Action
Cmd+S Save & Hot Reload
Cmd+P Quick Open
Cmd+Shift+F Search & Replace
Cmd+/ Toggle Comment

Grid View

The Grid View displays multiple artworks simultaneously:

┌─────────┬─────────┬─────────┐
│ Artwork │ Artwork │ Artwork │
│   1     │   2     │   3     │
├─────────┼─────────┼─────────┤
│ Artwork │ Artwork │ Artwork │
│   4     │   5     │   6     │
└─────────┴─────────┴─────────┘

Configuration

{
  "grid": {
    "columns": 3,
    "rows": 2,
    "gap": 8
  }
}

Starting the Grid

  1. Select artworks in the Catalog
  2. Click Grid View or press F5
  3. Artworks are loaded in separate webviews

Socket Communication

Artworks communicate with the Studio via sockets:

┌──────────┐     Sockets       ┌──────────┐
│  Studio  │◄─────────────────►│ Artwork  │
│ (Port    │                   │ (Port    │
│  3090)   │                   │  3001+)  │
└──────────┘                   └──────────┘

Room Structure

Room Purpose
studio Studio UI
artwork:{id} Specific artwork
logs Centralized logging

Messages

// Request parameter dump
socket.emit('request-parameter-dump', { 
  targetRoom: 'artwork:item-001' 
});

// Receive parameters
socket.on('parameter-dump', (data) => {
  console.log(data.payload);
});

Parameter Panel

The Tweakpane panel displays all artwork parameters:

  • Sliders for numeric values
  • Color Pickers for colors
  • Folders for grouping
  • Buttons for actions

Sync Mode

Mode Behavior
Live Changes transmitted immediately
Manual Changes sent only on click

Hot Reload

On code changes:

  1. Studio detects file change
  2. Artwork is rebuilt (Webpack)
  3. Webview is refreshed
  4. Parameters are preserved (when possible)

Debugging

Opening DevTools

  • Cmd+Option+I – Webview DevTools
  • Cmd+Shift+I – Main Window DevTools

Log Output

All console.log from artworks are displayed in the Studio Log Panel:

// In the artwork
console.log('Frame:', frameCount);

// Appears in Studio Log Panel
[artwork:item-001] Frame: 42