📃 Mockoon pre-generated templates

Example of a React Flow config

Copy
{
  "nodes": [
    {
      "id": "parent",
      "type": "default",
      "position": {
        "x": 100,
        "y": 100
      },
      "data": {
        "label": "Parent Node"
      }
    },
    {
      "id": "child1",
      "type": "default",
      "position": {
        "x": 250,
        "y": 50
      },
      "data": {
        "label": "Child Node 1"
      }
    },
    {
      "id": "child2",
      "type": "default",
      "position": {
        "x": 250,
        "y": 150
      },
      "data": {
        "label": "Child Node 2"
      }
    }
  ],
  "edges": [
    {
      "id": "edge1",
      "type": "default",
      "source": "parent",
      "target": "child1",
      "animated": true
    },
    {
      "id": "edge2",
      "type": "default",
      "source": "parent",
      "target": "child2",
      "animated": true
    }
  ]
}

This template facilitates the generation of React Flow configurations, including a parent node and two child nodes connected by animated edges. Its primary utility lies in prototyping flowcharts, diagrams, or visual representations of data flow within React applications. Additionally, it serves as a valuable resource for testing and refining visualization features, ensuring accuracy and reliability within applications. These data are perfect to prototype or serve as sample data for applications like flowchart builders, diagram editors, and data visualization tools.