Configuration & Environment
Relevant source files
The following files were used as context for generating this wiki page:
Configuration and environment management in Rocreate facilitates a high-performance painting environment by separating development-time tools from production-ready distribution. The system relies on a combination of environment variables, build scripts, and specialized development modules to manage application state and rendering performance.
The environment is built around the Bun runtime and Parcel bundler, targeting modern browsers with a specific focus on CanvasKit (WebAssembly) and GPU acceleration.
Sources: CLAUDE.md, package.json, cubic.yaml
Development Environment & Tooling
Rocreate utilizes Bun as its primary package manager and runtime for development tasks. The development cycle is heavily dependent on the compilation of language files before the application can be successfully initialized.
Core Development Commands
The project defines specific scripts for different build targets and development modes.
| Command | Description |
|---|---|
bun run start | Starts the Parcel development server for the standalone application. |
bun run dev | Starts the server with DEV_MODE=true and Hot Module Replacement (HMR). |
bun run build | Builds the standalone production version into the /dist/ directory. |
bun run build:embed | Builds the specialized widget version of the application. |
bun run lang:build | Mandatory step to generate TypeScript/JSON language files from JSON5 sources. |
Sources: CLAUDE.md:12-20, package.json:20-29
Build Pipeline Configuration
The build pipeline is managed by Parcel, which includes transformers for GLSL shaders and SASS styles, reflecting the application's reliance on GPU rendering.
The diagram shows the relationship between source assets, the translation build step, and the final build targets.
Sources: package.json:32-45, CLAUDE.md:21-23
Application Configuration
The application's behavior is governed by environment flags and specialized configuration objects that determine which features are active during runtime.
Development Mode (DEV_MODE)
Development mode is triggered via the DEV_MODE environment variable. When active, it enables a suite of debugging tools and suppresses certain production behaviors, such as reload prompts.
| Key | Type | Description |
|---|---|---|
IS_DEV_MODE | Boolean | Global flag exported from dev-config.ts. |
DEV_CONFIG | Object | Contains specific toggles for experimental or debugging features. |
Sources: src/app/script/dev/index.ts:14-15, src/app/script/dev/dev-config.ts
Initialization Sequence
The application follows a strict initialization sequence in main-standalone.ts, ensuring that the environment is fully prepared (languages loaded, storage connected) before the main KlApp instance is created.
This sequence ensures that the environment is valid before the user interface is appended to the DOM.
Sources: src/app/script/main-standalone.ts:31-70
Development Tools & Debugging
When IS_DEV_MODE is enabled, the application initializes the DevTools module, providing architectural insights and element inspection capabilities.
Element Inspector
The Element Inspector is a "React Grab-style" utility that allows developers to inspect UI components directly in the browser. It is toggled via the Ctrl+Shift+G shortcut and provides detailed metadata about DOM elements, including computed styles and dimensions.
- Key Function:
initElementInspector() - Trigger: pink glow floating button or keyboard shortcut.
- Output: Contextual information (TagName, ID, Styles) copied to the clipboard in Markdown format.
Sources: src/app/script/dev/index.ts:18-28, src/app/script/dev/element-inspector.ts:16-40
Repository Guidelines
The cubic.yaml and CLAUDE.md files define the environmental constraints for automated tools and contributors.
Performance & Safety Rules
Rocreate enforces strict rules regarding graphics performance and type safety.
- Graphics Focus: Heavy lifting is delegated to
CanvasKit(Skia WASM) to minimize CPU-to-GPU data transfer. - Type Safety: Mandatory strict typing for all CanvasKit and WebGL interactions to prevent runtime errors in the rendering pipeline.
- Performance Watch: Automated flagging of regressions in
src/rendering/andsrc/input/.
Sources: cubic.yaml:18-35, CLAUDE.md:46-52
Summary
The Rocreate configuration and environment are designed to support a high-performance graphics stack. By utilizing a pre-initialization build step for languages and a robust development mode with specialized inspectors, the project ensures that rendering performance and UI consistency are maintained throughout the development lifecycle. This architecture effectively separates the heavy-duty WebAssembly rendering requirements from the application's UI logic.