📐 Canvas & Positioning

How do I put something at an exact position instead of in the flow?

1 min readView as markdown

Most slides should use normal flow layout. Canvas is for the ones that should not — diagrams, annotated screenshots, anything where an element belongs at a specific point.

Canvas

import { Canvas, CanvasElement, CanvasShape } from "@getnarro/core";

<Slide id="architecture">
  <Canvas>{/* positioned children */}</Canvas>
</Slide>;

CanvasElement

Positions any content. x and y are percentages of the slide by default, so a deck keeps its layout at every resolution.

<CanvasElement x={10} y={20} width={30} height={15}>
  <div className="rounded bg-blue-500 p-4">Top left area</div>
</CanvasElement>

<CanvasElement x="100px" y="50px" rotate={45} opacity={0.8} zIndex={2}>
  <Text>Rotated, semi-transparent</Text>
</CanvasElement>

Pass a string with a unit ("100px") to position in pixels instead.

CanvasShape

Ten built-in shapes, drawn as SVG so they stay crisp at any scale:

`circle`, `rectangle`, `triangle`, `star`, `hexagon`, `pentagon`, `arrow`, `diamond`, `ellipse`, `cloud` 
<CanvasShape shape="circle" x={50} y={50} size={100} color="#3b82f6" />

<CanvasShape
  shape="hexagon"
  x={400}
  y={150}
  size={90}
  color="#8b5cf6"
  stroke="#ffffff"
  strokeWidth={2}
  opacity={0.8}
  rotate={15}
/>

When not to use it

Absolute positioning does not reflow. A canvas slide that looks right at 16:9 can overlap at 4:3, and text inside one will not wrap into a new line as it grows. For anything that is fundamentally a list, a comparison, or a body of text, use SlideContent and a layout component — they adapt, and they will still look right on a projector you have not seen.

Exact prop tables are in the component reference.

IntroductionWhat is Narro, and should I be writing markdown or React?
InstallationWhat do I install, and what does the project look like afterwards?
First DeckWhat does a working React deck look like, end to end?
Markdown ModeHow do I split a slide, style one word, or reveal a line — without leaving the markdown file?
Writing AI PromptsWhat do I tell an AI so the deck it writes actually builds?
Rules for AI AgentsWhat do I paste into my repo so an agent stops writing decks that build wrong?
React APIWhich component or hook do I import, and what does it take?
CLIWhich command do I run, and what are its flags?
Markdown APIHow do I read, edit, or validate a deck file from my own code instead of by hand?
Component ReferenceWhat props does this component take, and which package do I import it from?
Verifying a deckHow do I know my deck is actually correct?
AnimationHow do I reveal a list one line at a time, or move between slides with something other than a cut?
NavigationHow does the audience move through the deck, and how do I present it?
Canvas & PositioningHow do I put something at an exact position instead of in the flow?
Images & MediaHow do I use an image as a background, tint it, or embed a video?
ArchitectureWhich package owns what, and why is the seam where it is?
Transform ModeHow do I zoom and pan across one big canvas instead of cutting between slides?
Import & ExportHow do I get this deck out as PPTX, PDF, or one file I can email?
AI IntegrationHow do I wire an AI assistant up to Narro so it can write and build decks?
ThemingHow do I change the colours, fonts, and overall look of a deck?
Deck TemplatesHow do I define one house style with named layouts my slides can reference, like a PowerPoint master?
TroubleshootingSomething is wrong with my deck. What is it, and how do I fix it?
LimitationsWhat can't Narro do, and what do I do instead?