Documentation

NodeLogic Graph Builder adds logic to WordPress pages without code. You describe what should happen by connecting nodes with wires in a visual editor, the graph. On the published page the graph runs in the visitor's browser and updates the page instantly.

1. Values flow from left to right

Every node has input pins on the left and output pins on the right. A wire carries a value from an output pin to an input pin. A graph usually starts with nodes that read something (a field the visitor fills in, a constant you type), passes through nodes that compute (Calculation, Condition, Concat...) and ends in an Output node, which writes the result into an element on the page.

Element (quantity)CalculationOutput (total)

2. Pins have types

Each pin has a type, shown by its color. You can only connect compatible pins, so many mistakes are impossible. The most common types:

• Number
• String
• Boolean
• Color
• Zip
• Array
• CSS
• Element
• Event
• Action

3. The graph is always live

You never need a "calculate" button: when the visitor changes a field, every value that depends on it is recalculated and the page is updated. A graph describes states ("the total is quantity x price"), not steps.

4. Events are moments

Some things are not states but moments: a click, a submitted form, a timer tick. Event nodes produce events. Use them with Event Processor (let a value through only when the event happens), with Event Trigger Action (run actions on each event) or with nodes that have a Trigger pin (Clone Element, Increment Variable, Send Email...).

5. Outputs and actions change the page

An Output node writes its value into its target: form fields get a new value, images a new address, other elements new text. Its Action pin starts action nodes for the same element: change styles and classes, show or hide it, enable or disable it, react to clicks, redirect, show notifications.

One logic block can control any number of elements on its page. You can also put several logic blocks on one page; each one runs on its own.

In the block editor (Gutenberg)

1. Install and activate NodeLogic Graph Builder.
2. Edit a page and add the fields and texts you need. The plugin's own blocks (category NodeLogic Graph Builder): Seekbar, Number Input, Text Input, Radio Group, Select, Checkbox, Label, Button Group, Trigger Group, Image, Array List and Container. Every element with an HTML ID can be used too.
3. Add the NodeLogic Graph Builder Logic block anywhere on the page. It holds the graph and is invisible to visitors.
4. Click Edit Logic Graph to open the editor.
5. Build your graph, then click Save Graph.
6. Update (or publish) the page. The page uses the new graph from now on.

The editor detects the NodeLogic blocks on the page, so you can choose them by name in nodes such as Element and Output.

Starting from scratch? The block patterns Price Calculator Starter and Estimate Calculator Starter give you a ready layout.

In Elementor

1. Drag the NodeLogic Graph Builder widget (category NodeLogic Graph Builder) onto the page. It is invisible to visitors.
2. Give the Elementor widgets you want to read or change a CSS ID: Advanced > CSS ID.
3. In the NodeLogic widget panel click Open Logic Editor.
4. Build your graph and click Save Graph, then Close Logic Editor.
5. Click Update in Elementor.

In Elementor, type the element IDs into the nodes (Element, Element Reference, Output...). Elementor forms work with the PRO Form Data node.

Saving: working copy and the page

While you edit, your changes are kept automatically as a working copy in this browser, even if the browser crashes. The page keeps using its current graph until you click Save Graph and update the page. The editor shows "Unpublished changes" while the two differ, and Discard changes... takes you back to the page's graph.

Nodes and wires

• The palette on the left lists every node in folders. Type in Search nodes... to find one, then drag it onto the canvas.
• Drag from an output pin (right side of a node) to an input pin (left side) to connect them. An output can feed any number of inputs; an input takes one wire.
• Drag the end of an existing wire away from its input to move it to another pin or to remove it.
• Click a node to select it: its settings appear in the side panel. Many settings can also be changed directly on the node.
• Inputs that are not connected often have their own field on the node: type a value there instead of wiring a constant.
• Drag the empty canvas to move around; use the mouse wheel to zoom.

Ctrl+Z

Undo (Cmd + Z on Mac)

Ctrl+Y or Ctrl+Shift+Z

Redo

