FlexiScore Editor

FlexiScore Editor is a React tool for building credit scoring decisions.

It’s a fork of the open-source JDM Editor and lets you visually create decision flows — like eligibility checks, scorecards, adjustments, risk grades, and final decisions all in one place.

By using a clear visual interface with JSON underneath, it makes building, understanding, and updating credit rules much easier for developers and analysts.

Installation

1. Clone the repo

git clone https://github.com/jkatumba/flexiscore-editor.git
cd flexiscore-editor

---

2. Install dependencies

run:

pnpm install

This will install all dependencies listed in the package.json.

---

3. Build the library

pnpm run build

This will create a compiled version of the library in the dist/ folder, ready to use in your project.

---

4. Add it to your project

From your project root, run:

pnpm add ../flexiscore-editor

---

pnpm run dev

Usage

...
import '@gorules/jdm-editor/dist/style.css';
import { DecisionGraph, JdmConfigProvider } from '@gorules/jdm-editor';
...

<JdmConfigProvider>
  <DecisionGraph
    value={graph}
    onChange={(val) => setGraph(val as any)}
  />
</JdmConfigProvider>

Here’s a simplified, easy-to-understand guide for developers on how to use your FlexiScore Editor library, without all the verbose details from your full example:

---

Using FlexiScore Editor in Your Project

1. Import the components

"use client";

import dynamic from "next/dynamic";
import "@gorules/jdm-editor/dist/style.css"; // styles

// Dynamically import core components
const DecisionGraph = dynamic(() => import("flexiscore-editor").then(mod => mod.DecisionGraph), { ssr: false });
const JdmConfigProvider = dynamic(() => import("flexiscore-editor").then(mod => mod.JdmConfigProvider), { ssr: false });
const GraphSimulator = dynamic(() => import("flexiscore-editor").then(mod => mod.GraphSimulator), { ssr: false });

2. Set up a graph state

import { useState } from "react";

const emptyGraph = { nodes: [], edges: [] };
const [graph, setGraph] = useState(emptyGraph);

3. Handle graph changes

const handleGraphChange = (newGraph) => {
  setGraph(newGraph);
  localStorage.setItem("flexiscore-graph", JSON.stringify(newGraph));
};

4. Add simulation panel

const panels = [
  {
    id: "simulator",
    title: "Simulator",
    renderPanel: () => <GraphSimulator defaultRequest={`{ "input": 15 }`} onRun={yourSimulationHandler} />,
  },
];

5. Render the editor

<JdmConfigProvider>
  <DecisionGraph
    value={graph}
    onChange={handleGraphChange}
    panels={panels}
  />
</JdmConfigProvider>

---

Notes

• DecisionGraph = main editor
• JdmConfigProvider = context/config wrapper
• GraphSimulator = optional simulation panel
• The graph state stores your nodes and edges as JSON (JDM)
• You can save/load the graph from localStorage or backend

---

License

MIT © GoRules