DOCSEARCHbyAlgolia
Submit Docs

Graphite

repository·master·Indexed 12 days ago

https://github.com/graphiteeditor/graphite

An open-source, procedural 2D graphics engine combining layer-based compositing with node-based generative design for vector and raster content. It features a Svelte and TypeScript frontend and a Rust backend compiled to WebAssembly (Wasm).

Tokens
95.5K
Snippets
237
Records
471
Agent score
99%

What's inside Graphite

  1. Overview of Graphite graphics engine

    master

    Graphite is a free, open-source vector and raster graphics engine designed with a fully nondestructive editing workflow. It combines layer-based compositing with a node-based generative design core. Unlike conventional creative applications, Graphite is built more like a game engine, where editor tools wrap a central node graph core to provide workflows for vector and raster graphics.

    Key capabilities include:

    • Vector and Raster editing: Core functionality for 2D content creation.
    • Nondestructive workflows: Uses a node graph to allow for generative and reversible design.
    • Planned roadmap: Future support for photo editing, motion graphics, digital painting, desktop publishing, and VFX compositing.

  2. What is Graphene?

    master

    Graphene is the node graph engine that powers the Graphite editor. It functions as a render engine, runtime environment, procedural data processor, and a node-based scripting system. Conceptually, it is a compiled programming language with a compiler toolchain built around rustc.

    In Graphene, artwork is represented as a node graph that acts as source code. Modifying the graph (adding layers, changing parameters, etc.) changes the program that generates the artwork, requiring the graph to be recompiled and executed.

  3. Overview of Graphite

    master

    Graphite is a free, open-source 2D graphics suite and animation engine. It is designed as a procedural toolbox for content creation, utilizing a fully nondestructive editing workflow.

    Key characteristics include:

    • Nondestructive Workflow: Combines layer-based compositing with node-based generative design.
    • Hybrid Core: Built like a game engine, the editor's tools wrap a node graph core to support vector, raster, and animation workflows.
    • Platform Availability: Designed to be desktop-first but web-ready, running locally in a browser without requiring signup.
    • Supported Exports: Users can export content in SVG, PNG, and JPG formats.

  4. What is Graphite?

    master
    Graphite is a community-built, free, and open-source 2D creative tool. It is designed as a procedural, nondestructive design tool that borrows concepts from 3D software to provide a modern graphics editing experience. It features a node-based workflow intended to cater to both casual users and professional artists.

  5. Understand the required experience level for Graphite contributors

    master

    Graphite is a complex, cutting-edge software engineering project. It is not intended for beginner programmers or as a learning platform for inexperienced developers.

    Prerequisites:

    • A strong grasp of programming principles (a solid computer science foundation).
    • Junior-level developer experience or a self-motivated student who has completed multiple non-trivial personal projects (ideally involving graphics).
    • While Rust is the primary language, you do not need to know it beforehand; you can learn it as you contribute.

    Note on AI Tools: If you use AI tools in your workflow, you must adhere to the project's AI contribution policy. AI tools and agents are not considered a substitute for individual engineering skills and experience.

  6. Upcoming Roadmap: Desktop App, Animation, and Procedural Editing

    master

    Graphite is evolving towards a more powerful, native, and feature-rich creative suite. Key upcoming developments include:

    Desktop Application

    Graphite is moving away from a simple Electron wrapper in favor of a native application. This approach allows the Rust editor code and GPU-accelerated rendering to run directly on Windows, Mac, or Linux without browser overhead, providing better performance and a more seamless experience.

    Animation Support

    A new Timeline panel is being developed to support keyframing of node parameters. This will integrate with the existing graph-based, data-driven workflow, enabling motion graphics and procedural animation.

    Advanced Procedural Editing

    The node graph is being enhanced with several high-level abstractions:

    • Lambdas: Nodes that can be treated as data and run in loops with varying parameters.
    • Instances: Generalizing graphical data and transforms so layers can act as unique instances (fixing pivot point limitations).
    • Lists: Representing data like vector points in a tabular format to improve CPU cache utilization via ECS-like performance.
    • Attributes: Encoding properties (points, segments, styles) as columns in tabular data, similar to Blender's geometry nodes.

    Raster Graphics Editing

    While currently limited to reference images and basic color adjustments, future updates aim to include:

    • GPU-accelerated nodes for pixel-based data.
    • Localized editing tools (e.g., masking nodes).
    • A rewritten brush engine and marquee selection tools.
    • Support for the WebGPU API to enable high-performance raster operations.

  7. Understand the Graphite codebase structure

    master

    Graphite is composed of three primary software components that separate the user interface, the application logic, and the document engine:

    • Frontend (/frontend/src): The GUI built with TypeScript, Svelte, HTML, and SCSS. It is designed to be lightweight and acts as the entry point for user input, handing off work to the WebAssembly backend via a Wasm wrapper API.
    • Editor (/editor): The core application logic written in Rust and compiled to WebAssembly. It manages state, tooling, and user interaction through a central message system, which also handles communication with Graphene.
    • Graphene (/node-graph): The node graph engine responsible for managing and rendering documents. Graphene is a programming language that is compiled and executed live as the user edits.

  8. Future Roadmap: Document Format Evolution

    master

    The Graphite document format is designed with several future-facing capabilities in mind to support advanced collaborative and performance features:

    • Per-library versioning: Breaking changes in specific libraries will not necessitate a global document version bump if the document does not use those libraries.
    • History Linearization: Ability to prune unused branches from the history tree to create a clean undo/redo experience.
    • Position-independent Identity: Implementation of a content_id (analogous to git patch-id) derived from a Delta. This allows recognizing the same logical edit across different documents or history positions by hashing the op payload while normalizing out bookkeeping fields like parent, author, and Lamport timestamps.
    • Runtime-native Deltas: Moving delta computation into the runtime to avoid per-edit Registry re-conversion.
    • Incremental Compilation: A compiler that consumes runtime deltas to recompile only the specific regions that changed.
    • Runtime-level Aliasing: Native support for sharing node-network definitions via Implementation::Network references.
    • Distributed/Signed History: Using content-addressed Rev and digital signatures to enable multi-author provenance and verifiable history.
    • Libraries as Files: Future support for .gdd files to act as importable libraries via the exported_nodes list.

  9. Understand the Graphite editor interface layout

    master

    The Graphite interface is organized into several key areas:

    • Title bar: The top bar of the editor. In desktop releases, this serves as the draggable window frame.
    • Menu bar: Located on the left of the title bar, providing access to editor, document, and artwork controls.
    • Window buttons: Platform-specific controls (Close, Minimize, Maximize, Fullscreen) located on the right (or left on macOS).
    • Workspace: The main content area containing various Panels.
    • Panels: Dedicated UI regions (e.g., Document, Properties, Layers). Panels are separated by gutters, which can be dragged to resize them.
    • Status bar: The bar at the bottom of the editor, primarily used for displaying Input hints.

  10. Understand the Graphite license and usage rights

    master

    Graphite is open-source software distributed by Graphite Labs, LLC.

    Usage and Ownership

    • Application Builds: You are free to use and redistribute builds of the application, including for commercial purposes.
    • User Artwork: Any artwork you create using Graphite belongs to you.

    Source Code License

    Unless otherwise noted within the repository, the source code (including the editor application, libraries, and other software materials) is shared under the Apache License 2.0.

  11. Understand the Graphite component architecture

    master

    The Graphite editor GUI is composed of several specialized component categories. When building or extending the UI, identify which category your component belongs to:

    • Window (window/): The top-level building blocks like the Title Bar, Workspace, and Status Bar.
    • Layout (layout/): Containers that control the flow of content.
    • Panels (panels/): Dockable, tabbed regions (e.g., Document, Properties, Layers, Data, and Welcome panels).
    • Views (views/): The actual content rendered inside panels, such as the node graph.
    • Widgets (widgets/): Interactive input items for displaying information and providing user control.
    • Floating Menus (floating-menus/): Temporary UI elements with dark backgrounds that hover over the editor content, such as popovers, menu lists, and dialogs.

  12. Understand Graphite's scalable raster and vector rendering

    master

    Graphite integrates vector and raster workflows by treating artwork as data rather than fixed pixels.

    • Vector: Uses mathematically-described curves that remain crisp at any scale.
    • Raster: Unlike traditional raster editors that commit to a fixed resolution, Graphite reinvents raster rendering so it stays sharp at any scale. Artwork is always redrawn at the current viewing resolution.

    This means you can zoom the viewport or export images at any size, and the document's paint brushes, masks, filters, and effects will always render in full detail. This approach allows for a cohesive workflow where vector and raster elements complement each other without needing separate software.