Introduction to Graphite
Relevant source files
The following files were used as context for generating this wiki page:
Graphite is a free, open-source procedural 2D graphics engine and editor. It uniquely combines traditional layer-based compositing with a node-based generative design workflow, allowing for 100% nondestructive editing. Built primarily in Rust and compiled to WebAssembly, it is designed to run locally in the browser or as a native desktop application for Windows, Mac, and Linux.
Sources: README.md:5-15, website/content/about.md:12-20, website/content/_index.md:270-285
Core Architecture and Components
The Graphite codebase is structured as a collection of modular components, similar to a game engine. It is divided into three primary layers: the Frontend, the Editor (Backend), and the Graphene node engine.
System Overview Diagram
This diagram illustrates the high-level relationship between the three main tiers of the Graphite architecture.
Software Layers
| Component | Primary Location | Technology | Description |
|---|---|---|---|
| Frontend | /frontend/src | TypeScript, Svelte, SCSS | The GUI layer. Reactive components that handle user input and display state updates. |
| Editor | /editor | Rust (WebAssembly) | Core business logic, application state, tooling, and the internal message system. |
| Graphene | /node-graph | Rust | The node graph engine. Manages and renders documents; acts as a custom programming language and runtime. |
Sources: website/content/volunteer/guide/codebase-overview/_index.md:32-52
Communication Infrastructure
Graphite utilizes a message-based architecture for communication between the frontend and the backend. This decouples the UI representation from the underlying business logic and state management.
Frontend-Backend Interop
Communication is handled through a translation layer that bridges Rust and TypeScript:
- Frontend to Backend: TypeScript calls autogenerated functions provided by
wasm-bindgen. These call into a wrapper ineditor_wrapper.rs, which interacts with the backend's message system. - Backend to Frontend: The backend queues
FrontendMessageobjects. These are mapped to JavaScript data structures inmessages.ts.
Message Flow Diagram
The following sequence diagram shows how a user interaction travels from the UI to the backend and back.
Development Environment and Tooling
The project is built on a modern Rust and Node.js toolchain. It utilizes automated checks to maintain code quality across both the frontend and backend.
Required Dependencies
- Rust: Latest stable release (required for the Backend and Graphene engine).
- Node.js: Latest LTS version (required for the Frontend and build toolchain).
- Git: Recent version for repository management.
Sources: website/content/volunteer/guide/project-setup/_index.md:12-18
Build and Quality Commands
| Command | Environment | Purpose |
|---|---|---|
cargo run | Root | Checks dependencies, starts the development server (default: port 8080). |
cargo fmt | Root | Formats Rust code according to project standards. |
cargo clippy | Root | Lints Rust code for common errors and improvements. |
npm run fix | /frontend | Automatically fixes formatting and quality issues in TS/Svelte files. |
Sources: website/content/volunteer/guide/project-setup/_index.md:25-50, frontend/README.md:27-35
Project Mission and Organization
Graphite is 100% built by volunteers and funded by community donations. It is operated by Graphite Labs, LLC, an organization owned by the project founder, Keavon Chambers.
Core Values
- Accessibility: Built to be user-friendly and modern while remaining free and open source.
- Nondestructive Workflow: Borrowing 3D software concepts (like node graphs from Houdini/Blender) for 2D graphics.
- Privacy: Runs locally and privately on the user's hardware with no server-side processing.
Sources: website/content/about.md:5-30, README.md:40-50, website/content/_index.md:280-285
Summary
Graphite is a sophisticated 2D graphics suite that leverages Rust's performance and WebAssembly's portability. By implementing a node-based architecture (Graphene) underneath a lightweight Svelte frontend, it provides a high-performance environment for vector art, raster editing, and procedural design. The project's mission is to provide professional-grade creative tools that are accessible to all without the restrictions of proprietary software.