website/content/features.md
+++ title = "Graphite features"
[extra] css = ["/page/features.css", "/component/feature-box.css", "/component/feature-icons.css", "/component/youtube-embed.css"] js = ["/js/component/youtube-embed.js"] +++
<section> <div class="block">The current alpha version of Graphite is a tool for vector art and graphic design. It also supports a limited, experimental raster editing toolset. This tooling is built around a procedural graphics engine, letting artists build complex graphics and animations in its visual scripting language.
</div> </section> <section> <div class="block"> <div class="block video-container"> <div> <div class="youtube-embed aspect-16x9"> </div> </div> </div> </div> </section> <section> <div class="diptych"> <div class="block">Graphite combines the best ideas from multiple categories of digital content creation software to reimagine the workflows of 2D graphics editing. It is influenced by the core editing experience of traditional layer-based raster and vector tools, the nondestructive approaches of VFX compositing programs used by film studios, and the boundless creative possibilities of procedural production tools daily-driven by the 3D industry.
Classic layer-based image editing is easy to understand, employing collapsable folders that help artists stay organized. A variety of interactive viewport tools make it easy to manipulate the layers by drawing directly onto the canvas. On the other hand, node-based editing is essentially artist-friendly programming. It works by describing manipulations as steps in a flowchart, which is vastly more powerful but comes with added complexity.
The hybrid workflow pioneered by Graphite is able to deliver a classic tool-centric, layer-based editing experience built around a procedural, node-based compositor. Users can ignore the node graph, use it exclusively, or switch back and forth with the press of a button while creating content. Interacting with the canvas using tools will manipulate the nodes behind the scenes. And the layer panel and node graph provide two equivalent, interchangeable views of the same document structure.
</div> <div class="block">Digital 2D art commonly takes two forms. Raster artwork is made out of pixels which means it can look like anything imaginable, but it becomes blurry or pixelated when upscaling to a higher resolution. Vector artwork is made out of curved shapes which is perfect for some art styles but limiting to others. The magic of vector is that its mathematically-described curves can be enlarged to any size and remain crisp.
Other apps commonly focus on just raster or vector, forcing artists to buy and learn separate products for both. Mixing art styles requires shuttling content back and forth between programs. And since picking a raster document resolution is a one-time commitment, artists often choose to start out big, resulting in sluggish editing performance and multi-gigabyte documents.
Graphite reinvents raster rendering so it stays sharp at any scale. Artwork is treated as data, not pixels, and is always redrawn at the current viewing resolution. Zoom the viewport and export images at any size— the document's paint brushes, masks, filters, and effects will always be rendered in full detail.
Marrying vector and raster under one roof enables both art forms to complement each other in one cohesive creative workflow. (Scalable raster compositing is still experimental.)
</div> </div> </section> <section> <div class="block"> <span>Editor systems; basic vector art tools</span>
</div>
<!-- Alpha 1 -->
<div class="feature-icon complete heading" data-year="2022">
<h3>— Alpha 1 —</h3>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>Better tools; node graph prototyping</span>
</div>
<!-- Alpha 2 -->
<div class="feature-icon complete heading" data-year="2023">
<h3>— Alpha 2 —</h3>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>Node graph integration in documents</span>
</div>
<!-- Alpha 3 -->
<div class="feature-icon complete heading" data-year="2024">
<h3>— Alpha 3 —</h3>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>Procedural vector editing and usability</span>
</div>
<!-- Alpha 4 -->
<div class="feature-icon ongoing heading" data-year="2025–">
<h3>— Alpha 4 —</h3>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>Parametric animation</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>Instancer nodes for looped generation</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>Enhanced Pen, Path, and Shape tools</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>Table-based graphical data format</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>Data panel for graphical introspection</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>Layer clipping masks</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>GPU acceleration infrastructure</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<span>All-around performance optimizations</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing">
<span>Blend tool to morph between shapes</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing">
<span>Stable document format</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing">
<span>Desktop app <a href="/#desktop-first-and-web-ready">release candidates</a></span>
</div>
<!-- Beta 1 -->
<div class="feature-icon heading" data-year="Early 2026">
<h3>— Beta 1 —</h3>
</div>
<div class="feature-icon">
<span>Desktop app release and 1.0 launch</span>
</div>
<div class="feature-icon">
<span>Context menus throughout the editor</span>
</div>
<div class="feature-icon">
<span>Simplified main properties panel</span>
</div>
<div class="feature-icon">
<span>Node version management</span>
</div>
<div class="feature-icon">
<span>Local fonts access</span>
</div>
<div class="feature-icon">
<span>Saving over local files (web version)</span>
</div>
<div class="feature-icon">
<span>Timeline panel for animation curves</span>
</div>
<div class="feature-icon">
<span>Nested documents as custom nodes</span>
</div>
<div class="feature-icon">
<span>Variables and color swatches</span>
</div>
<div class="feature-icon">
<span>Custom attributes for table data</span>
</div>
<div class="feature-icon">
<span>Expanded imaging model data format</span>
</div>
<div class="feature-icon">
<span>Physical measurement units</span>
</div>
<div class="feature-icon">
<span>GPU-accelerated raster rendering</span>
</div>
<div class="feature-icon">
<span>Text-on-path tool support</span>
</div>
<div class="feature-icon">
<span>Per-glyph text style controls</span>
</div>
<div class="feature-icon">
<span>Robust vector mesh editing/rendering</span>
</div>
<div class="feature-icon">
<span>Nondestructive shape builder tool</span>
</div>
<div class="feature-icon">
<span>Automatic image trace vectorization</span>
</div>
<div class="feature-icon">
<span>Broader SVG support including filters</span>
</div>
<div class="feature-icon">
<span>Parametric art standalone export</span>
</div>
<div class="feature-icon">
<span>New and improved brush tool</span>
</div>
<div class="feature-icon">
<span>Stylus and touch interaction</span>
</div>
<div class="feature-icon">
<span>MIDI and audio-reactive visualization</span>
</div>
<!-- Beta 2 -->
<div class="feature-icon heading" data-year="2027">
<h3>— Beta 2 —</h3>
</div>
<div class="feature-icon">
<span>Dockable and multi-window panels</span>
</div>
<div class="feature-icon">
<span>Command palette</span>
</div>
<div class="feature-icon">
<span>Onion skinning mode for animation</span>
</div>
<div class="feature-icon">
<span>Animatable deformation meshes/rigs</span>
</div>
<div class="feature-icon">
<span>Simulation domains</span>
</div>
<div class="feature-icon">
<span>Signed distance field rendering</span>
</div>
<div class="feature-icon">
<span>Procedural PBR material generation</span>
</div>
<div class="feature-icon">
<span>Code editor for custom nodes</span>
</div>
<div class="feature-icon">
<span>Asset libraries and node marketplace</span>
</div>
<div class="feature-icon">
<span>Automation/batch processing tools</span>
</div>
<div class="feature-icon">
<span>Select mode (marquee masking)</span>
</div>
<div class="feature-icon">
<span>Raster adjustments, filters, and effects</span>
</div>
<div class="feature-icon">
<span>Liquify and warp transforms</span>
</div>
<div class="feature-icon">
<span>Raw photo processing</span>
</div>
<!-- LTS Releases -->
<div class="feature-icon heading" data-year="Future">
<h3>— LTS Releases —</h3>
</div>
<div class="feature-icon">
<span>Advanced typesetting features</span>
</div>
<div class="feature-icon">
<span>PDF, EPS, AI, DXF, PSD, and TIFF</span>
</div>
<div class="feature-icon">
<span>CMYK, spot color, and ICC profiles</span>
</div>
<div class="feature-icon">
<span>HDR and WCG color handling</span>
</div>
<div class="feature-icon">
<span>Outliner panel (node graph tree view)</span>
</div>
<div class="feature-icon">
<span>Document history management</span>
</div>
<div class="feature-icon">
<span>Offline edit resolution with CRDTs</span>
</div>
<div class="feature-icon">
<span>History brush and clone stamp tools</span>
</div>
<div class="feature-icon">
<span>Internationalization and accessibility</span>
</div>
<div class="feature-icon">
<span>Neural nodes/tools like Magic Wand</span>
</div>
<div class="feature-icon">
<span>Procedural styling of paint brushes</span>
</div>
<div class="feature-icon">
<span>Infinite generative vector patterns</span>
</div>
<div class="feature-icon">
<span>Geometric constraint system solver</span>
</div>
<div class="feature-icon">
<span>Responsive design layout solver</span>
</div>
<div class="feature-icon">
<span>Authoring animated SVGs, Lottie, etc.</span>
</div>
<div class="feature-icon">
<span>Live video stream compositing</span>
</div>
<div class="feature-icon">
<span>Tablet app and keyboard-free controls</span>
</div>
<div class="feature-icon">
<span>Media collection manager/browser</span>
</div>
<div class="feature-icon">
<span>Cloud document storage/device sync</span>
</div>
<div class="feature-icon">
<span>Multiplayer collaborative editing</span>
</div>
<div class="feature-icon">
<span>Predictive graph rendering/caching</span>
</div>
<div class="feature-icon">
<span>Multi-device distributed rendering</span>
</div>
<div class="feature-icon">
<span>Hosted rendering accelerator service</span>
</div>
<div class="feature-icon">
<span><em>…and that's all just the beginning…</em></span>
</div>
</div>
Coming early 2026, Graphite will expand its animation toolset beyond parametrically-driven motion to include traditional keyframe animation. The Timeline panel pictured below will let animators drive parameters using keyframes and curves through a traditional dopesheet interface.
Node parameters can be set to a constant value in the Properties panel, exposed to the graph for procedural animation, or exposed to a channel in the upcoming Timeline panel for hand-authored keyframing.
The panel will enable users to scrub through time with the playhead and choose between timing with discrete frames or continuous seconds. A dedicated curves editing mode (not pictured) will enable fine-tuning parameters with a labeled Y-axis, while the dopesheet allows individual channels to be expanded to view and edit the shape and smoothness of curves inline.
Work-in-progress design mockup:
</div> </section> <section> <div class="block">The vision since Graphite's inception has been to open up the traditional raster image editing workflow to the greater degree of flexibility found in node-based compositors, without one approach compromising the ergonomics of the other.
As with Graphite's current vector toolset, raster editing will interpret the user's interactive edits as modifications to the construction of layers in the underlying node graph rather than destructive alterations to layer pixel data (as in other image editors). By containing only a description of the user's editing operations without the data, documents will remain ultra tiny when source assets are linked externally.
Brushes, selection tools, masks, filters, effects, adjustment layers, and other tools used to manipulate raster layers will all be presented in a familiar form when Graphite's raster toolset nears maturity by the end of beta.
Work-in-progress design mockup:
</div> </section>