Delete or Backspace

Delete the selected node

Every action is one undo step (typing a word is one step, not one per letter), up to 100 steps.

Versions

The versions panel shows the graph Published (on the page), the Previous versions kept with the page, and Local backups (this browser) taken automatically before every save, restore, import and discard.

• View opens a read-only preview with a summary of the differences. It never changes anything.
• Restore... makes that version your working copy (Undo brings your previous one back). The page changes only when you click Save Graph.
• Choose how many previous versions the page keeps (0 to 10, default 5). Older ones are removed at the next Save Graph.

Export and import

Export working copy (or Export next to any version) downloads the graph as a JSON file. Import from file... checks the file, shows what will change and asks before replacing your working copy. Use it to copy a graph to another page or site, or to keep your own backups.

If something goes wrong

If the browser or computer crashed before your last changes were stored, the editor offers a recovery snapshot the next time you open the graph: it shows when the snapshot was made and what differs, and lets you Restore or Dismiss it. Nothing is ever replaced without asking.

Goal: the visitor enters a quantity, and a label shows the total price immediately.

1. Add a Number Input block for the quantity and a Label block for the total. Set their ID in the block settings, for example qty and total.
2. Add the logic block and click Edit Logic Graph.
3. From Elements & Values drag an Element Node onto the canvas and choose the quantity field.
4. Drag a Number Constant and type the unit price, e.g. 19.90.
5. From Node Types drag a Calculation Node. Connect the Element to its first input and the constant to the second; choose the operator *.
6. From Outputs drag an Output Node. Choose total as its target and connect the Calculation result to its Value pin.
7. Click Save Graph and update the page. Change the quantity on the page: the total follows.

Element (qty)Calculation (*)Output (total)

Make it nicer

• Add the currency: Calculation -> Number To String -> Concat with " EUR" -> Output.
• Round the result: put a Math Function (round, PRO) or format the number before the Output.
• Add a discount: a Condition (quantity >= 10) into an If Node that chooses between two prices.

Goal: when the visitor ticks "I am a company", a VAT number field appears and becomes required, and a message changes.

1. Add a Checkbox block (company), a Text Input (vat) and a Label (info).
2. In the editor, read the checkbox with an Element Node: its value is true or false.
3. Text: connect the checkbox to the Condition of an If Node. Connect a String Constant "Company prices exclude VAT" to True and another one, "Prices include VAT", to False. Connect the result to an Output targeting info.
4. Field: add a second Output targeting vat. From its Action pin connect an Action If Node and wire the checkbox into its Condition.
5. From the Action If True pin connect Set Visibility (Show) and Set Required; from False connect Set Visibility (Hide).
6. Save Graph and update the page.

Element (company)Action IfSet Visibility / Set Required

For more than two cases use a Switch Node with Case Value, Case Range and Case Default.

Goal: the total is shown only after the visitor clicks "Calculate", and the button gets a short confirmation.

1. Start from Tutorial 1 and add a button with the ID calc.
2. From Events add an Event Element Node: target calc, event type click.
3. Add an Event Processor. Connect the event to Event and the Calculation result to Payload. Its output now changes only when the button is clicked.
4. Connect the Event Processor to the Output targeting total.
5. For the confirmation: from the Output's Action pin add an Event Trigger Action with the click event as Trigger, then a Show Notification "Price updated" from its output.
6. Save Graph and update the page.

Event Element (click)Event ProcessorOutput (total)

To toggle something on every click (a menu, a details panel) use Output -> Action Event Node (click) -> Toggle Class or Set Visibility (Toggle).

Lists let one graph handle any number of items: all cards of a grid, all rows of a table, all values of a chart.

Update every element of a list

1. Point at the container with an Element Reference and connect it to Get Children: you get the list of its child elements.
2. Connect the list to a For Each. Its Item is "the current element", Index its position.
3. Add an Output and connect the For Each Item to its Element pin, and for example Index + 1 to its Value: every child shows its number.

Element ReferenceGet ChildrenFor EachOutput

