Skip to content

Conversation

@MwithHeart
Copy link

@MwithHeart MwithHeart commented Sep 23, 2025

Made changes to your-first-graph.mdx in these areas:

  • Extracted the Node Type information from a collapsible summary and turned it into a dedicated heading for better visibility.
  • Reorganized steps for better flow.
  • Used sentence case for headings
  • Added the image "search-for-nodes.png" to assets. It shows the nodes when typing a node name in the search bar.

---
title: Your First Graph
description: Learn how to create your first Node Graph in PixiEditor.
title: Create a Node graph
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing the title changes the URL of the doc. You must include slug: usage/node-graph/tutorials/your-first-graph so the previous url doesn't lead to 404 and sidebar entry works

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additionally capitalization of "graph" is inconsistent with the rest of the doc. I'd personally captialize "G"

import { Image } from 'astro:assets';
import ctxMenuImage from './assets/ctx-menu.png';
import { Quiz, QuizOption } from 'starlight-videos/components'
import searchNodes from '.assets/search-for-nodes';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Asset path is wrong as doc is unable to load. You probably meant ./assets/search-for-nodes.png

Comment on lines +55 to +56
- Type the node name in the search bar.
- Type the node name in the search bar.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

duplication

Now that your Node Graph is ready, you can start adding nodes.

<Image src={ctxMenuImage} alt="Context menu with nodes" width="400"/>
1. Open the context menu containing nodes:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use Steps component

import searchNodes from '.assets/search-for-nodes';

First of all, congratulations on deciding to learn about Node Graphs in PixiEditor! It's a fascinating and powerful system, you won't regret it.
Welcome to Nodes.🎉 The Node system is a powerful way to build and control animations in a non-destructive, flexible workflow.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is indirectly misleading. Node system is not only for animations, but it's a core component of whole PixiEditor. It allows for:

  • Creating procedural artworks
  • Editing images
  • Creating animations
  • Building custom workspaces

and in the future custom brushes

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for clarifying this.

Comment on lines +83 to +95
PixiEditor 2.0.0.97 includes several node categories:

- Color - Includes nodes that work with colors.
- Image - Nodes such as create, mask, and those that manipulate images such as Noise, Mask.
- Structure - Represent elements in a layer tree like Image Layers, Vector Layers, and Folders.
- Numbers - Nodes that perform numerical operations. For example, Math node.
- Effects - Apply visual effects such as Raster Outline or Custom Shader.
- Workspace - Nodes for customizing outputs and exporting zones.
- Shape - Nodes allow you to create and manipulate shapes.
- Matrix - Matrix-related nodes like Transform.
- Filters - Apply effects like Blur, Shadow, and Color Correction with these nodes.
- Animation - Nodes for creating procedural animations.
- Misc - Miscellaneous nodes, such as Document Info.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd keep bold category names. Imo it's easier to read

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants