URDF Studio

Visual URDF Builder & Editor for ROS — a VS Code extension for creating, importing, editing, and exporting URDF robot descriptions with a live 3D viewport. Works entirely inside VS Code with no ROS installation required.

Features

Create robots visually — start from an empty base link and add Box, Cylinder, Sphere, or Mesh links plus joints from the toolbar.
Import & edit existing URDF — open any .urdf / .xacro file in the custom editor; links, joints, materials, visuals, collisions, inertials, and the hierarchy are parsed into an editable model.
Live 3D viewport (Three.js) — grid, axes, orbit controls, transform gizmos (move / rotate / scale), selection highlight, fit & reset camera, and toggles for grid, wireframe, and collision geometry. Forward kinematics reflect the joint tree.
Mesh loading — .stl, .obj, and .dae mesh files load and render in the viewport. package://<pkg>/... paths are resolved without ROS: the extension locates the package via any package.xml in the workspace, and also tries paths relative to the URDF file (e.g. a meshes/ folder beside or one level above it), absolute paths, and file:// URIs. Meshes that can't be found fall back to a placeholder box (check the URDF Studio warnings in the webview Developer Tools console for the locations tried).
Robot tree — hierarchical view of links and joints; click to select and highlight in the viewport.
Property panel — edit names, origins (XYZ / RPY), geometry parameters, materials (RGBA), mass and inertia, joint type, parent/child, axis, and limits. Everything updates instantly.
Two-way live XML — the generated URDF is always visible and editable. Visual edits regenerate the XML; XML edits re-parse into the viewport.
Validation — duplicate links/joints, broken joints, missing parent/child, missing mesh filenames, negative mass, and invalid XML.
Export URDF — write robot.urdf to a location you choose.
Export STL — generate binary STL meshes from the current model: the whole robot as a single file (baking the joint-tree pose into world space) via the STL button, or one file per link in its own frame via STL / link (choose a destination folder). Both are also available from the Command Palette. STL carries geometry only (no color/material); links that are only showing a placeholder box are skipped.

Commands

URDF Studio: New Robot
URDF Studio: Open URDF
URDF Studio: Save
URDF Studio: Export
URDF Studio: Reset Camera

.urdf and .xacro files open in the URDF Studio custom editor by default.

Development

npm install
npm run compile   # builds the webview (Vite) and the extension (tsc)

Press F5 in VS Code to launch an Extension Development Host, then run URDF Studio: New Robot from the Command Palette or open a .urdf file.

Scripts

Script	Description
`npm run build`	Build webview + extension
`npm run build:webview`	Build the React/Three.js webview with Vite
`npm run build:extension`	Compile the extension host with `tsc`
`npm run lint`	Run ESLint
`npm run format`	Run Prettier
`npm run package`	Package a `.vsix` with `vsce`

Architecture

src/
├── extension/        VS Code extension host (custom editor + commands)
│   ├── commands/     New-robot template
│   └── utils/        Webview HTML / CSP builder
├── shared/           Types & message protocol shared by host and webview
└── webview/          React + Three.js UI
    ├── components/    Toolbar, TreeView, PropertyPanel, XmlPanel, Viewport, SplitPane
    ├── three/         SceneManager + robot scene-graph builder
    ├── parser/        URDF XML -> model (fast-xml-parser)
    ├── generator/     model -> URDF XML
    ├── validation/    Model validation rules
    └── state/         Reducer with undo/redo

The extension registers a CustomTextEditorProvider, so the underlying text document is the single source of truth and integrates with VS Code save/undo.

License

MIT

Pauli ROS URDF Editor

Piyush