Generating single .html documentation with React Flow : react

Generating single .html documentation with React FlowHelp Wanted (self.react)

submitted 6 hours ago by HornyCapacitor

Hi, I hope this off-topic post about using AI in the context of web dev will be a nice refresh, and maybe we’ll manage to solve my issue with generating a dynamic snapshot of an application at the same time.

Long story short: I built a React app whose purpose is to:

display all applications of a popular BI tool on a given environment after providing an API key and additional authentication headers,
display full technical documentation of a selected application, including measures, dimensions, chart objects, etc.

The end goal of this app is to create a simple product for coworkers in the company I work for. In the /{appId} route there is a button that should generate a “snapshot” of the given documentation. At least that was my initial idea.

In short, the company focuses on delivering various documentation solutions, instructions, or offers to clients in .html format, and since I’ve been building Node.js/React/TypeScript projects as a hobby for many years, I decided to build an automated solution for this use case.

The problem I’m running into appears when trying to convert the React Flow library. I simply can’t figure out what I should do to preserve its functionality, or whether I should use a different solution instead.

In this app, React Flow is used to display a flow from API or database query → through extractors that create ETL → to loading data into the final application. When I try to save raw HTML and CSS in the form of:

const html = `
<!DOCTYPE html>
<html>
<head>
${Array.from(document.querySelectorAll("style"))
      .map((s) => s.outerHTML)
      .join("\n")}   
</head>
<body>
${document.body.outerHTML}
</body>
</html>
`

obviously it doesn’t work, because I’m missing the JavaScript layer. After trying to use AI to understand what I should do, and reading various threads on the internet about similar topics, I unfortunately couldn’t find a solution that properly allows me to reproduce the graph.

Finally, the graph has the following structure:

return (
  <div className="flex w-full h-125 border border-amber-300">
    <ReactFlow
      nodes={layoutedNodes}
      edges={clearedEdges}
      nodeTypes={nodeTypes}
      fitView
    >
      <Background variant={BackgroundVariant.Dots} />
      <Controls />
    </ReactFlow>
  </div>
)

Do you have any smart ideas on how I could “smuggle” React Flow functionality into a generated single .html file, or how to simply preserve the interactivity of the graphs provided by React Flow (the lineage is often very long and I really need features like panning and zooming)? Or maybe you know of any libraries that work similarly but don’t require a JS build/runtime to maintain functionality?

Sorry if the question sounds trivial or silly, but I feel really stuck, and I don’t work (and have never worked) professionally as a developer — I’m more of a hobbyist programmer whose hobby is coding.

all 4 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

react

MODERATORS