A CLI tool (in examples/ or maybe available in npx?) which takes up an editorState JSON from stdin and renders read-only HTML to stdout

[vadimkantorov]

Then this tool could be used using process invocation from non-JS static site generators (e.g. I would use Lexical for my blog post editor and commit .lexical JSON files to the backing GitHub repo, and then in GitHub Actions would use some SSG tool to generate HTML from them).

I guess one could use createHeadlessEditor from https://lexical.dev/docs/packages/lexical-headless and then $generateHtmlFromNodes from https://lexical.dev/docs/packages/lexical-html, but it would be nice to have them combined in a ready-to-use CLI tool. It would also allow for the produced HTML to be in better match with what's used during editing.

Ideally, it should be possible to have the tool runnable as cat myEditorState.lexical | node lexical-render.js > my.html

---

Here is what ChatGPT suggests, need to try/fix it (npm install lexical-headless @lexical/html lexical; cat editorState.lexical | node lexical-to-html.js:

#!/usr/bin/env node

// lexical-to-html.js:

import { createHeadlessEditor } from "lexical-headless";
import { $generateHtmlFromNodes } from "@lexical/html";
import { $getRoot, EditorState } from "lexical";

// Read input from stdin
let input = "";
process.stdin.on("data", (chunk) => {
  input += chunk;
});

process.stdin.on("end", async () => {
  try {
    // Parse input JSON
    const editorStateJson = JSON.parse(input);
    
    // Create a headless editor instance
    const editor = createHeadlessEditor();
    
    // Parse the JSON into an EditorState object
    const editorState = editor.parseEditorState(editorStateJson);
    
    // Convert EditorState to HTML
    let html = "";
    editor.setEditorState(editorState);
    editor.update(() => {
      html = $generateHtmlFromNodes(editor, $getRoot());
    });
    
    // Print the HTML output
    console.log(html);
  } catch (error) {
    console.error("Error processing EditorState JSON:", error);
    process.exit(1);
  }
});

[etrepum]

This isn’t possible to implement as a general CLI tool because your editor can define nodes and override behavior. The JSON doesn’t make sense without your editor’s code and configuration. You need to write your own CLI tool that is specific to your editor’s JSON.

[vadimkantorov]

I see. But could we somehow import the needed packages on top of such CLI tool (in order to register the node types)?

I was thinking of having an example CLI script for rich text nodes (thinking of basic Markdown formatting, but as we're using the JSON directly we would sidestep the current problems with Markdown support), and maybe an example of how to import/register extra node types.

[vadimkantorov]

So I've dumped the default content's Export JSON from https://lexical.playground.dev:
testpretty.lexical.json

Running cat old/testpretty.lexical.json | node lexical-render.js (before that npm install @lexical/headless @lexical/html) prints two errors:

1. type heading not found - I guess this comes back to your comment. I added import of TextNode, now the command started completing, but prints no HTML. However, the input contains the following node types: emoji, hashtag, heading, link, list, listitem, paragraph, quote, root, text. Why does the parse not error out? Still many node types are not registered in my code snippet

2. If I do not add TextNode import, parseEditorState prints an error, but still returns and not throws. Am I using parseEditorState incorrectly? Should I instead pass in a update_fn?

3. It also appears that parseEditorState can take in a string directly, but the JSON exported from Export function in Playground has a redundant editorState, which prevents directly piping it in (it tries to read .root and fails as it would need to read .editorState.root). Maybe a better way for parseEditorState would be to also check for existing .editorState after JSON deserialization...

// lexical-render.js

import { createHeadlessEditor } from "@lexical/headless";
import { $generateHtmlFromNodes } from "@lexical/html";
import { HeadingNode } from "@lexical/rich-text";
import { TextNode, $getRoot } from "lexical";
let input = "";
process.stdin.on("data", (chunk) => {
  input += chunk;
});
process.stdin.on("end", async () => {
  try {
    const editorStateJson = JSON.parse(input).editorState;
    const editor = createHeadlessEditor({
      nodes: [TextNode, HeadingNode],
      onError: () => {},
    });
    let html = "";
    const editorState = editor.parseEditorState(editorStateJson);
    editor.setEditorState(editorState);
    editor.update(() => { html = $generateHtmlFromNodes(editor, $getRoot()); });
    console.log(html);
  } catch (error) {
    console.error("Error processing EditorState JSON:", error);
    process.exit(1);
  }
});

[vadimkantorov]

My current version of code below. Current head scratches:

1. Unclear why it silently did not print anything when I did not have node registrations except TextNode

2. For registration of EmojiNode, I would have to do TypeScript transpilation of EmojiNode.tsx which I don't know how to do yet. A full standalone example of such a CLI tool (with its own package.json) would be very helpful for me as I'm not a web dev, so am hitting the wall even for such basic things :( An examples/ standalone sample project with all ts/tsc/tsx set up and an example of using extra nodes (like EmojiNode from Playground) and still being a CLI tool would be very welcome

3. At the end I made it print some HTML (see below)! Then then next question is: how to style the output? Is it possible to make the HTML preserve at least the original node types as CSS classes? (this would allow to do some custom per-nodetype styling)

// lexical-render.js

import { TextNode, $getRoot, $selectAll } from "lexical";
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
import { LinkNode } from "@lexical/link";
import { HashtagNode } from "@lexical/hashtag";
import { ListNode, ListItemNode } from "@lexical/list";
import { createHeadlessEditor } from "@lexical/headless";
import { $generateHtmlFromNodes } from "@lexical/html";
import { JSDOM } from 'jsdom';

let input = "", html = "";
const editor = createHeadlessEditor({
  nodes: [TextNode, HeadingNode, QuoteNode, LinkNode, HashtagNode, ListNode, ListItemNode],
  onError: (error) => { throw error;},
});

const dom = new JSDOM();
global.window = dom.window;
global.document = dom.window.document;

process.stdin.on("data", (chunk) => {  input += chunk; });
process.stdin.on("end", async () => 
{
  try
  {
    const editorStateJson = JSON.parse(input).editorState;
    const editorState = editor.parseEditorState(editorStateJson);
    editor.setEditorState(editorState);
    editor.update(() => { html = $generateHtmlFromNodes(editor, $selectAll()); });
    console.log(html);
  }
  catch (error)
  {
    console.error("Error processing EditorState JSON:", error);
    process.exit(1);
  }
});

prints some html (prettified):

<h1 dir="ltr">
	<span style="white-space: pre-wrap;">Welcome to the playground</span>
</h1>
<blockquote dir="ltr">
	<span style="white-space: pre-wrap;">In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.</span>
</blockquote>
<p dir="ltr">
	<span style="white-space: pre-wrap;">The playground is a demo environment built with </span>
	<code spellcheck="false" style="white-space: pre-wrap;">
		<span>@lexical/react</span>
	</code>
	<span style="white-space: pre-wrap;">. Try typing in </span>
	<b>
		<strong style="white-space: pre-wrap;">some text</strong>
	</b>
	<span style="white-space: pre-wrap;"> with </span>
	<i>
		<em style="white-space: pre-wrap;">different</em>
	</i>
	<span style="white-space: pre-wrap;"> formats.</span>
</p>
<p dir="ltr">
	<span style="white-space: pre-wrap;">Make sure to check out the various plugins in the toolbar. You can also use </span>
	<span style="white-space: pre-wrap;">#hashtags</span>
	<span style="white-space: pre-wrap;"> or @-mentions too!</span>
</p>
<p dir="ltr">
	<span style="white-space: pre-wrap;">If you'd like to find out more about Lexical, you can:</span>
</p>
<ul>
	<li value="1">
		<span style="white-space: pre-wrap;">Visit the </span>
		<a href="https://lexical.dev/">
			<span style="white-space: pre-wrap;">Lexical website</span>
		</a>
		<span style="white-space: pre-wrap;"> for documentation and more information.</span>
	</li>
	<li value="2">
		<span style="white-space: pre-wrap;">Check out the code on our </span>
		<a href="https://github.com/facebook/lexical">
			<span style="white-space: pre-wrap;">GitHub repository</span>
		</a>
		<span style="white-space: pre-wrap;">.</span>
	</li>
	<li value="3">
		<span style="white-space: pre-wrap;">Playground code can be found </span>
		<a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">
			<span style="white-space: pre-wrap;">here</span>
		</a>
		<span style="white-space: pre-wrap;">.</span>
	</li>
	<li value="4">
		<span style="white-space: pre-wrap;">Join our </span>
		<a href="https://discord.com/invite/KmG4wQnnD9">
			<span style="white-space: pre-wrap;">Discord Server</span>
		</a>
		<span style="white-space: pre-wrap;"> and chat with the team.</span>
	</li>
</ul>
<p dir="ltr">
	<span style="white-space: pre-wrap;">Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance </span>
	<span style="white-space: pre-wrap;">.</span>
</p>

[vadimkantorov]

I put in my current solution in https://github.com/vadimkantorov/lexical-cli-render

Looking for help on how to add EmojiNode (in EmojiNode.tsx) registration:

• figuring out how to run TypeScript / JSX using node (*.ts script making use of EmojiNode in *.tsx). Modern versions of nodejs (22 and 23) support native running of TypeScript, but need to figure out how to make such TypeScript file import and use EmojiNode from *.tsx. Maybe babel-node is needed for this? (https://hexmen.com/blog/run-tsx-from-command-line/)
• fix up import of EmojiNode in lexical-cli-render.ts

Looking forward for any help :)

Thank you!

---

UPD: currently figured out how to import EmojiNode and run with ts-node (followed https://hexmen.com/blog/run-tsx-from-command-line/) - working solution in https://github.com/vadimkantorov/lexical-cli-render/

Remaining questions:

1. how to style the produced HTML tags? at the very least, how to ask lexical to add css classes to preserve the original node types? (and maybe replace style="white-space: pre-wrap; with some CSS class)
2. Is there a better, more direct way of using JSDom with Lexical Headless instead of patching global.window and global.document?

---

@etrepum maybe my repo can be converted to ./examples/cli-render? The example https://github.com/vadimkantorov/lexical-cli-render/blob/master/.github/workflows/build.yml runs successfully. So if package.json / tsconfig.json is okay (maybe worth unpinning versions?), and if you are interested and could guide me - I can send a PR with such a SSR CLI tool into examples/