Frontend Hire

Let us see how we are building again so that we can understand the layout of our application.

Our Layout

The layout of our application is divided into three sections: the code editor, the terminal, and the browser output. The panels are resizable, which means you can adjust the size of each panel to suit your needs. We can make the code editor larger if we need more space to write code or make the browser output larger to see more of the output.

We could build out the logic of the resizable panels, but it is a pain, and we might ignore too many edge cases and performance issues. Ideally, reaching out to a robust library is a better option, and we save a lot of time.

React Resizeable Panels is the react library that will help us build the layout without much effort.

Let us install it now:

npm install react-resizable-panels@2.0.16

Update our src/App.tsx file to structure our layout quickly.

src/App.tsx

import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
export default function App() {
  return (
    <PanelGroup direction="horizontal">
      <Panel>
        <PanelGroup direction="vertical">
          <Panel>
            <div>Code Editor</div>
          </Panel>
          <PanelResizeHandle />
          <Panel>
            <div>Terminal</div>
          </Panel>
        </PanelGroup>
      </Panel>
      <PanelResizeHandle />
      <Panel>
        <div>Preview</div>
      </Panel>
    </PanelGroup>
  );
}

Our output looks quite weird at the moment.

Broken output

Let us fix it.

src/App.tsx

import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
export default function App() {
  return (
    <div className="h-dvh p-2">
      <PanelGroup direction="horizontal">
        <Panel>
          <PanelGroup direction="vertical">
            <Panel>
              <div className="border">Code Editor</div>
            </Panel>
            <PanelResizeHandle />
            <Panel>
              <div className="border">Terminal</div>
            </Panel>
          </PanelGroup>
        </Panel>
        <PanelResizeHandle />
        <Panel>
          <div className="border">Preview</div>
        </Panel>
      </PanelGroup>
    </div>
  );
}

We wrapped the top-level panel group inside a div and gave the div a full height and a bit of padding on all sides. At the same time, we are adding border to our code editor, terminal, and preview divisions for better visual understanding.

Our app should look better now now.

Better layout

Our resize works, but the handles are not visually evident. Let us fix that.

src/App.tsx

import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
export default function App() {
  return (
    <div className="h-dvh p-2">
      <PanelGroup direction="horizontal">
        <Panel>
          <PanelGroup direction="vertical">
            <Panel>
              <div className="border">Code Editor</div>
            </Panel>
            <PanelResizeHandle className="h-2 bg-blue-300" />
            <Panel>
              <div className="border">Terminal</div>
            </Panel>
          </PanelGroup>
        </Panel>
        <PanelResizeHandle className="w-2 bg-blue-300" />
        <Panel>
          <div className="border">Preview</div>
        </Panel>
      </PanelGroup>
    </div>
  );
}

We added a bit of height to our first resize handler since it is horizontal and a bit of width to our other resize handler since it is vertical. Both take a background color of blue-300.

Next, we want to ensure the code editor, preview, and terminal divs occupy all the space inside the panels. We will add a bit of red background color to help us visually see the differences.

src/App.tsx

import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
export default function App() {
  return (
    <div className="h-dvh p-2">
      <PanelGroup direction="horizontal">
        <Panel>
          <PanelGroup direction="vertical">
            <Panel>
              <div className="h-full border bg-red-100">Code Editor</div>
            </Panel>
            <PanelResizeHandle className="h-2 bg-blue-300" />
            <Panel>
              <div className="h-full border bg-red-100">Terminal</div>
            </Panel>
          </PanelGroup>
        </Panel>
        <PanelResizeHandle className="w-2 bg-blue-300" />
        <Panel>
          <div className="h-full border bg-red-100">Preview</div>
        </Panel>
      </PanelGroup>
    </div>
  );
}

Our layout should look like this now.

Full page layout

Perfect, we will remove the red background color later when we clean up things. However, we can now integrate the other core components that build our application.

In the next section, we will consider what component to make next; this is important because it will significantly affect our codebase.

At this point, our code should match the code in the branch 2-layout.

Building Layout

Our Layout

On this page