The Canvas Editor
The canvas is the heart of FlowNodes. It's a node-based visual editor built on React Flow v12 where each node represents a smart contract component. Nodes are connected by typed edges that encode Solidity inheritance and composition relationships.
Block Library
The left sidebar contains the Block Library — 50+ audited components organised into 8 categories. Every block shows its audit source (OpenZeppelin v5, Chainlink, Internal) and a one-line description.
Finding blocks
Type in the search box at the top of the sidebar to filter by name or description. Pressing / in the search box when it's empty will show the AI quick-generate shortcut.
Adding blocks to the canvas
There are two ways to add a block:
- 1
Click the + button
Hover over any block card in the sidebar and click the
+icon. The block is placed in the centre of your current viewport. - 2
Drag and drop
Click and drag a block card from the sidebar and drop it anywhere on the canvas at a precise position. Snap-to-grid (8px) keeps blocks aligned.
Block categories
| Category | Colour | Examples |
|---|---|---|
| Token Standards | Blue #4b8ef7 | ERC-20, ERC-721, ERC-1155, ERC-4626 |
| Access Control | Green #34d399 | Ownable, Ownable2Step, AccessControl, Timelock |
| Security | Red #f87171 | ReentrancyGuard, Pausable, RateLimiter, CircuitBreaker |
| Finance / DeFi | Amber #fbbf24 | StakingPool, VestingWallet, Escrow, Auction, MerkleAirdrop |
| Governance | Light blue #60a5fa | Governor DAO, Governor Timelock |
| Oracles | Cyan #38bdf8 | Chainlink Price Feed, Chainlink VRF, Uniswap V3 TWAP |
| Upgradeability | Orange #fb923c | UUPS Proxy, Transparent Proxy, Beacon Proxy, Initializer |
| Advanced | Grey #a3a3a3 | Custom Function, Custom Modifier, Custom Event, State Variable |
Connecting blocks (edges)
Edges represent relationships between blocks. In the generated Solidity, edges become inheritance (is) or composition (storage / constructor args) declarations.
Creating a connection
Each block has circular ports on its top and bottom edges. Hover over a block to see them highlighted. Click a port and drag to another block's port to create an edge. You can also drag from the source block's output port and release over the target block (no need to hit the port precisely).
Edge types
| Edge Kind | Solidity Output | When to use |
|---|---|---|
| inherit | contract A is B {...} | The target block adds a base class (most common) |
| compose | B internal _b; | The target block is stored as a state variable |
| use | using B for A; | Using directive (e.g. SafeERC20 for IERC20) |
| deploy | new B(...) | The source deploys the target in its constructor |
inherit edge type. The AI always chooses the correct edge type when generating graphs.Deleting connections
Click an edge to select it (it turns blue). Press Backspace orDelete to remove it. You can also click a node and pressBackspace to remove the node and all its connected edges.
AI generation
The AI panel uses Claude Sonnet 4.6 with a specialised system prompt that understands the full FlowNodes block schema, Solidity security patterns, and the FlowNodesGraph JSON format.
Opening the AI panel
Click the ✦ (sparkle) icon in the top-right toolbar, or press⌘I (Ctrl+I on Windows). The AI panel replaces the Properties Panel in the right sidebar.
Slash commands
Type / in the AI prompt to see quick-generate shortcuts:
| Command | What it generates |
|---|---|
| /erc20 | ERC-20 token with mint/burn/pause options |
| /erc721 | NFT collection with royalties and allowlist |
| /staking | Token staking pool with configurable rewards |
| /dao | Governor DAO with timelock and token voting |
| /vesting | Linear vesting schedule with cliff |
| /explain | Explains the currently selected block (1 credit) |
| /fix | Fixes the top compile error or security warning |
| /test | Generates a Hardhat test suite (~8 credits) |
| /simplify | Removes redundant blocks from selected nodes |
How the AI works
When you submit a prompt, the API sends your message plus the current graph state to Claude with the FlowNodes-Architect system prompt. The model returns a FlowNodesGraph JSON object with a list of nodes, edges, and optional clarification questions.
The generated nodes appear on the canvas as a semi-transparent preview. You can Accept All (applies them to the canvas and triggers auto-compile) or Reject(discards the preview).
Explain block
Select any node on the canvas and click Explain this blockin the Properties Panel. The AI sends a plain-English explanation of what the block does, its security implications, and how it fits in your contract. Costs 1 credit.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| ⌘I / Ctrl+I | Toggle AI panel |
| ⌘J / Ctrl+J | Toggle bottom console |
| ⌘. / Ctrl+. | Toggle code preview |
| F | Fit all nodes in view |
| Backspace / Delete | Delete selected node or edge |
| Shift + drag | Multi-select nodes |
| ⌘↵ / Ctrl+Enter | Send AI prompt |
| ⌘Z / Ctrl+Z | Undo (coming soon) |
| ⌘⇧Z / Ctrl+Shift+Z | Redo (coming soon) |
| ⌘S / Ctrl+S | Manual save (auto-save runs every 30s) |
| / (in search box) | Show AI quick-generate |
Canvas navigation
| Action | How |
|---|---|
| Pan | Middle-mouse drag, or right-click drag |
| Zoom in/out | Scroll wheel |
| Zoom to fit | Press F, or use the Controls widget (bottom-left) |
| Mini-map | Bottom-right corner — click to jump to a region |