A React Flow DAG extension for blockr. Drop-in replacement for blockr.dag — same interface, better rendering engine.

remotes::install_github("blockr-org/blockr.react")

library(blockr.react)
library(blockr.core)
library(blockr.dock)

serve(
  new_dock_board(
    blocks = c(
      a = new_dataset_block("iris"),
      b = new_scatter_block(x = "Sepal.Length", y = "Sepal.Width")
    ),
    links = list(from = "a", to = "b", input = "data"),
    extensions = new_react_extension()
  )
)

Replace new_dag_extension() with new_react_extension(). Everything else stays the same.

• Drag-and-drop DAG visualization powered by React Flow
• Dagre auto-layout (right-click canvas > Auto layout)
• Context menu: add/remove blocks, create/edit/remove stacks, copy/cut/paste
• Edge creation by dragging between handles
• Drag to canvas to append new blocks
• Stacks (visual grouping of blocks)
• Edge labels shown on hover
• Keyboard shortcuts: Delete, Cmd/Ctrl+C/X/V
• Error badges on blocks

Requires Node.js for building the JS bundle.

cd blockr.react

# Install JS dependencies
npm install

# Build the widget (after editing srcjs/*.jsx)
npm run build

# Install the R package locally
R CMD INSTALL .

The built files inst/htmlwidgets/reactflow.js and inst/htmlwidgets/reactflow.css are committed to the repository so that the package can be installed directly from GitHub without Node.js.

srcjs/               # React source (edit these)
  index.jsx          # htmlwidget <-> React bridge
  DAGCanvas.jsx      # Main React Flow component
  BlockNode.jsx      # Custom node (icon + label + handles)
  GroupNode.jsx      # Stack group node
  LabelEdge.jsx      # Edge with hover label
  ContextMenu.jsx    # Right-click menu
R/                   # R package source
inst/htmlwidgets/    # Built JS/CSS (committed)

R: blockr.core, blockr.dock, shiny, htmlwidgets, jsonlite, htmltools

JS (bundled): react, react-dom, @xyflow/react, dagre