Compute with lists

• Totals: Reduce (sum, min, max, count...).
• Transform every value: For Each -> your calculation -> Collect Results (or Map).
• Keep only some items: For Each -> a Condition -> Filter.
• Show a list on the page: an Output targeting an Array List block (or a NodeLogic Chart block, PRO).

• NodeLogic finds elements by their HTML ID. NodeLogic blocks have one in their settings; give other blocks an ID with Advanced > HTML anchor (Gutenberg) or Advanced > CSS ID (Elementor).
• Nodes that need an element (Output, events, Element Property, Get Children...) have an Element pin. Connect an Element Reference, a For Each item or Get Children to it, or leave it empty and choose the target in the node.
• Elements without an ID still work through Get Children, Elements by Class and For Each.
• Raw HTML creates new elements from your own HTML, with pins for the parts you mark; Set Parent places them, Clone Element copies existing ones.

IDs must be unique on a page. Two elements with the same ID confuse the browser and NodeLogic alike.

See what your graph is doing

Put a Debug node anywhere in a chain: values pass through unchanged. Console Log prints into the browser console (F12), Message Log shows a small message on the page. By default only logged-in editors see them, so they can stay on a live page while you test.

Nothing happens on the page?

• Did you click Save Graph and then update the page? Unpublished changes stay in the editor only.
• Does the chain end in an Output node (or a node with its own effect such as Send Email)? Nodes that lead nowhere are not run.
• Is the Output target right? Check that the element ID exists on the page exactly once.
• Is an Event Processor in the chain? It lets the value through only when its event fires.
• Open the browser console: NodeLogic reports parts of a graph it could not evaluate. The rest of the graph keeps working.
• Is the value of the right type? A text such as "12 EUR" is not a number: use Parse Number or String To Number.

NodeLogic PRO is an add-on to the free plugin. After you activate your license (NodeLogic Graph Builder > PRO License) the editor shows the PRO nodes in the same palette, and the menu gets:

• Templates: save graphs and reuse them on any page (Plus, Pro, Agency).
• Custom Nodes: build your own nodes and their visual layouts (Pro, Agency).
• Database: connections and table access for the Database nodes.

PRO also adds two blocks: NodeLogic Chart and NodeLogic Custom Element (Pro, Agency).

1. Go to NodeLogic Graph Builder > Templates and click Add New Template.
2. Type a name, build the graph in the editor that opens, and click Save.
3. On any page, open the logic graph editor. In Graph Templates choose the template under Select template and click Import Template.
4. The template becomes your working copy (Undo brings the previous one back). Adjust the element targets for this page and click Save Graph.

Use Export / Import on the Templates page to move templates between sites.

A custom node is a graph packed into a single node with its own inputs and outputs. Build a "VAT price" or "shipping cost" calculation once and drop it into any graph like a built-in node.

1. Create the node

1. Go to NodeLogic Graph Builder > Custom Nodes and click Add New Custom Node.
2. Type the name it will have in the palette (for example "Price with VAT"). The editor opens in custom node mode.

2. Define the inputs

Every Number Constant, String Constant, Boolean Constant, Color Node and Element Node in this graph becomes an input pin of your custom node:

• Select the constant and type its Input Label (the pin name, e.g. "Net price").
• The value you type into the constant is the default value of the input.
• Tick Hidden (use default value) for constants that are internal values, not inputs (e.g. a fixed VAT rate).
• Inputs are ordered by their position on the canvas, top to bottom: arrange the constants in the order you want the pins.

3. Build the logic

Connect the constants to any nodes, exactly as in a normal graph.

4. Define the outputs

Connect each result to an input pin of the Html Element node (the main node of the custom node graph). Every connected pin becomes an output of your custom node. Select Html Element and name them under Output Labels.

Number Constant (Net price)Calculation (* 1.23)Html Element (Gross price)

5. Save and use it

