Viji SDK

Development environment for Viji scenes. Write scene code in your IDE, preview it live in the browser with real-time parameter controls, audio analysis, video input, and interaction handling — the same execution environment as the Viji platform. Supports Canvas 2D, WebGL, P5.js, and GLSL shaders.

Installation

Requires Node.js v18 or later.

npm install -g @viji-dev/sdk

To update to the latest version:

npm update -g @viji-dev/sdk

Quick Start

# Create a workspace folder (any name works)
mkdir my-viji-scenes && cd my-viji-scenes

# Create your first scene (native renderer is the default)
viji create my-scene

# Start the development server
viji dev

Open http://localhost:3000 in your browser to see the SDK UI. Edit scenes/my-scene/main.js in your IDE — changes appear in real time. Both JS and TS scenes get full autocompletion for the Viji API.

CLI Commands

viji create <scene-name> [--renderer <type>] [--ts]

Create a new scene in the scenes/ folder.

• viji create my-scene — native renderer (Canvas 2D / WebGL), the default
• viji create my-scene --renderer p5 — P5.js renderer
• viji create my-scene --renderer shader — GLSL fragment shader
• viji create my-scene --ts — TypeScript scene file (works with any renderer)

On the first run, the SDK installs type definitions locally for IDE autocompletion. This creates node_modules/ and package.json in your workspace, and tsconfig.json + global.d.ts inside each scene folder — all auto-generated, no manual setup needed. Each scene is isolated so they don't interfere with each other in your editor.

viji dev [--port <port>] [--host <host>] [--open]

Start the development server with live reload.

| Option | Default | Description | |--------|---------|-------------| | --port | 3000 | Server port | | --host | localhost | Server host | | --open | false | Open browser automatically |

The server watches the scenes/ directory for changes and pushes updates to the browser UI in real time via WebSocket.

On startup, viji dev checks whether the workspace's type definitions match the SDK version. If you've updated the SDK and the local types are out of date, they are updated automatically — no manual steps needed. This keeps IDE autocompletion in sync with the runtime.

viji build <scene-name> [-o <file>]

Bundle a scene into a single file for deployment to the Viji platform.

viji build my-scene                       # outputs dist/my-scene.js
viji build my-scene -o bundle/output.js   # custom output path

Multi-file scenes (with local imports) are resolved and concatenated automatically.

Writing Scenes

The SDK includes built-in documentation for the Viji scene API, parameter system, renderers, audio/video analysis, and interaction handling.

Start the development server and open the docs panel from the toolbar, or navigate directly to http://localhost:3000/docs.

The documentation includes live code playgrounds where you can experiment with the API directly in the browser.

Project Structure

After creating a few scenes, your workspace looks like this:

my-viji-scenes/
├── scenes/
│   ├── my-scene/
│   │   ├── main.js
│   │   ├── global.d.ts        # type definitions (auto-generated)
│   │   └── tsconfig.json      # IDE config (auto-generated)
│   ├── shader-demo/
│   │   └── main.glsl
│   └── p5-sketch/
│       ├── main.js
│       ├── global.d.ts
│       └── tsconfig.json
├── node_modules/              # type packages (auto-generated)
└── package.json               # auto-generated

License

Copyright (c) 2025 Artem Verkhovskiy and Dmitry Manoilenko. All rights reserved — see the LICENSE file for details.

Contributor License Agreement

By contributing, you agree to the CLA. Please also confirm your agreement by filling out this short form.