### Setup Standalone react-jsoncanvas Application

Source: https://context7.com/digital-tvilling/react-jsoncanvas/llms.txt

Provides bash commands to clone the react-jsoncanvas repository, install dependencies, and start the development server. It also includes commands for building and previewing the production build, as well as running the linter. This setup allows for development and testing of the component.

```bash
# Clone the repository
git clone https://github.com/Digital-Tvilling/react-jsoncanvas.git
cd react-jsoncanvas

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linter
npm run lint

```

--------------------------------

### Start Development Environment

Source: https://github.com/digital-tvilling/react-jsoncanvas/blob/main/README.md

Starts the development server for react-jsoncanvas. This command allows you to view and test the application during development.

```shell
npm run dev
```

--------------------------------

### Install Dependencies with NPM

Source: https://github.com/digital-tvilling/react-jsoncanvas/blob/main/README.md

Installs the necessary Node Package Manager (NPM) dependencies for the react-jsoncanvas project. This command should be run after cloning the repository.

```shell
npm install
```

--------------------------------

### Install react-jsoncanvas as Local Dependency

Source: https://github.com/digital-tvilling/react-jsoncanvas/blob/main/README.md

Installs react-jsoncanvas as a local dependency in your project by providing the path to the cloned repository. This method is experimental and may only work in development environments.

```shell
npm install ./react-jsoncanvas
```

--------------------------------

### Import Components from Local Dependency

Source: https://github.com/digital-tvilling/react-jsoncanvas/blob/main/README.md

Demonstrates how to import components from react-jsoncanvas once it's installed as a local dependency. This allows you to use its features in your React project.

```javascript
import { CanvasContent, Canvas, Node, Edge } from 'react-jsoncanvas'
```

--------------------------------

### Integrate react-jsoncanvas as Local NPM Dependency

Source: https://context7.com/digital-tvilling/react-jsoncanvas/llms.txt

Demonstrates how to integrate react-jsoncanvas into another React project as a local npm package. It involves cloning the repository and installing it using a file path. The 'package.json' will reflect this local dependency, enabling direct imports of components and types.

```bash
# In your project directory, clone react-jsoncanvas
git clone https://github.com/Digital-Tvilling/react-jsoncanvas.git

# Install as local dependency
npm install ./react-jsoncanvas

# Your package.json will now contain:
# "react-jsoncanvas": "file:react-jsoncanvas"

```

--------------------------------

### Use react-jsoncanvas in a React Application

Source: https://context7.com/digital-tvilling/react-jsoncanvas/llms.txt

Shows a React component that utilizes the 'Canvas' component from 'react-jsoncanvas'. It imports custom canvas data from a local JSON file and renders it within a specified viewport size. This example illustrates how to embed and display a canvas within an existing React application.

```tsx
import { Canvas, CanvasContent, Node, Edge } from 'react-jsoncanvas'
import canvasData from './my-canvas-data.json'

function MyCanvasViewer() {
  const content: CanvasContent = canvasData as CanvasContent

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Canvas content={content} />
    </div>
  )
}

export default MyCanvasViewer

```

--------------------------------

### Calculate Anchor Point for Edge Connection

Source: https://context7.com/digital-tvilling/react-jsoncanvas/llms.txt

Provides an example of the `getAnchorPoint` utility function, which calculates the coordinates for attaching an edge to a specific side of a DOM element representing a node. It takes a DOM element and a side ('top', 'right', 'bottom', 'left') as input and returns an object with `x` and `y` coordinates.

```typescript
import { getAnchorPoint } from './lib/getAnchorPoint'

// Get anchor point for a DOM element
const nodeElement = document.getElementById('my-node')
const rightAnchor = getAnchorPoint(nodeElement, 'right')
// Returns: { x: 500, y: 250 } - right center of the node

const topAnchor = getAnchorPoint(nodeElement, 'top')
// Returns: { x: 350, y: 150 } - top center of the node
```

--------------------------------

### Generate SVG Path Data for Edge Curves

Source: https://context7.com/digital-tvilling/react-jsoncanvas/llms.txt

Demonstrates the `createPath` function, which generates SVG path data strings for bezier curves. This function is crucial for rendering visually appealing edges between nodes. It takes start and end points, curve tightness, line length, and connection sides as parameters.

```typescript
import { createPath } from './lib/createPath'
import { Point } from './types'

const fromPoint: Point = { x: 100, y: 200 }
const toPoint: Point = { x: 400, y: 300 }
const curveTightness = 0.75
const straightLineLength = 30

const pathData = createPath(
  fromPoint,
  toPoint,
  curveTightness,
  straightLineLength,
  'right',  // from side
  'left'    // to side
)

// Returns SVG path string:
// "M 100 200 L 130 200 C 130 200, 370 300, 370 300 L 400 300"
// Use this with: <path d={pathData} />
```

--------------------------------

### Clone react-jsoncanvas Repository

Source: https://github.com/digital-tvilling/react-jsoncanvas/blob/main/README.md

Clones the react-jsoncanvas repository from GitHub. This is the first step to use the application as a standalone or as a local dependency.

```shell
git clone https://github.com/Digital-Tvilling/react-jsoncanvas.git
```

--------------------------------

### Render JSON Canvas with React Components

Source: https://context7.com/digital-tvilling/react-jsoncanvas/llms.txt

Demonstrates how to use the `Canvas` component to render a JSON Canvas structure. It requires `Canvas` and `CanvasContent` types from the library and accepts a `content` prop containing nodes and edges. The `CanvasContent` type defines the structure for edges and initial nodes.

