DS Algorithm Visualizer Workbench

React + TypeScript + SVG data structure and algorithm visualization workbench.

It includes:

• 58 ready demos across linear lists, stacks/queues, arrays/matrix compression, strings, trees, graphs, searching, and sorting.
• User-editable input data.
• Step playback controls.
• Pseudocode panel.
• C / C++ / Java / Python textbook-style code samples.

Install

npm install ds-algorithm-visualizer-workbench

Peer dependencies:

npm install react react-dom lucide-react

React Usage

import { AlgorithmVisualizer } from "ds-algorithm-visualizer-workbench";
import "ds-algorithm-visualizer-workbench/style.css";

export default function App() {
  return <AlgorithmVisualizer />;
}

Vite Integration

// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { AlgorithmVisualizer } from "ds-algorithm-visualizer-workbench";
import "ds-algorithm-visualizer-workbench/style.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <AlgorithmVisualizer />
  </React.StrictMode>
);

Next.js Integration

Use it as a client component:

"use client";

import { AlgorithmVisualizer } from "ds-algorithm-visualizer-workbench";
import "ds-algorithm-visualizer-workbench/style.css";

export default function AlgorithmsPage() {
  return <AlgorithmVisualizer />;
}

Data APIs

You can also reuse catalog and scenario data:

import {
  algorithmCatalog,
  readyScenarios,
  readyScenarioMap
} from "ds-algorithm-visualizer-workbench";

const quickSort = readyScenarioMap.get("quick-sort");
const steps = quickSort?.generateSteps("5,3,8,1");

Publish

This machine must be logged in to npm before publishing:

npm adduser
npm publish --access public

Before publish, the package runs:

npm test
npm run build:lib

Local Development

npm install
npm run dev
npm test
npm run build
npm run build:lib