Studio Overview

A comprehensive guide to the WiTwin Studio interface and panels

Interface Overview #

WiTwin Studio is a web-based 3D scene editor built with modern web technologies. It provides real-time visualization and interactive control of your RF digital twin simulations through a dockable panel system.

Technology Stack #

Frontend: React + TypeScript, Three.js/React Three Fiber
Backend: Python FastAPI with WebSocket communication
State Management: Zustand
Node Editor: React Flow

Editor Panels #

Panel	Description
Viewport	Main 3D canvas for scene visualization and object manipulation
Hierarchy	Tree view of scene objects with parent-child relationships
Properties	Inspector for editing object components and properties
Library	Asset browser for adding objects to the scene
Node Editor	Visual programming interface for shader graphs and object control
Hyperparameters	Parameter management for optimization and training
Results	Data visualization with plots, charts, and version control
Console	Real-time logging and command execution
Timeline	Animation timeline for keyframe editing
Notifications	Toast notification system for alerts and progress
Settings	Editor preferences and configuration
Extensions	Extension management and custom panels

Layout #

The editor uses a dockable panel system (Dockview) where panels can be arranged in tabs and groups:

┌─────────────────────────────────────────────────────────────┐
│                         Top Bar                              │
├──────────┬──────────────────────────────────┬───────────────┤
│          │                                  │               │
│ Hierarchy│           Viewport               │  Properties   │
│    or    │             or                   │   Results     │
│ Library  │         Node Editor              │   Console     │
│          │                                  │   Settings    │
│          ├──────────────────────────────────┤               │
│          │           Timeline               │               │
├──────────┴──────────────────────────────────┴───────────────┤
│                        Status Bar                            │
└─────────────────────────────────────────────────────────────┘

Quick Start #

Starting the Server #

from witwin import Server, Scene
 
# Create a scene
scene = Scene()
 
# Start the server (opens editor automatically)
server = Server(scene=scene)
server.start()

The editor opens automatically at http://localhost:8080.

Python API Overview #

from witwin import (
    Console,        # Logging and commands
    Results,        # Data visualization
    Notifications,  # Toast notifications
    Timeline,       # Animation control
    Library,        # Asset registration
)
 
# Console logging
Console.log("Hello, World!")
Console.warn("Warning message")
Console.error("Error message")
 
# Results visualization
Results.plot(x, y, title="My Plot")
Results.commit(message="Initial results")
 
# Notifications
Notifications.info("Title", "Message")
Notifications.progress("task_id", "Processing", 50)
 
# Timeline
Timeline.play()
Timeline.set_time(1.5)
Timeline.record()

Component System #

from witwin.components import (
    Component, component, button,
    float_field, bool_field, vector3_field
)
 
@component(name="Physics")
class PhysicsComponent(Component):
    mass = float_field(1.0, min=0.1, max=100.0)
    enabled = bool_field(True)
    velocity = vector3_field([0, 0, 0])
 
    @button(display_name="Reset")
    def reset(self):
        self.velocity = [0, 0, 0]
        return "Reset complete"

WebSocket Communication #

All real-time communication uses WebSocket:

Frontend ←──WebSocket──→ Backend (Python)

Key Features:

Optimistic UI updates for responsiveness
Debounced synchronization (300ms)
Automatic reconnection
No HTTP polling

Online Editor #

You can also access the cloud-hosted editor at editor.witwin.ai.

Next Steps #

Viewport - Learn about 3D scene visualization
Node Editor - Create visual programs
Results - Visualize data and plots
Extensions - Extend the editor