SplitCanvasTemplate

Stable

Chat or controls on the left, and the thing you are making on the right.

Also known as split layout, canvas layout, two pane layout

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

<div className="h-105 overflow-hidden rounded-card border border-line">
  <AppShell>
    <SplitCanvasTemplate
      primary={<Composer onSend={() => {}} />}
      canvas={
        <CanvasPanel title="Launch announcement.md">
          <Markdown>{"# Launch announcement\n\nA calmer way to build with AI."}</Markdown>
        </CanvasPanel>
      }
    />
  </AppShell>
</div>

A document on the right. On a narrow screen the two sides stack.

Usage Code Design Accessibility

When to use it

Splits the main area in two: chat or controls on the left, the thing being made on the right. The work stays in view while the person keeps changing it.

Made of: Left side · Canvas (right side)

Use it for

Editing a document or code with the assistant beside it.
A studio with the prompt and options on the left and the chosen draft on the right.
Any screen where the result must stay visible while people work.

Not for

A plain chat with no lasting result: use ThreadTemplate.
A new chat before the first message: use HomeTemplate.

Do and avoid

Welcome email

Make it shorter

Welcome email

Hi Sam, thanks for joining. Here is how to get started this week.

Do. Sketch: the draft stays in view on the right while you change it.

Baggage question

Are bags free?

Yes, up to 20 kg.

Avoid. Sketch: a plain chat answer on the canvas wastes half the screen.

Do

Put a CanvasPanel on the right so it fills the height.
Use it when the result should stay in view while the person makes changes.
Keep the controls for making things on the left.
Check the stacked layout on small screens, where the canvas comes after the left side.

Avoid

Do not use it for plain chat. ThreadTemplate is the right frame.
Do not put lasting content on the left and short-lived content on the canvas. The canvas is for the thing being made.
Do not set fixed heights on the sides. The template handles overflow itself.

On a phone

Below the lg breakpoint the conversation and the canvas stack in one column, conversation first, and the page scrolls as one.
The stacked canvas is at least 22.5rem tall; from lg up the two sit side by side and scroll separately.
Side padding is 1rem on a phone and 1.5rem from sm.

Properties

Prop	Type	Default	Description
primaryrequired	ReactNode	none	Left column: the conversation or controls. Wrapped in a section named by primaryLabel (default Conversation) that scrolls and spaces its children by 24px.
canvasrequired	ReactNode	none	Right column: the artifact that outlives a single message, usually CanvasPanel. Wrapped in a section named by canvasLabel (default Canvas). Stacks under primary on narrow screens.
primaryLabel	string	"Conversation"	Accessible name for the left region. Change it when the column holds controls rather than a chat.
canvasLabel	string	"Canvas"	Accessible name for the right region.

"Show code under the preview gives the code for the example on the stage."

Tokens

Change one of these and every part that uses it follows.

gap-4 / p-4
grid-cols 5fr / 6fr at lg
min-h-90 canvas on small screens

A prompt and a canvas

When to use it

Use it for

Not for

Do and avoid

Do

Avoid

On a phone

Works with

Properties

Tokens

Built in

What you need to do

Build your next AI screen with Tattva.