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.
The Document panel is the main editing area of the Graphite workspace. It is where you interact visually with your artwork through the viewport and, when needed, dive into the underlying data structure through the node graph overlay. The viewport is designed for direct, intuitive editing using tools, while the node graph — accessed by pressing CtrlSpace — provides a more technical view of how layers and nodes are wired together. There is one Document panel instance per open document; each appears as a tab in the panel header labeled with its filename. An asterisk (*) after the name signals unsaved changes.
The Document panel has three primary components: the control bar across the top, the tool shelf running vertically down the left side, and the viewport filling the remainder of the panel.
Control Bar
The control bar spans the full width of the top of the Document panel. Its left side displays tool controls that change depending on which tool is currently active (it may be empty for some tools). The right side displays viewport controls that are always available regardless of the active tool.
Tool Controls
The left portion of the control bar reflects the active tool’s configurable options. For example, when the Select tool is active, these controls include the selection mode (deepest vs. shallowest layer in a nested hierarchy), the transform cage pivot point, alignment and distribution actions, horizontal/vertical flip buttons, and boolean operation buttons. Every tool that has options will surface them here.
Viewport Controls
The right side of the control bar contains the following persistent viewport controls:
| Control | Description |
|---|
| Overlays | When enabled (default), temporary contextual visualizations — such as bounding boxes and vector manipulators, typically shown in blue — are drawn on top of the viewport. Disable to view the artwork without these helpers. |
| Snapping | When enabled (default), drawing and dragging shapes or vector points causes them to snap to geometrically significant areas such as corners and anchor points. Disable for free movement. Click the overflow button to open a detailed snapping options popover. |
| Grid | When enabled (off by default), grid lines are displayed and snapping to them is activated. The default grid scale is 1 document unit. Click the overflow button to configure the grid type, display, and origin. |
| Render Mode | Sets how the artwork is rendered in the viewport. Options: Normal, Outline, Pixel Preview, and SVG Preview. |
| Zoom In | Zooms the viewport in to the next whole increment. |
| Zoom Out | Zooms the viewport out to the next whole increment. |
| Reset Tilt and Zoom to 100% | Resets the viewport tilt to 0° and the zoom level to 100% (1:1 canvas-to-viewport pixel scale). |
| Viewport Zoom | Displays the current zoom level; click to enter a precise value. |
| Viewport Tilt | Hidden unless the viewport is tilted. Displays the current tilt angle; click to enter a precise value. |
| Node Graph | Toggles the visibility of the overlaid node graph. Equivalent to pressing CtrlSpace. |
Snapping Options
Clicking the overflow button next to the Snapping toggle opens a popover with fine-grained control over what the snapping system targets. These are organized into two groups:
Bounding Box snapping:
| Option | Description |
|---|
| Align with Edges | Snaps to horizontal/vertical alignment with the edges of any layer’s bounding box. |
| Corner Points | Snaps to the four corners of any layer’s bounding box. |
| Center Points | Snaps to the center point of any layer’s bounding box. |
| Edge Midpoints | Snaps to the four midpoints along the edges of any layer’s bounding box. |
| Distribute Evenly | Snaps to a consistent distance offset based on the bounding boxes of nearby layers. Note: Corner Points and Center Points must also be enabled due to a current bug. |
| Option | Description |
|---|
| Align with Anchor Points | Snaps to horizontal/vertical alignment with the anchor points of any vector path. |
| Anchor Points | Snaps to the anchor points of any vector path. |
| Line Midpoints | Snaps to the midpoint of any straight line segment of a vector path. |
| Path Intersection Points | Snaps to points where vector paths intersect one another. |
| Along Paths | Snaps along the length of any vector path. |
| Normal to Paths | Snaps a line to a point perpendicular to a vector path. Note: Path Intersection Points must also be enabled due to a current bug. |
| Tangent to Paths | Snaps a line to a point tangent to a vector path. Note: Path Intersection Points must also be enabled due to a current bug. |
Grid Options
Clicking the overflow button next to the Grid toggle opens a popover with grid configuration options:
Type determines the overall grid pattern:
- Rectangular — a pattern of horizontal and vertical lines forming a square grid. Its unique option is Spacing, which sets the width and height of the grid cells.
- Isometric — a pattern of triangles suited for isometric-style artwork. Its unique options are Y Spacing (the height between vertical repetitions of the grid) and Angles (the slant of the upward and downward sloped grid lines).
Display controls the visual appearance of the grid. The Display as dotted grid checkbox (off by default) replaces solid lines with dots at their intersection points.
Origin sets the canvas position from which the repeating grid pattern starts. Adjust these coordinates if you need a grid intersection to align with a specific location in your document.
Render Mode
The Render Mode dropdown in the viewport controls changes how artwork is displayed in the viewport:
| Mode | Description |
|---|
| Normal | The artwork is rendered normally (default). |
| Outline | The artwork is rendered as a wireframe, showing only the outlines of shapes. |
| Pixel Preview | Renders the artwork as it would appear when exported as a bitmap image at 100% scale, regardless of the current viewport zoom level. |
| SVG Preview | Renders the artwork as it would appear when exported as an SVG image. |
Pixel Preview and SVG Preview are not yet implemented. They appear in the dropdown as a preview of upcoming functionality.
Tool Shelf
The tool shelf is a narrow vertical bar running down the left side of the Document panel. It contains all available editing tools and the working colors swatch.
Tools
Tools are grouped into three sections identified by icon color:
| Group | Icon Color | Purpose |
|---|
| General tools | Gray | Assorted editing tasks within the viewport (e.g., Select, Navigate). |
| Vector tools | Blue | Drawing and editing vector shapes, paths, and text. |
| Raster tools | Orange | Drawing and editing raster image content. |
Some icons in the Raster tools section appear grayed out. These are placeholders for tools that are currently in development and not yet available.
Working Colors
At the bottom of the tool shelf, the working colors swatch shows two overlapping circles:
- The upper circle is the primary color, used by tools as the foreground or main color.
- The lower circle is the secondary color, used as the background or secondary color.
Two buttons sit below the circles:
- Swap — reverses the primary and secondary colors.
- Reset — restores the primary color to black and the secondary color to white.
For vector drawing tools, the tool controls in the control bar show Fill and Stroke options that default to the current secondary and primary working colors respectively. Each of these options can independently be set to track the primary working color, the secondary working color, or a custom color specific to that tool.
Viewport
The viewport is the large interactive area that fills most of the Document panel. It renders the canvas and lets you interact with your artwork using the active tool.
Overlays — temporary blue visualizations such as bounding boxes, selection handles, and vector control points — are drawn on top of the artwork when the Overlays toggle is enabled. These are contextual and change based on the active tool and selection state.
Scrollbars run along the bottom and right edges of the viewport. Dragging them pans the canvas within the viewport, letting you navigate to different parts of your artwork.
Rulers run along the top and left edges of the viewport. They display dimensional information corresponding to the area of the canvas currently in view. Rulers can be hidden or shown using the View → Rulers toggleable menu action.
The node graph overlay can be toggled on top of the viewport by pressing CtrlSpace or by clicking the Node Graph button in the viewport controls. The node graph shows the full structure of nodes and layers composing the document, allowing for precise, technical editing of the non-destructive pipeline. Graphical data flows through the graph and into the Output node, which renders the final result to the viewport.