The Graphite editor is organized into a clear, purpose-driven layout. At the very top sits the title bar, which houses the app logo, the menu bar on the left (File, Edit, Layer, Select, View, Window, Help), document tabs in the center, and platform-specific window buttons on the right (or left on macOS). Below the title bar, the workspace fills the rest of the application window and is divided into resizable panels separated by draggable gutter lines. The largest panel — the Document panel — occupies the center and contains the canvas viewport, the tool shelf on the left, and the control bar at the top. On the right side of the workspace, the Properties panel sits above the Layers panel. In the lower-left, the Data panel provides a technical view of data flowing through the node graph. Along the very bottom of the editor, the status bar displays context-sensitive input hints that update as you work.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/GraphiteEditor/Graphite/llms.txt
Use this file to discover all available pages before exploring further.
Title Bar
The title bar spans the full width at the top of the editor. In the forthcoming desktop release, this bar acts as the draggable window frame. Its three regions serve distinct roles:- App button / Logo — clicking the Graphite logo opens the Graphite website home page.
- Menu bar — a row of menus (File, Edit, Layer, Select, View, Window, Help) on the left side provides organized access to editor, document, and artwork actions. Each menu opens a dropdown with labeled actions and their keyboard shortcuts.
- Document tabs — each open document appears as a named tab. An asterisk (
*) appended to the name indicates unsaved changes. - Window buttons — on the right side (left on macOS), the standard platform controls appear: fullscreen on web, minimize/maximize/close on Windows and Linux, and close/minimize/fullscreen on macOS.
Document Panel
The Document panel is the primary editing area and takes up the largest portion of the workspace. It has three components:- Viewport — an interactive view of the canvas where you edit artwork visually using tools. Temporary blue overlays (bounding boxes, handles, vector manipulators) appear on top of the artwork to assist editing. Scrollbars run along the bottom and right edges; rulers run along the top and left edges and can be toggled via View → Rulers.
- Node graph overlay — press CtrlSpace to toggle the node graph on top of the viewport. The node graph exposes the underlying data structure of the document and is where you can wire nodes together for procedural, non-destructive editing.
- Tool shelf — a narrow vertical bar on the left side of the panel presents all available tools grouped into General (gray icons), Vector (blue icons), and Raster (orange icons) sections. Below the tools, the working colors swatch shows the active primary (upper) and secondary (lower) colors.
- Control bar — runs across the top of the Document panel. The left side shows controls that change depending on the active tool; the right side shows persistent viewport controls (Overlays, Snapping, Grid, Render Mode, Zoom, Tilt, Node Graph toggle).
Layers Panel
The Layers panel occupies the lower-right corner of the workspace. It displays the complete hierarchical structure of the active document — artboards, layers, and group folders — arranged in a bottom-to-top stacking order that mirrors how they composite visually. A control bar at the top of the panel provides a blend mode dropdown, an opacity slider, an add-folder button, and a delete-selected-layers button. Each row in the layer list shows a visibility (eye) icon, a lock icon, a thumbnail preview, and the layer name. The Layers panel and the node graph are two views of the same underlying data — changes in one are immediately reflected in the other.Properties Panel
The Properties panel sits in the upper-right of the workspace. Its contents change dynamically based on the current selection. When a layer or node is selected, the panel displays all of that node’s configurable parameters — numbers, colors, dropdowns, toggles, and more. Each parameter can be exposed, which moves it out of the Properties panel and into the node graph as a visible input connector, enabling it to be driven procedurally by the output of another node.Data Panel
The Data panel occupies the lower-left of the workspace and is toggled via Window → Data. It provides a raw technical inspection of the data flowing out of the currently selected node. This is particularly useful for developers and advanced users who need to debug what a node is producing — for example, verifying the exact geometry, color values, or image data passing through a specific point in the graph.Status Bar
The status bar runs along the very bottom of the editor. It currently displays input hints — a live reference showing which keyboard and mouse inputs are valid in the current context. Hints with a+ symbol indicate that adding a modifier key changes the base action; hints with a / symbol indicate that either of two listed inputs performs the same action.
Learn More About Each Panel
Menu Bar
Complete reference for every action in the File, Edit, Layer, Select, View, Window, and Help menus with keyboard shortcuts.
Document Panel
Deep dive into the viewport, tool shelf, control bar, snapping, grid, and render mode options.
Layers Panel
Managing artboards, layers, and groups — selection, reordering, blend modes, opacity, and visibility.
Properties Panel
Editing node parameters, exposing connectors, and working with the full range of value input types.