JSONCrack Codebase Analysis - Part 4.1 - Editor - Panes Component
Tags: webdev, javascript, opensource, nextjs
Published: 2024-01-05 22:12:12

[jsoncrack.com](https://jsoncrack.com/editor) is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

We, at [TThroo](https://tthroo.com/), love open source and perform codebase analysis on popular repositories, document, and provide a detailed explanation of the codebase. This enables OSS enthusiasts to learn and contribute to open source projects, and we also apply these learnings in our projects.

[Part 4](https://medium.com/@ram_89216/jsoncrack-codebase-analysis-part-4-editor-c90b2f047d72) talks about how Editor component is configured for the JSONCrack. It has the components overview, but let's dig deeper into how these components are entagled together. Interesting stuff from here on as this is where we will see the usage of zustand, hooks and draw more conclusions about design patterns used in this codebase.

In this post, let's understand the editor's Panes component used in [jsoncrack.com](https://jsoncrack.com/). 

## Panes
[Panes](https://github.com/AykutSarac/jsoncrack.com/blob/main/src/containers/Editor/Panes.tsx#L27) comprise of two main components. One is the json editor and the other component renders the json as a mindmap

![Panes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guap2fdrl4mrrnkfeayp.png)

```
const Panes: React.FC = () => {
  const fullscreen = useGraph(state => state.fullscreen);

  return (
    <StyledEditor proportionalLayout={false}>
      <Allotment.Pane
        preferredSize={450}
        minSize={fullscreen ? 0 : 300}
        maxSize={800}
        visible={!fullscreen}
      >
        <JsonEditor />
      </Allotment.Pane>
      <Allotment.Pane minSize={0}>
        <LiveEditor />
      </Allotment.Pane>
    </StyledEditor>
  );
};
```
In the above code, Let's understand what `useGraph` is.

`[useGraph](https://github.com/AykutSarac/jsoncrack.com/blob/main/src/store/useGraph.ts)` is imported from `src/store/useGraph`. 

`useGraph` is a [`zustand`](https://docs.pmnd.rs/zustand/getting-started/introduction) store. You could be tempted to understand useGraph fully but hang on, we will get there. Let's take a step back and check first line inside `Panes` component. 

```
const fullscreen = useGraph(state => state.fullscreen);
```
It only relies on one value called fullscreen and that's all we have to know for now. [useGraph](https://github.com/AykutSarac/jsoncrack.com/blob/main/src/store/useGraph.ts) has a lot going on, more on that in the later of part of this series.

`fullscreen` is used to set `minSize` prop in `Panes` component, then we have `JsonEditor` and `LiveEditor`

## Conclusion:

When you are studying a new codebase, know when to stop. You cannot consume it all in one go. Which is what we did with `useGraph`, we just looked at it at high level and learnt that it uses `zustand` store and `Panes` only depends on `fullscreen` prop. In part 4.2, we will look at `JsonEditor` and in part 4.3, we will look at `LiveEditor`, this, in turn, gives us a better understanding as to how the editor changes trigger a live reload for the mindmap and how the stores are used to establish communication between these two components. It is going to be fun understanding this complicated entanglement.