```tsx
import { Canvas, CanvasContent } from 'react-jsoncanvas'

const canvasData: CanvasContent = {
  edges: [
    {
      id: "edge1",
      fromNode: "node1",
      fromSide: "right",
      toNode: "node2",
      toSide: "left",
      toEnd: "arrow"
    }
  ],
  initialNodes: [
    {
      id: "node1",
      type: "text",
      label: "First Node",
      text: "# Hello\nThis is markdown content",
      file: "",
      x: 100,
      y: 100,
      width: 300,
      height: 200,
      color: "1"
    },
    {
      id: "node2",
      type: "text",
      label: "Second Node",
      text: "Connected node with **bold text**",
      file: "",
      x: 500,
      y: 100,
      width: 300,
      height: 200,
      color: "2"
    }
  ]
}

function App() {
  return <Canvas content={canvasData} />
}
```

--------------------------------

### Render Individual Canvas Node with Markdown

Source: https://context7.com/digital-tvilling/react-jsoncanvas/llms.txt

Shows how to render a single `CanvasNode` component. This component is responsible for displaying a node's content, including markdown text, label, and color. It accepts a `node` object conforming to the `Node` type and transformation props (`scale`, `translateX`, `translateY`).

```tsx
import { CanvasNode } from './components/CanvasNode'
import { Node } from './types'

const node: Node = {
  id: "demo-node",
  type: "text",
  label: "Documentation",
  text: "\n## Features\n- Markdown support\n- Code highlighting\n- Tables and lists\n\n```typescript\nfunction example() {\n  return \"Syntax highlighting works!\"
}
```\n  ",
  file: "",
  x: 200,
  y: 150,
  width: 400,
  height: 300,
  color: "4" // green
}

// Used internally by Canvas component
<CanvasNode
  node={node}
  scale={1}
  translateX={0}
  translateY={0}
/>
```

--------------------------------

### Dynamically Create and Load Custom Canvas Data in React

Source: https://context7.com/digital-tvilling/react-jsoncanvas/llms.txt

A React component that dynamically loads and renders canvas data. It uses the 'useState' and 'useEffect' hooks to fetch data from an API endpoint and then transforms it into the 'CanvasContent' structure required by the 'react-jsoncanvas' component. It includes a loading state and error handling.

```tsx
import { Canvas, CanvasContent } from 'react-jsoncanvas'
import { useState, useEffect } from 'react'

function DynamicCanvas() {
  const [content, setContent] = useState<CanvasContent | null>(null)

  useEffect(() => {
    // Fetch or generate canvas data
    fetch('/api/canvas-data')
      .then(res => res.json())
      .then(data => {
        const canvasContent: CanvasContent = {
          edges: data.connections.map(conn => ({
            id: conn.id,
            fromNode: conn.source,
            fromSide: conn.sourceAnchor || 'right',
            toNode: conn.target,
            toSide: conn.targetAnchor || 'left',
            toEnd: 'arrow'
          })),
          initialNodes: data.items.map(item => ({
            id: item.id,
            type: item.type || 'text',
            label: item.title,
            text: item.content,
            file: item.fileContent || '',
            x: item.position.x,
            y: item.position.y,
            width: item.size.width,
            height: item.size.height,
            color: item.color
          }))
        }
        setContent(canvasContent)
      })
      .catch(err => console.error('Failed to load canvas:', err))
  }, [])

  if (!content) return <div>Loading canvas...</div>

  return <Canvas content={content} />
}

```

--------------------------------

### TypeScript Type Definitions for react-jsoncanvas

Source: https://context7.com/digital-tvilling/react-jsoncanvas/llms.txt

Defines the core TypeScript interfaces for CanvasContent, Node, and Edge structures used by react-jsoncanvas. It specifies types for directions, marker types, and node properties including colors, dimensions, and content. These interfaces ensure type safety when working with canvas data.

```typescript
import { CanvasContent, Node, Edge, Direction, MarkerType } from 'react-jsoncanvas'

// Full canvas data structure
const canvasContent: CanvasContent = {
  edges: [
    {
      id: "connection1",
      fromNode: "source-id",
      fromSide: "right" as Direction,
      fromEnd: "none" as MarkerType,
      toNode: "target-id",
      toSide: "left" as Direction,
      toEnd: "arrow" as MarkerType,
      label: "Optional edge label"
    }
  ],
  initialNodes: [
    {
      id: "node-id",
      type: "text", // or "group"
      label: "Node Title",
      text: "Markdown content here",
      file: "Or file content",
      x: 0,
      y: 0,
      width: 250,
      height: 150,
      color: "1" // 1-6 for predefined colors
    }
  ]
}

// Available colors
// '1': red, '2': orange, '3': yellow,
// '4': green, '5': cyan, '6': purple

```

--------------------------------

### Render Edges Between Canvas Nodes

Source: https://context7.com/digital-tvilling/react-jsoncanvas/llms.txt

Illustrates the usage of the `Edges` component for drawing connection lines between nodes. It takes the `CanvasContent` object, which includes an `edges` array, and applies transformations. The `Edges` component uses the `createPath` function internally to generate SVG path data.

```tsx
import { Edges } from './components/Edges'
import { CanvasContent } from './types'

const content: CanvasContent = {
  edges: [
    {
      id: "edge1",
      fromNode: "nodeA",
      fromSide: "bottom",
      toNode: "nodeB",
      toSide: "top",
      toEnd: "arrow"
    },
    {
      id: "edge2",
      fromNode: "nodeB",
      fromSide: "right",
      toNode: "nodeC",
      toSide: "left",
      fromEnd: "arrow",
      toEnd: "none"
    }
  ],
  initialNodes: [
    // nodes data...
  ]
}

// Used internally by Canvas component
<Edges
  scale={1}
  content={content}
  translateX={0}
  translateY={0}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.