1. Click Save.
2. Open any logic graph: your node is in the palette folder Custom Nodes. Drag it in and connect it like any other node.
3. On a placed custom node, Zip Output returns all results as one Zip value instead of separate pins. Split it anywhere with Unzip, or send it to a Custom Element block.

Manage custom nodes

• On the Custom Nodes page each node has Edit Node, Create UI Component / Edit Component (its visual layout, see the next guide) and delete options.
• Export / Import move your custom nodes to other sites as JSON.

Plan limits: Pro up to 80 custom nodes, Agency unlimited.

1. On Custom Nodes, choose Create UI Component for a custom node.
2. Build its layout from Container, Field and Image items: drag them into place, nest containers, and bind each field to one of the node's Input fields or Output fields. Click Save layout.
3. In the block editor add a NodeLogic Custom Element block and choose the Custom node in its settings; give it an Element ID.
4. In your graph, send data to the block with an Output targeting that ID: one Zip value (e.g. a custom node with Zip Output) or a list of them.

With API List Mapper (item type zip) the items of an API response are mapped onto your custom node's fields, so a Custom Element block can show a whole list of products, posts or offers.

1. Add a NodeLogic Chart block, set its Chart ID and choose the Variant: bar, comparison, line, function, pie, donut, radar, scatter or heatmap.
2. In the graph build a list of points: an Array of Chart Data Item values (Label + Value), or an API List Mapper with item type chart data.
3. Connect the list to an Output targeting the Chart ID. The chart redraws whenever the data changes.

For other data shapes, set Data path, Label path and Value path in the chart settings.

A graph computes values from what is on the page right now. To remember something over time (how often a button was clicked, which products were added) use Memory variables.

• Variables have a name. Nodes using the same name (and scope) share the variable.
• Change variables on events: Increment Variable, Append to Array Variable and Delete Variable act once per Trigger event.
• Persist (on read nodes, Increment and the array nodes) keeps the value in the visitor's browser across page reloads.
• Scope "This widget only" is the default; choose "Shared across widgets on this page" to share a variable between logic blocks.

Event Element (click)Increment Variable (count)Output

1. Add an API Request with the URL (typed or computed, e.g. with Concat) and the method.
2. Pick single values with API Field (path such as data.price), or whole lists with API List Mapper.
3. Show loading and errors with API Status -> Unzip (Loading, Error).

API RequestAPI Field (data.price)Output

Requests are made by the visitor's browser: never put secret keys into a graph, and use APIs that allow requests from your site (CORS).

Set up (administrators)

1. Open NodeLogic Graph Builder > Database. The WordPress database is available right away. Use Add database connection for other MySQL databases; the password is stored encrypted and never sent back to the browser.
2. Under Table access choose which tables graphs may use and click Save table access. WordPress user tables stay protected.
3. Tip from the setup screen: give an external database user only SELECT / INSERT / UPDATE / DELETE rights.

Build a query

DB ConnectDB TableDB FilterDB SortDB Select

• Only administrators can configure database nodes. When an administrator saves the graph the queries are authorized for this page, and the server runs exactly those queries: visitors can only send values for pins you connected.
• Each query node has Who can run this: editors of the page (default), any logged-in user, or anyone.
• DB Select -> First Row -> Unzip gives one pin per column; Rows -> For Each -> Unzip handles every row.
• DB Insert / Update / Delete run only when their Trigger event fires. Update and Delete require a DB Filter and change at most Max rows it may change rows.

A copy of the site on another address (e.g. staging) disables external connections until an administrator confirms them.

1. Add a Form Data node and choose the form (any form with an ID, including Elementor forms).
2. Connect Data to Unzip: the form fields are detected and become pins.
3. Add Send Email: connect Recipient, Subject and Message (e.g. with Multi Concat) and connect Submitted to its Trigger.
4. Turn on Allow anonymous visitors to trigger this for public forms.
5. Administrators can click Send test email in the node to check that the site can send mail.

Form DataUnzipMulti ConcatSend Email

Use the Sent and Failed events of Send Email with Show Notification to tell the visitor what happened.