🌱 Leafnode

Leafnode is a JSON WYSIWYG for React, which makes viewing and editing content just a little more fun.

Try it out: web playground.

Getting Started

// npm/bun-install "@lostintangent/leafnode". And then...

import { Leafnode } from "@lostintangent/leafnode";

<Leafnode
  content={json}
  onContentChanged={setJson} // Omitting this makes the editor read-only
/>;

Agent Requests

In order to allow agentic collaboration on the editor, you can pass an agent prop to the component, which is an object with two properites:

1. activePointers - A list of JSON pointers (e.g. /settings/0/name) which have an agent actively working on them. Note that you aren't expected to construct this list yourself, but rather, track it based on the requests made by the end-user (see next property).

2. onRequest - A callback that is run every time the end-user clicks the Ask Agent... menu item for a node. The callback will receive an object with two properties: pointer (the JSON pointer for the selected node) and value (the JSON value for the selected node). You are expected to take the pointer/value/associated file, construct a prompt and then allow the agent to mutate the file as appropriate. And while a request is active, you should pass the provided pointer back into the activePointers state so that the editor can track which requests are in flight and display a spinner next to the node.

Note: Take a look at the /playground for an example of how to implement this contract.

Theming

By default, Leafnode comes with a built-in light and dark theme, and will detect the end-users configured color scheme. But if you'd like to customize the theme for your app environment, simply set the theme prop to an object with the following four color tokens:

1. accent - Hover backgrounds, checkboxes, reference links, and active request spinners
2. background - Background color for the editor and hovers/menus
3. muted - Expand/collapse buttons, drag handles, node summaries, menu seperators, and null values
4. text - Text for node keys and menu items

Note: The color for string/number/boolean values are currently fixed, but I can easily added theme tokens for those as needed.