1<!DOCTYPE html><html data-dpl-id="dpl_AsY5y7rL9jpSx9q16MTYDibA2poc" lang="en" class="geistsans_d5a4f12f-module__qeCmSq__className geistsans_d5a4f12f-module__qeCmSq__variable geistmono_157ca88a-module__vjDhbq__variable"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/immutable/media/GeistMono_Variable.p.0b02cdm7g7y6h.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/Geist_Variable-s.p.2-i4fw5gbtlb7.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/immutable/chunks/1y03b1ghqvsyv.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/immutable/chunks/2b6yr5up--bg4.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/immutable/chunks/2h_lkwf4nsrbe.js"/>
1<script src="/_next/static/immutable/chunks/3i4war8m1f-qr.js" async=""></script>
1<script src="/_next/static/immutable/chunks/42pmka5-xwk2m.js" async=""></script>
1<script src="/_next/static/immutable/chunks/12_14pvtokupy.js" async=""></script>
1<script src="/_next/static/immutable/chunks/1s1ulyaec5lu-.js" async=""></script>
1<script src="/_next/static/immutable/chunks/turbopack-1fqk5c43lsxk3.js" async=""></script>
1<script src="/_next/static/immutable/chunks/3llgfr8horkj9.js" async=""></script>
1<script src="/_next/static/immutable/chunks/0x62fr2t8b7px.js" async=""></script>
1<script src="/_next/static/immutable/chunks/34o79uxdg1l1y.js" async=""></script>
1<script src="/_next/static/immutable/chunks/0dpju94u5v4tk.js" async=""></script>
1<script src="/_next/static/immutable/chunks/2x6uk5lmmye7u.js" async=""></script>
1<script src="/_next/static/immutable/chunks/08_7al_dna08g.js" async=""></script>
1<script src="/_next/static/immutable/chunks/27lrpqm-lx0fb.js" async=""></script>
1<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)"/><meta name="theme-color" content="#0A0A0A" media="(prefers-color-scheme: dark)"/><title>Introduction â open-slide</title><meta name="description" content="A slide framework built for agents."/><meta name="application-name" content="open-slide"/><link rel="author" href="https://github.com/1weiho"/><meta name="author" content="1weiho"/><meta name="keywords" content="open-slide,slides,presentation framework,React slides,Next.js slides,AI agents,Claude Code,MDX slides,slides as code,developer presentations"/><meta name="creator" content="1weiho"/><meta name="publisher" content="open-slide"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><meta name="category" content="technology"/><link rel="canonical" href="https://open-slide.dev/docs"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta property="og:title" content="Introduction"/><meta property="og:description" content="A slide framework built for agents."/><meta property="og:url" content="https://open-slide.dev/docs"/><meta property="og:image" content="https://open-slide.dev/og/docs/image.png"/><meta property="og:type" content="article"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Introduction"/><meta name="twitter:description" content="A slide framework built for agents."/><meta name="twitter:image" content="https://open-slide.dev/og/docs/image.png"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" href="/favicon.ico?favicon.0y2p5re7vt0jm.ico" sizes="48x48" type="image/x-icon"/><link rel="icon" href="/favicon.ico"/><meta name="next-size-adjust" content=""/>
1<script src="/_next/static/immutable/chunks/0c0hxoamwjsbw.js" noModule=""></script>
1</head><body class="flex flex-col min-h-screen"><div hidden=""><!--$--><!--/$--></div>
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
1<!--$--><div class="bg-fd-secondary/50 p-3 empty:hidden"></div><!--/$--><div id="nd-docs-layout" data-sidebar-collapsed="false" data-column-changed="false" style="grid-template:"sidebar sidebar header toc toc" 2"sidebar sidebar toc-popover toc toc" 3"sidebar sidebar main toc toc" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) var(--fd-toc-width) minmax(min-content, 1fr);--fd-docs-row-1:var(--fd-banner-height, 0px);--fd-docs-row-2:calc(var(--fd-docs-row-1) + var(--fd-header-height));--fd-docs-row-3:calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height));--fd-sidebar-col:var(--fd-sidebar-width)" class="grid overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px] data-[column-changed=true]:transition-[grid-template-columns]"><header id="nd-subnav" data-transparent="false" class="[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-(--fd-header-height) md:hidden max-md:layout:[--fd-header-height:--spacing(14)] data-[transparent=false]:bg-fd-background/80"><a class="inline-flex items-center gap-2.5 font-semibold" href="/"><img alt="" aria-hidden="true" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" class="h-6 w-6 rounded-[4px]" style="color:transparent" srcSet="/_next/image?url=%2Fopen-slide.png&w=32&q=75&dpl=dpl_AsY5y7rL9jpSx9q16MTYDibA2poc 1x, /_next/image?url=%2Fopen-slide.png&w=48&q=75&dpl=dpl_AsY5y7rL9jpSx9q16MTYDibA2poc 2x" src="/_next/image?url=%2Fopen-slide.png&w=48&q=75&dpl=dpl_AsY5y7rL9jpSx9q16MTYDibA2poc"/><span>open-slide</span></a><div class="flex-1"></div><button type="button" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4.5 p-2" data-search="" aria-label="Open Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></button><button type="button" aria-label="Open Sidebar" aria-expanded="false" aria-controls="nd-sidebar-mobile" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4.5 p-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left lucide-sidebar" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg></button></header><div data-sidebar-placeholder="" class="sticky top-(--fd-docs-row-1) z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] md:layout:[--fd-sidebar-width:268px] max-md:hidden"><aside id="nd-sidebar" data-collapsed="false" data-hovered="false" class="absolute flex flex-col w-full inset-s-0 inset-y-0 items-end bg-fd-card text-sm border-e duration-250 *:w-(--fd-sidebar-width)"><div class="flex flex-col gap-3 p-4 pb-2"><div class="flex"><a class="inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto" href="/"><img alt="" aria-hidden="true" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" class="h-6 w-6 rounded-[4px]" style="color:transparent" srcSet="/_next/image?url=%2Fopen-slide.png&w=32&q=75&dpl=dpl_AsY5y7rL9jpSx9q16MTYDibA2poc 1x, /_next/image?url=%2Fopen-slide.png&w=48&q=75&dpl=dpl_AsY5y7rL9jpSx9q16MTYDibA2poc 2x" src="/_next/image?url=%2Fopen-slide.png&w=48&q=75&dpl=dpl_AsY5y7rL9jpSx9q16MTYDibA2poc"/><span>
3open-slide</span></a><button type="button" aria-label="Collapse Sidebar" data-collapsed="false" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-4.5 mb-auto text-fd-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left lucide-sidebar" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg></button></div><button type="button" data-search-full="" class="inline-flex items-center gap-2 rounded-lg border bg-fd-secondary/50 p-1.5 ps-2 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search size-4" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>Search<div class="ms-auto inline-flex gap-0.5"><kbd class="rounded-md border bg-fd-background px-1.5">â</kbd><kbd class="rounded-md border bg-fd-background px-1.5">K</kbd></div></button></div><div dir="ltr" class="overflow-hidden min-h-0 flex-1" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] *:flex! *:flex-col! *:gap-0.5! p-4 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><a data-active="true" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs">Introduction</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/getting-started">Getting started</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/migrate-to-v2">Migrate from v1 to v2</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Core feature</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/core-feature/inspector">Inspector</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
3/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/core-feature/assets-manager">Assets manager</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/core-feature/themes">Themes</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/core-feature/present-mode">Present mode</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/core-feature/export">Export</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Primitive</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/primitive/page">Page</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/primitive/transition">Transition</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/primitive/step">Step</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/primitive/morph-element">MorphElement</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Skills</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
3/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/skills/overview">Overview</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/skills/create-slide">/create-slide</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/skills/slide-authoring">/slide-authoring</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/skills/apply-comments">/apply-comments</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/skills/create-theme">/create-theme</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/skills/current-slide">/current-slide</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">CLI</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/cli/overview">Overview</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/cli/init">open-slide init</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground
3/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/cli/dev">open-slide dev</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/cli/build">open-slide build</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/cli/preview">open-slide preview</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/cli/sync-skills">open-slide sync:skills</a><p class="inline-flex items-center gap-2 mb-1 px-2 mt-6 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0 first:mt-0" style="padding-inline-start:calc(2 * var(--spacing))">Reference</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/reference/config">open-slide.config.ts</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/reference/slide-meta">Slide module exports</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/reference/slide-transitions">SlideTransition</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors" style="padding-inline-start:calc(2 * var(--spacing))" href="/docs/reference/image-placeholder">ImagePlaceholder</a></div></div></div><div class="flex flex-col p-4 pt-2"><div class="flex text-fd-muted-foreground items-center border bg-fd-secondary/50 p-0.5 pe-0 rounded-lg empty:hidden"><a href="https://github.com/open-slide/open-slide" rel="noreferrer noopener" target="_blank" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-4.5" aria-label="GitHub" data-active="false"><svg role="img" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a><button class="inline-flex items-center border p-1 overflow-hidden px-1 py-0 border-y-0 border-e-0 rounded-none ms-auto *:rounded-md" aria-label="Toggle Theme" data-theme-toggle=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun size-6.5 p-1.5 text-fd-muted-foreground" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon size-6.5 p-1.5 text-fd-muted-foreground" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg></button></div></div></aside></div>
3<div data-sidebar-panel="" class="fixed flex top-[calc(--spacing(4)+var(--fd-docs-row-3))] inset-s-4 shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 pointer-events-none opacity-0"><button type="button" aria-label="Collapse Sidebar" data-collapsed="false" class="inline-flex items-center justify-center text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-4.5 rounded-lg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left lucide-sidebar" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg></button><button type="button" class="inline-flex items-center justify-center text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-4.5 rounded-lg" data-search="" aria-label="Open Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></button></div><div data-state="closed" data-toc-popover="" class="sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]"><header class="border-b backdrop-blur-sm transition-colors bg-fd-background/80"><button type="button" aria-expanded="false" data-state="closed" class="flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6" data-toc-popover-trigger=""><svg role="progressbar" viewBox="0 0 18 18" aria-valuenow="0" aria-valuemin="0" aria-valuemax="1" style="width:18px;height:18px" class="shrink-0"><circle cx="9" cy="9" r="7.5" fill="none" stroke-width="1.5" class="stroke-current/25"></circle><circle cx="9" cy="9" r="7.5" fill="none" stroke-width="1.5" stroke="currentColor" stroke-dasharray="47.12388980384689" stroke-dashoffset="47.12388980384689" stroke-linecap="round" transform="rotate(-90 9 9)" class="transition-all"></circle></svg><span class="grid flex-1 *:my-auto *:row-start-1 *:col-start-1"><span class="truncate transition-[opacity,translate,color]">Introduction</span><span class="truncate transition-[opacity,translate] opacity-0 translate-y-full pointer-events-none"></span></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down shrink-0 transition-transform mx-0.5" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div data-state="closed" id="radix-_R_5bsnp5ulb_" hidden="" data-toc-popover-content="" class="overflow-hidden"></div></header></div><main class="grid [grid-area:main] justify-items-center" data-layout-main=""><article id="nd-page" data-layout-content="" data-full="false" class="flex flex-col min-w-0 w-full max-w-[900px] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14"><h1 class="text-[1.75em] font-semibold">Introduction</h1><p class="text-lg text-fd-muted-foreground mb-0">A slide framework built for agents.</p><div class="flex flex-row gap-2 items-center border-b pb-6"><button class="inline-flex items-center justify-center rounded-md p-2 font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground px-2 py-1.5 text-xs gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>Copy Markdown</button><button type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed" class="inline-flex items-center justify-center rounded-md p-2 font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground px-2 py-1.5 text-xs gap-2 data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground">Open<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down size-3.5 text-fd-muted-foreground" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="prose flex-1"><p><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="open-slide editor showing a deck with the inspector and assets panel docked alongside the canvas" loading="lazy" width="2560" height="1280" decoding="async" data-nimg="1" style="color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fopen-slide-cover.03sjvg6ehs9zg.webp&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fopen-slide-cover.03sjvg6ehs9zg.webp&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fopen-slide-cover.03sjvg6ehs9zg.webp&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fopen-slide-cover.03sjvg6ehs9zg.webp&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fopen-slide-cover.03sjvg6ehs9zg.webp&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fopen-slide-cover.03sjvg6ehs9zg.webp&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fopen-slide-cover.03sjvg6ehs9zg.webp&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fopen-slide-cover.03sjvg6ehs9zg.webp&w=3840&q=75 3840w" src="/_next/image?url=%2F_next%2Fstatic%2Fimmutable%2Fmedia%2Fopen-slide-cover.03sjvg6ehs9zg.webp&w=3840&q=75"/></span></span></p> 4<p><strong>open-slide</strong> is a slide framework for the agent era. You describe a deck in 5natural language;
5 your coding agent writes the React. open-slide handles the 6canvas, scaling, navigation, hot reload, present mode, and export so the agent 7can focus on content.</p> 8<p>Every page renders into a fixed <strong>1920 Ã 1080</strong> canvas. Slides are arbitrary 9React components â not a constrained DSL.</p> 10<div dir="ltr" data-orientation="horizontal" class="bg-fd-card rounded-xl border my-4"><div role="tablist" aria-orientation="horizontal" class="flex flex-row px-2 overflow-x-auto text-fd-muted-foreground" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_3p9bsnp5ulb_-content-npm" data-state="active" id="radix-_R_3p9bsnp5ulb_-trigger-npm" class="relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 hover:text-fd-accent-foreground data-[state=active]:text-fd-primary [&_svg]:size-3.5" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="absolute inset-x-2 bottom-0 h-px group-data-[state=active]:bg-fd-primary"></div>npm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_3p9bsnp5ulb_-content-pnpm" data-state="inactive" id="radix-_R_3p9bsnp5ulb_-trigger-pnpm" class="relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 hover:text-fd-accent-foreground data-[state=active]:text-fd-primary [&_svg]:size-3.5" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="absolute inset-x-2 bottom-0 h-px group-data-[state=active]:bg-fd-primary"></div>pnpm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_3p9bsnp5ulb_-content-yarn" data-state="inactive" id="radix-_R_3p9bsnp5ulb_-trigger-yarn" class="relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 hover:text-fd-accent-foreground data-[state=active]:text-fd-primary [&_svg]:size-3.5" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="absolute inset-x-2 bottom-0 h-px group-data-[state=active]:bg-fd-primary"></div>yarn</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_3p9bsnp5ulb_-content-bun" data-state="inactive" id="radix-_R_3p9bsnp5ulb_-trigger-bun" class="relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 hover:text-fd-accent-foreground data-[state=active]:text-fd-primary [&_svg]:size-3.5" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="absolute inset-x-2 bottom-0 h-px group-data-[state=active]:bg-fd-primary"></div>bun</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_3p9bsnp5ulb_-trigger-npm" id="radix-_R_3p9bsnp5ulb_-content-npm" tabindex="0" style="animation-duration:0s"><figure dir="ltr" class="bg-fd-secondary -mx-px -mb-px last:rounded-b-xl shiki relative border shadow-sm not-prose overflow-hidden text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="-1"><div class="empty:hidden absolute top-3 right-2 z-2 backdrop-blur-lg rounded-lg text-fd-muted-foreground"><button type="button" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring p-1 [&_svg]:size-4 hover:text-fd-accent-foreground data-checked:text-fd-accent-foreground" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div><div role="region" tabindex="0" class="text-[0.8125rem] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring" style="--padding-right:calc(var(--spacing) * 8)"><pre class="min-w-full w-max *:flex *:flex-col"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @open-slide/cli</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> init</span></span></code></pre></div></figure></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_3p9bsnp5ulb_-trigger-pnpm" hidden="" id="radix-_R_3p9bsnp5ulb_-content-pnpm" tabindex="0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_3p9bsnp5ulb_-trigger-yarn" hidden="" id="radix-_R_3p9bsnp5ulb_-content-yarn" tabindex="0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_3p9bsnp5ulb_-trigger-bun" hidden="" id="radix-_R_3p9bsnp5ulb_-content-bun" tabindex="0"></div></div> 11<h2 id="why-open-slide" class="group/heading flex scroll-m-28 flex-row items-center gap-1"><a data-card="" href="#why-open-slide">Why open-slide</a><button aria-label="Copy Anchor Link" class="inline-flex items-center justify-center rounded-md text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1 [&_svg]:size-4 not-prose shrink-0 text-fd-muted-foreground opacity-0 transition-opacity group-hover/heading:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button></h2> 12<ul> 13<li><strong>Agent-native authoring.</strong> Ships with skills that any Claude Code, Codex, 14or Cursor session can call.</li> 15<li><strong>In-browser inspector.</strong> Click any element in the dev server to tweak it 16directly in the visual editor, or leave a comment for your agent to apply.</li> 17<li><strong>Assets manager + svgl.</strong> Drop in images, search 1500+ brand logos through 18the integrated <a href="https://svgl.app/" rel="noreferrer noopener" target="_blank">svgl</a> catalogue.</li> 19<li><strong>Professional present mode.</strong> Fullscreen playback, presenter view, speaker 20notes, timer.</li> 21<li><strong>Export to static HTML or PDF.</strong> Self-contained output â share without a 22server.</li> 23</ul> 24<h2 id="a-slide-is-a-file" class="group/heading flex scroll-m-28 flex-row items-center gap-1"><a data-card="" href="#a-slide-is-a-file">A slide is a file</a><button aria-label="Copy Anchor Link" class="inline-flex items-center justify-center rounded-md text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1 [&_svg]:size-4 not-prose shrink-0 text-fd-muted-foreground opacity-0 transition-opacity group-hover/heading:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button></h2> 25<p>Each deck lives under <code>slides/<kebab-case-id>/</code>. The entry is 26<code>slides/<id>/index.tsx</code>. Assets sit alongside in <code>slides/<id>/assets/</code>.</p> 27<figure dir="ltr" class="my-4 bg-fd-card rounded-xl shiki relative border shadow-sm not-prose overflow-hidden text-sm shiki shiki-themes g
27ithub-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="-1"><div class="flex text-fd-muted-foreground items-center gap-2 h-9.5 border-b px-4"><div class="[&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate">slides/getting-started/index.tsx</figcaption><div class="empty:hidden -me-2"><button type="button" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring p-1 [&_svg]:size-4 hover:text-fd-accent-foreground data-checked:text-fd-accent-foreground" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div></div><div role="region" tabindex="0" class="text-[0.8125rem] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring"><pre class="min-w-full w-max *:flex *:flex-col"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">
27import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { Page, SlideMeta } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@open-slide/core'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 28<span class="line"></span> 29<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Cover</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Page</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span> 30<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'#08090a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'#f7f8f8'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}></span></span> 31<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">h1</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ fontSize: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">188</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, letterSpacing: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'-0.04em'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}></span></span> 32<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Hello, <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">em</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'#7170ff'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}>open-slide</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">>.</span></span> 33<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span> 34<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span> 35<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 36<span class="line"></span> 37<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> meta</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> SlideMeta</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Getting started'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, theme: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'corporate'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> 38<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [Cover] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">satisfies</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Page</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">[];</span></span></code></pre></div></figure> 39<p>Two rules: the default export is an array of components (one per page), and 40each component fills its container (<code>width: '100%'</code> / <code>height: '100%'</code>).</p> 41<h2 id="the-1920--1080-canvas" class="group/heading flex scroll-m-28 flex-row items-center gap-1"><a data-card="" href="#the-1920--1080-canvas">The 1920 Ã 1080 canvas</a><button aria-label="Copy Anchor Link" class="inline-flex items-center justify-center rounded-md text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1 [&_svg]:size-4 not-prose shrink-0 text-fd-muted-foreground opacity-0 transition-opacity group-hover/heading:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button></h2> 42<p>The runtime scales the canvas uniformly to fit the viewport, so the same 43slide looks identical on a phone, a 4K monitor, and a beamer â every pixel 44coordinate you write is the coordinate that ships, in preview, present mode, 45and export.</p> 46<h2 id="whats-next" class="group/heading flex scroll-m-28 flex-row items-center gap-1"><a data-card="" href="#whats-next">What's next</a><button aria-label="Copy Anchor Link" class="inline-flex items-center justify-center rounded-md text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1 [&_svg]:size-4 not-prose shrink-0 text-fd-muted-foreground opacity-0 transition-opacity group-hover/heading:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button></h2> 47<div class="grid grid-cols-2 gap-3 @container"><a data-card="true" class="block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full hover:bg-fd-accent/80" href="/docs/getting-started"><h3 class="not-prose mb-1 text-sm font-medium">Get started</h3><div class="text-sm text-fd-muted-foreground prose-no-margin empty:hidden"></div></a><a data-card="true" class="block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full hover:bg-fd-accent/80" href="/docs/skills/create-slide"><h3 class="not-prose mb-1 text-sm font-medium">Create a slide</h3><div class="text-sm text-fd-muted-foreground prose-no-margin empty:hidden"></div></a><a data-card="true" class="block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full hover:bg-fd-accent/80" href="/docs/core-feature/inspector"><h3 class="not-prose mb-1 text-sm font-medium">Inspector & comments</h3><div class="text-sm text-fd-muted-foreground prose-no-margin empty:hidden"></div></a></div></div><div class="@container grid gap-4 grid-cols-1"><a class="flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full text-end" href="/docs/getting-started"><div class="inline-flex items-center gap-1.5 font-medium flex-row-reverse"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right -mx-1 size-4 shrink-0 rtl:rotate-180" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg><p>Getting started</p></div><p class="text-fd-muted-foreground truncate">Spin up your first deck in under a minute.</p></a></div></article></main><div id="nd-toc" class="sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 xl:layout:[--fd-toc-width:268px] max-xl:hidden"><h3 id="toc-title" class="inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-align-start lucide-text lucide-align-left size-4" aria-hidden="true"><path d="M21 5H3"></path><path d="M15 12H3"></path><path d="M17 19H3"></path></svg>On this page</h3><div class="relative min-h-0 text-sm ms-px overflow-auto overscroll-contain [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3"><div class="relative flex flex-col"><a data-active="false" href="#why-open-slide" class="prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-fd-primary pt-0" style="padding-inline-start:20px"><svg xmlns="http://www.w3.org/2000/svg" class="absolute -top-1.5 inset-s-0 bottom-0 h-[calc(100%+--spacing(1.5))] -z-1 rtl:-scale-x-100" style="width:17px"><line x1="8.5" y1="6" x2="8.5" y2="100%" stroke-width="1" class="stroke-fd-foreground
47/10"></line></svg>Why open-slide</a><a data-active="false" href="#a-slide-is-a-file" class="prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-fd-primary" style="padding-inline-start:20px"><svg xmlns="http://www.w3.org/2000/svg" class="absolute -top-1.5 inset-s-0 bottom-0 h-[calc(100%+--spacing(1.5))] -z-1 rtl:-scale-x-100" style="width:17px"><line x1="8.5" y1="6" x2="8.5" y2="100%" stroke-width="1" class="stroke-fd-foreground/10"></line></svg>A slide is a file</a><a data-active="false" href="#the-1920--1080-canvas" class="prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-fd-primary" style="padding-inline-start:20px"><svg xmlns="http://www.w3.org/2000/svg" class="absolute -top-1.5 inset-s-0 bottom-0 h-[calc(100%+--spacing(1.5))] -z-1 rtl:-scale-x-100" style="width:17px"><line x1="8.5" y1="6" x2="8.5" y2="100%" stroke-width="1" class="stroke-fd-foreground/10"></line></svg>The 1920 Ã 1080 canvas</a><a data-active="false" href="#whats-next" class="prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-fd-primary pb-0" style="padding-inline-start:20px"><svg xmlns="http://www.w3.org/2000/svg" class="absolute -top-1.5 inset-s-0 bottom-0 h-[calc(100%+--spacing(1.5))] -z-1 rtl:-scale-x-100" style="width:17px"><line x1="8.5" y1="6" x2="8.5" y2="100%" stroke-width="1" class="stroke-fd-foreground/10"></line></svg>What's next</a></div></div></div><!--$--><!--/$--></div>
47<script src="/_next/static/immutable/chunks/2h_lkwf4nsrbe.js" id="_R_" async=""></script>
47<script>(self.__next_f=self.__next_f||[]).push([0])</script>
47<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[984253,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\"],\"RootProvider\"]\n3:I[405153,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\"],\"default\"]\n4:I[799916,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\"],\"default\"]\n5:I[582266,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\"],\"LayoutBody\"]\nc:I[150056,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\"],\"default\",1]\n:HL[\"/_next/static/immutable/chunks/1y03b1ghqvsyv.css\",\"style\"]\n:HL[\"/_next/static/immutable/media/GeistMono_Variable.p.0b02cdm7g7y6h.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/Geist_Variable-s.p.2-i4fw5gbtlb7.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/chunks/2b6yr5up--bg4.css\",\"style\"]\na:X\n0:{\"P\":null,\"c\":[\"\",\"docs\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"slug\",\"\",\"oc\",[]],{\"children\":[\"__PAGE__\",{},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4624],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/1y03b1ghqvsyv.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"className\":\"geistsans_d5a4f12f-module__qeCmSq__className geistsans_d5a4f12f-module__qeCmSq__variable geistmono_157ca88a-module__vjDhbq__variable\",\"children\":[\"$\",\"body\",null,{\"className\":\"flex flex-col min-h-screen\",\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"async\":true,\"nonce\":\"$undefined\"}
47],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L5\",null,{\"tree\":{\"type\":\"root\",\"$ref\":{\"folder\":\"\",\"meta\":\"meta.json\"},\"$id\":\"root\",\"name\":\"open-slide\",\"description\":\"$undefined\",\"children\":[{\"$id\":\"index.mdx\",\"type\":\"page\",\"name\":\"Introduction\",\"description\":\"A slide framework built for agents.\",\"icon\":\"$undefined\",\"url\":\"/docs\",\"$ref\":\"index.mdx\"},{\"$id\":\"getting-started.mdx\",\"type\":\"page\",\"name\":\"Getting started\",\"description\":\"Spin up your first deck in under a minute.\",\"icon\":\"$undefined\",\"url\":\"/docs/getting-started\",\"$ref\":\"getting-started.mdx\"},{\"$id\":\"migrate-to-v2.mdx\",\"type\":\"page\",\"name\":\"Migrate from v1 to v2\",\"description\":\"Upgrade a v1 workspace to @open-slide/core v2.\",\"icon\":\"$undefined\",\"url\":\"/docs/migrate-to-v2\",\"$ref\":\"migrate-to-v2.mdx\"},{\"$id\":\"_0\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Core feature\"},{\"$id\":\"core-feature/inspector.mdx\",\"type\":\"page\",\"name\":\"Inspector\",\"description\":\"Move, resize, align, and edit slide elements directly on the canvas.\",\"icon\":\"$undefined\",\"url\":\"/docs/core-feature/inspector\",\"$ref\":\"core-feature/inspector.mdx\"},{\"$id\":\"core-feature/assets-manager.mdx\",\"type\":\"page\",\"name\":\"Assets manager\",\"description\":\"Drop in images, videos, and brand logos via svgl.\",\"icon\":\"$undefined\",\"url\":\"/docs/core-feature/assets-manager\",\"$ref\":\"core-feature/assets-manager.mdx\"},{\"$id\":\"core-feature/themes.mdx\",\"type\":\"page\",\"name\":\"Themes\",\"description\":\"Reusable design systems shared across decks.\",\"icon\":\"$undefined\",\"url\":\"/docs/core-feature/themes\",\"$ref\":\"core-feature/themes.mdx\"},{\"$id\":\"core-feature/present-mode.mdx\",\"type\":\"page\",\"name\":\"Present mode\",\"description\":\"Fullscreen playback with presenter view, notes, and timer.\",\"icon\":\"$undefined\",\"url\":\"/docs/core-feature/present-mode\",\"$ref\":\"core-feature/present-mode.mdx\"},{\"$id\":\"core-feature/export.mdx\",\"type\":\"page\",\"name\":\"Export\",\"description\":\"One command to a self-contained static HTML site or PDF.\",\"icon\":\"$undefined\",\"url\":\"/docs/core-feature/export\",\"$ref\":\"core-feature/export.mdx\"},{\"$id\":\"_1\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Primitive\"},{\"$id\":\"primitive/page.mdx\",\"type\":\"page\",\"name\":\"Page\",\"description\":\"The component contract for one 1920 Ã 1080 slide page.\",\"icon\":\"$undefined\",\"url\":\"/docs/primitive/page\",\"$ref\":\"primitive/page.mdx\"},{\"$id\":\"primitive/transition.mdx\",\"type\":\"page\",\"name\":\"Transition\",\"description\":\"Enter, exit, and morph motion between pages.\",\"icon\":\"$undefined\",\"url\":\"/docs/primitive/transition\",\"$ref\":\"primitive/transition.mdx\"},{\"$id\":\"primitive/step.mdx\",\"type\":\"page\",\"name\":\"Step\",\"description\":\"Stage one page across multiple presenter beats.\",\"icon\":\"$undefined\",\"url\":\"/docs/primitive/step\",\"$ref\":\"primitive/step.mdx\"},{\"$id\":\"primitive/morph-element.mdx\",\"type\":\"page\",\"name\":\"MorphElement\",\"description\":\"Keynote-style continuity for the same object across pages.\",\"icon\":\"$undefined\",\"url\":\"/docs/primitive/morph-element\",\"$ref\":\"primitive/morph-element.mdx\"},{\"$id\":\"_2\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Skills\"},{\"$id\":\"skills/overview.mdx\",\"type\":\"page\",\"name\":\"Overview\",\"description\":\"How open-slide and your coding agent work together.\",\"icon\":\"$undefined\",\"url\":\"/docs/skills/overview\",\"$ref\":\"skills/overview.mdx\"},{\"$id\":\"skills/create-slide.mdx\",\"type\":\"page\",\"name\":\"/create-slide\",\"description\":\"Drafts a deck end-to-end from a one-line prompt.\",\"icon\":\"$undefined\",\"url\":\"/docs/skills/create-slide\",\"$ref\":\"skills/create-slide.mdx\"},{\"$id\":\"skills/slide-authoring.mdx\",\"type\":\"page\",\"name\":\"/slide-authoring\",\"description\":\"The technical reference the agent reads before writing a slide.\",\"icon\":\"$undefined\",\"url\":\"/docs/skills/slide-authoring\",\"$ref\":\"skills/slide-authoring.mdx\"}
47,{\"$id\":\"skills/apply-comments.mdx\",\"type\":\"page\",\"name\":\"/apply-comments\",\"description\":\"Turns inspector comments into real edits.\",\"icon\":\"$undefined\",\"url\":\"/docs/skills/apply-comments\",\"$ref\":\"skills/apply-comments.mdx\"},{\"$id\":\"skills/create-theme.mdx\",\"type\":\"page\",\"name\":\"/create-theme\",\"description\":\"Extracts a theme from an existing deck (or a brief).\",\"icon\":\"$undefined\",\"url\":\"/docs/skills/create-theme\",\"$ref\":\"skills/create-theme.mdx\"},{\"$id\":\"skills/current-slide.mdx\",\"type\":\"page\",\"name\":\"/current-slide\",\"description\":\"Resolves \\\"this slide\\\" / \\\"this element\\\" to a concrete reference.\",\"icon\":\"$undefined\",\"url\":\"/docs/skills/current-slide\",\"$ref\":\"skills/current-slide.mdx\"},{\"$id\":\"_3\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"CLI\"},{\"$id\":\"cli/overview.mdx\",\"type\":\"page\",\"name\":\"Overview\",\"description\":\"Two CLIs â one to scaffold, one to run.\",\"icon\":\"$undefined\",\"url\":\"/docs/cli/overview\",\"$ref\":\"cli/overview.mdx\"},{\"$id\":\"cli/init.mdx\",\"type\":\"page\",\"name\":\"open-slide init\",\"description\":\"Scaffold a new workspace.\",\"icon\":\"$undefined\",\"url\":\"/docs/cli/init\",\"$ref\":\"cli/init.mdx\"},{\"$id\":\"cli/dev.mdx\",\"type\":\"page\",\"name\":\"open-slide dev\",\"description\":\"Run the dev server with hot reload, inspector, and assets panel.\",\"icon\":\"$undefined\",\"url\":\"/docs/cli/dev\",\"$ref\":\"cli/dev.mdx\"},{\"$id\":\"cli/build.mdx\",\"type\":\"page\",\"name\":\"open-slide build\",\"description\":\"Produce a static, deployable build.\",\"icon\":\"$undefined\",\"url\":\"/docs/cli/build\",\"$ref\":\"cli/build.mdx\"},{\"$id\":\"cli/preview.mdx\",\"type\":\"page\",\"name\":\"open-slide preview\",\"description\":\"Serve the production build locally for sanity-checking.\",\"icon\":\"$undefined\",\"url\":\"/docs/cli/preview\",\"$ref\":\"cli/preview.mdx\"},{\"$id\":\"cli/sync-skills.mdx\",\"type\":\"page\",\"name\":\"open-slide sync:skills\",\"description\":\"Refresh the bundled agent skills inside an existing workspace.\",\"icon\":\"$undefined\",\"url\":\"/docs/cli/sync-skills\",\"$ref\":\"cli/sync-skills.mdx\"},{\"$id\":\"_4\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Reference\"},{\"$id\":\"reference/config.mdx\",\"type\":\"page\",\"name\":\"open-slide.config.ts\",\"description\":\"Workspace-level configuration.\",\"icon\":\"$undefined\",\"url\":\"/docs/reference/config\",\"$ref\":\"reference/config.mdx\"},{\"$id\":\"reference/slide-meta.mdx\",\"type\":\"page\",\"name\":\"Slide module exports\",\"description\":\"The shape the runtime expects from each slides/\u003cid\u003e/index.tsx.\",\"icon\":\"$undefined\",\"url\":\"/docs/reference/slide-meta\",\"$ref\":\"reference/slide-meta.mdx\"},{\"$id\":\"reference/slide-transitions.mdx\",\"type\":\"page\",\"name\":\"SlideTransition\",\"description\":\"Per-page enter/exit animations and morph transitions.\",\"icon\":\"$undefined\",\"url\":\"/docs/reference/slide-transitions\",\"$ref\":\"reference/slide-transitions.mdx\"},{\"$id\":\"reference/image-placeholder.mdx\",\"type\":\"page\",\"name\":\"ImagePlaceholder\",\"description\":\"A typed stand-in for a real image the user has to supply.\",\"icon\":\"$undefined\",\"url\":\"/docs/reference/image-placeholder\",\"$ref\":\"reference/image-placeholder.mdx\"}]},\"tabs\":[],\"tabMode\":\"$undefined\",\"sidebar\":{},\"nav\":{\"title\":\"$L6\"},\"githubUrl\":\"https://github.com/open-slide/open-slide\",\"children\":\"$L7\"}]]}],{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,null]},null,false,\"$a\"]},null,false,null]},null,false,null],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[\"$Ld\"]],\"S\":true,\"h\":null,\"r\":\"$undefined\",\"s\":\"$undefined\",\"a\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\"}\ne:I[969499,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\"],\"Image\"]\n10:I[278383,[\"/_
47next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\"],\"OutletBoundary\"]\n11:\"$Sreact.suspense\"\n13:I[278383,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\"],\"ViewportBoundary\"]\n15:I[278383,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\"],\"MetadataBoundary\"]\n6:[[\"$\",\"$Le\",null,{\"src\":\"/open-slide.png\",\"alt\":\"\",\"aria-hidden\":true,\"width\":24,\"height\":24,\"className\":\"h-6 w-6 rounded-[4px]\"}],[\"$\",\"span\",null,{\"children\":\"open-slide\"}]]\n7:[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Lf\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/2b6yr5up--bg4.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L10\",null,{\"children\":[\"$\",\"$11\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@12\"}]}]]}]\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L13\",null,{\"children\":\"$L14\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L15\",null,{\"children\":[\"$\",\"$11\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L16\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nd:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/1y03b1ghqvsyv.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n17:I[43855,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"DocsPage\"]\n18:I[43855,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"DocsTitle\"]\n19:I[43855,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"DocsDescription\"]\n1a:I[43855,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"MarkdownCopyButton\"]\n1b:I[43855,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"ViewOptionsPop
47over\"]\n1c:I[43855,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"DocsBody\"]\n1d:I[449399,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"ImageZoom\"]\n1e:I[902663,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"CodeBlockTabs\"]\n1f:I[902663,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"CodeBlockTabsList\"]\n20:I[902663,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"CodeBlockTabsTrigger\"]\n21:I[902663,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"CodeBlockTab\"]\n22:I[902663,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"CodeBlock\"]\n23:I[902663,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"Pre\"]\na:C\nf:[\"$\",\"$L17\",null,{\"toc\":[{\"depth\":2,\"url\":\"#why-open-slide\",\"title\":\"Why open-slide\"},{\"depth\":2,\"url\":\"#a-slide-is-a-file\",\"title\":\"A slide is a file\"},{\"depth\":2,\"url\":\"#the-1920--1080-canvas\",\"title\":\"The 1920 Ã 1080 canvas\"},{\"depth\":2,\"url\":\"#whats-next\",\"title\":\"What's next\"}],\"full\":\"$undefined\",\"children\":[[\"$\",\"$L18\",null,{\"children\":\"Introduction\"}],[\"$\",\"$L19\",null,{\"className\":\"mb-0\",\"children\":\"A slide framework built for agents.\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-2 items-center border-b pb-6\",\"children\":[[\"$\",\"$L1a\",null,{\"markdownUrl\":\"/llms.mdx/docs/content.md\"}],[\"$\",\"$L1b\",null,{\"markdownUrl\":\"/llms.mdx/docs/content.md\",\"githubUrl\":\"https://github.com/open-slide/open-slide/blob/main/content/docs/index.mdx\"}]]}],[\"$\",\"$L1c\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":[\"$\",\"$L1d\",null,{\"alt\":\"open-slide editor showing a deck with the inspector and assets panel docked alongside the canvas\",\"src\":{\"src\":\"/_next/static/immutable/media/
47open-slide-cover.03sjvg6ehs9zg.webp\",\"width\":2560,\"height\":1280,\"blurWidth\":8,\"blurHeight\":4,\"blurDataURL\":\"data:image/webp;base64,UklGRsAAAABXRUJQVlA4TLQAAAAvB8AAAM1VICICHgiwCQAAAIC9AggAAAAAAAAAAIAAgABAAAgAAAAAAAIAAAAAAEF1EgpCwSkAAMADIcQBAAAAOP9rBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPDlgRCcAAAAAJz/fdUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+8hpr1g1EOBT1LRojtdi/8rrmbQTNv7G3Y8NShcQhsuZ7i1RAwA=\"}}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"open-slide\"}],\" is a slide framework for the agent era. You describe a deck in\\nnatural language; your coding agent writes the React. open-slide handles the\\ncanvas, scaling, navigation, hot reload, present mode, and export so the agent\\ncan focus on content.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Every page renders into a fixed \",[\"$\",\"strong\",null,{\"children\":\"1920 Ã 1080\"}],\" canvas. Slides are arbitrary\\nReact components â not a constrained DSL.\"]}],\"\\n\",[\"$\",\"$L1e\",null,{\"defaultValue\":\"npm\",\"children\":[[\"$\",\"$L1f\",null,{\"children\":[[\"$\",\"$L20\",null,{\"value\":\"npm\",\"children\":\"npm\"}],[\"$\",\"$L20\",null,{\"value\":\"pnpm\",\"children\":\"pnpm\"}],[\"$\",\"$L20\",null,{\"value\":\"yarn\",\"children\":\"yarn\"}],[\"$\",\"$L20\",null,{\"value\":\"bun\",\"children\":\"bun\"}]]}],[\"$\",\"$L21\",null,{\"value\":\"npm\",\"children\":[\"$\",\"$L22\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"\u003csvg viewBox=\\\"0 0 24 24\\\"\u003e\u003cpath d=\\\"m 4,4 a 1,1 0 0 0 -0.7070312,0.2929687 1,1 0 0 0 0,1.4140625 L 8.5859375,11 3.2929688,16.292969 a 1,1 0 0 0 0,1.414062 1,1 0 0 0 1.4140624,0 l 5.9999998,-6 a 1.0001,1.0001 0 0 0 0,-1.414062 L 4.7070312,4.2929687 A 1,1 0 0 0 4,4 Z m 8,14 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 8 a 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 z\\\" fill=\\\"currentColor\\\" /\u003e\u003c/svg\u003e\",\"children\":[\"$\",\"$L23\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"npx\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @open-slide/cli\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" init\"}]]}]}]}]}]}],[\"$\",\"$L21\",null,{\"value\":\"pnpm\",\"children\":[\"$\",\"$L22\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"\u003csvg viewBox=\\\"0 0 24 24\\\"\u003e\u003cpath d=\\\"m 4,4 a 1,1 0 0 0 -0.7070312,0.2929687 1,1 0 0 0 0,1.4140625 L 8.5859375,11 3.2929688,16.292969 a 1,1 0 0 0 0,1.414062 1,1 0 0 0 1.4140624,0 l 5.9999998,-6 a 1.0001,1.0001 0 0 0 0,-1.414062 L 4.7070312,4.2929687 A 1,1 0 0 0 4,4 Z m 8,14 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 8 a 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 z\\\" fill=\\\"currentColor\\\" /\u003e\u003c/svg\u003e\",\"children\":[\"$\",\"$L23\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"pnpm\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" dlx\"}],\"$L24\",\"$L25\"]}]}]}]}]}],\"$L26\",\"$L27\"]}],\"\\n\",\"$L28\",\"\\n\",\"$L29\",\"\\n\",\"$L2a\",\"\\n\",\"$L2b\",\"\\n\",\"$L2c\",\"\\n\",\"$L2d\",\"\\n\",\"$L2e\",\"\\n\",\"$L2f\",\"\\n\",\"$L30\",\"\\n\",\"$L31\"]}]]}]\n32:I[222778,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"Heading\"]\n45:I[449021,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\",\"/_next/static/immutable/chunks/34o79uxdg1l1y.js\",\"/_next/static/immutable/chunks/0dpju94u5v4tk.js\",\"/_next/static/immutable/chunks/2x6uk5lmmye7u.js\",\"/_next/static/immutable/chunks/08_7al_dna08g.js\",\"/_next/static/immutable/chunks/27lrpqm-lx0fb.js\"],\"default\"]\n24:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\"
47:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @open-slide/cli\"}]\n25:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" init\"}]\n26:[\"$\",\"$L21\",null,{\"value\":\"yarn\",\"children\":[\"$\",\"$L22\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"\u003csvg viewBox=\\\"0 0 24 24\\\"\u003e\u003cpath d=\\\"m 4,4 a 1,1 0 0 0 -0.7070312,0.2929687 1,1 0 0 0 0,1.4140625 L 8.5859375,11 3.2929688,16.292969 a 1,1 0 0 0 0,1.414062 1,1 0 0 0 1.4140624,0 l 5.9999998,-6 a 1.0001,1.0001 0 0 0 0,-1.414062 L 4.7070312,4.2929687 A 1,1 0 0 0 4,4 Z m 8,14 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 8 a 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 z\\\" fill=\\\"currentColor\\\" /\u003e\u003c/svg\u003e\",\"children\":[\"$\",\"$L23\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"yarn\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" dlx\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @open-slide/cli\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" init\"}]]}]}]}]}]}]\n27:[\"$\",\"$L21\",null,{\"value\":\"bun\",\"children\":[\"$\",\"$L22\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"\u003csvg viewBox=\\\"0 0 24 24\\\"\u003e\u003cpath d=\\\"m 4,4 a 1,1 0 0 0 -0.7070312,0.2929687 1,1 0 0 0 0,1.4140625 L 8.5859375,11 3.2929688,16.292969 a 1,1 0 0 0 0,1.414062 1,1 0 0 0 1.4140624,0 l 5.9999998,-6 a 1.0001,1.0001 0 0 0 0,-1.414062 L 4.7070312,4.2929687 A 1,1 0 0 0 4,4 Z m 8,14 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 8 a 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 z\\\" fill=\\\"currentColor\\\" /\u003e\u003c/svg\u003e\",\"children\":[\"$\",\"$L23\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"bun\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" x\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @open-slide/cli\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" init\"}]]}]}]}]}]}]\n28:[\"$\",\"$L32\",null,{\"as\":\"h2\",\"id\":\"why-open-slide\",\"children\":\"Why open-slide\"}]\n29:[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Agent-native authoring.\"}],\" Ships with skills that any Claude Code, Codex,\\nor Cursor session can call.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"In-browser inspector.\"}],\" Click any element in the dev server to tweak it\\ndirectly in the visual editor, or leave a comment for your agent to apply.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Assets manager + svgl.\"}],\" Drop in images, search 1500+ brand logos through\\nthe integrated \",\"$L33\",\" catalogue.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Professional present mode.\"}],\" Fullscreen playback, presenter view, speaker\\nnotes, timer.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Export to static HTML or PDF.\"}],\" Self-contained output â share without a\\nserver.\"]}],\"\\n\"]}]\n2a:[\"$\",\"$L32\",null,{\"as\":\"h2\",\"id\":\"a-slide-is-a-file\",\"children\":\"A slide is a file\"}]\n2b:[\"$\",\"p\",null,{\"children\":[\"Each deck lives under \",[\"$\",\"code\",null,{\"children\":\"slides/\u003ckebab-case-id\u003e/\"}],\". The entry is\\n\",[\"$\",\"code\",null,{\"children\":\"slides/\u003cid\u003e/index.tsx\"}],\". Assets sit alongside in \",[\"$\",\"code\",null,{\"children\":\"slides/\u003cid\u003e/assets/\"}],\".\"]}]\n34:Tb41,\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.
47183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e2c:[\"$\",\"$L22\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"slides/getting-started/index.tsx\",\"icon\":\"$34\",\"children\":[\"$\",\"$L23\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"import\"}],\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\"]}],\"\\n\",\"$L3a\",\"\\n\",\"$L3b\",\"\\n\",\"$L3c\",\"\\n\",\"$L3d\",\"\\n\",\"$L3e\",\"\\n\",\"$L3f\",\"\\n\",\"$L40\",\"\\n\",\"$L41\",\"\\n\",\"$L42\",\"\\n\",\"$L43\",\"\\n\",\"$L44\"]}
47]}]}]\n2d:[\"$\",\"p\",null,{\"children\":[\"Two rules: the default export is an array of components (one per page), and\\neach component fills its container (\",[\"$\",\"code\",null,{\"children\":\"width: '100%'\"}],\" / \",[\"$\",\"code\",null,{\"children\":\"height: '100%'\"}],\").\"]}]\n2e:[\"$\",\"$L32\",null,{\"as\":\"h2\",\"id\":\"the-1920--1080-canvas\",\"children\":\"The 1920 Ã 1080 canvas\"}]\n2f:[\"$\",\"p\",null,{\"children\":\"The runtime scales the canvas uniformly to fit the viewport, so the same\\nslide looks identical on a phone, a 4K monitor, and a beamer â every pixel\\ncoordinate you write is the coordinate that ships, in preview, present mode,\\nand export.\"}]\n30:[\"$\",\"$L32\",null,{\"as\":\"h2\",\"id\":\"whats-next\",\"children\":\"What's next\"}]\n31:[\"$\",\"div\",null,{\"children\":[[\"$\",\"$L45\",null,{\"href\":\"/docs/getting-started\",\"data-card\":true,\"className\":\"block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full hover:bg-fd-accent/80\",\"children\":[null,[\"$\",\"h3\",null,{\"className\":\"not-prose mb-1 text-sm font-medium\",\"children\":\"Get started\"}],null,[\"$\",\"div\",null,{\"className\":\"text-sm text-fd-muted-foreground prose-no-margin empty:hidden\",\"children\":\"$undefined\"}]]}],[\"$\",\"$L45\",null,{\"href\":\"/docs/skills/create-slide\",\"data-card\":true,\"className\":\"block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full hover:bg-fd-accent/80\",\"children\":[null,[\"$\",\"h3\",null,{\"className\":\"not-prose mb-1 text-sm font-medium\",\"children\":\"Create a slide\"}],null,[\"$\",\"div\",null,{\"className\":\"text-sm text-fd-muted-foreground prose-no-margin empty:hidden\",\"children\":\"$undefined\"}]]}],[\"$\",\"$L45\",null,{\"href\":\"/docs/core-feature/inspector\",\"data-card\":true,\"className\":\"block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full hover:bg-fd-accent/80\",\"children\":[null,[\"$\",\"h3\",null,{\"className\":\"not-prose mb-1 text-sm font-medium\",\"children\":\"Inspector \u0026 comments\"}],null,[\"$\",\"div\",null,{\"className\":\"text-sm text-fd-muted-foreground prose-no-margin empty:hidden\",\"children\":\"$undefined\"}]]}]],\"className\":\"grid grid-cols-2 gap-3 @container\"}]\n35:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" type\"}]\n36:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { Page, SlideMeta } \"}]\n37:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}]\n38:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '@open-slide/core'\"}]\n39:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]\n3a:[\"$\",\"span\",null,{\"className\":\"line\"}]\n3b:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" Cover\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" Page\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" () \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" (\"}]]}]\n3c:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\"
47:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" style\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{{ width: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'100%'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", height: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'100%'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", background: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'#08090a'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", color: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'#f7f8f8'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }}\u003e\"}]]}]\n3d:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" style\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{{ fontSize: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"188\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", letterSpacing: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'-0.04em'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }}\u003e\"}]]}]\n3e:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" Hello, \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"em\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" style\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{{ color: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'#7170ff'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }}\u003eopen-slide\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"em\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e.\"}]]}]\n3f:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"h1\"}
47],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}]\n40:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}]\n41:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]}]\n42:[\"$\",\"span\",null,{\"className\":\"line\"}]\n43:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" meta\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" SlideMeta\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { title: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'Getting started'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", theme: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'corporate'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" };\"}]]}]\n44:[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" default\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" [Cover] \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"satisfies\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" Page\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"[];\"}]]}]\n33:[\"$\",\"$L45\",null,{\"href\":\"https://svgl.app/\",\"children\":\"svgl\"}]\n14:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#FFFFFF\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"meta\",\"3\",{\"name\":\"theme-color\",\"content\":\"#0A0A0A\",\"media\":\"(prefers-color-scheme: dark)\"}]]\n46:I[273540,[\"/_next/static/immutable/chunks/3llgfr8horkj9.js\",\"/_next/static/immutable/chunks/0x62fr2t8b7px.js\"],\"IconMark\"]\n12:null\n16:[[\"$\",\"title\",\"0\",{\"children\":\"Introduction â open-slide\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A slide framework built for agents.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"open-slide\"}],[\"$\",\"link\",\"3\",{\"rel\":\"author\",\"href\":\"https://github.com/1weiho\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"1weiho\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"open-slide,slides,presentation framework,React slides,Next.js slides,AI agents,Claude Code,MDX slides,slides as code,developer presentations\"}],[\"$\",\"meta\",\"6\",{\"name\":\"creator\",\"content\":\"1weiho\"}],[\"$\",\"meta\",\"7\",{\"name\":\"publisher\",\"content\":\"open-slide\"}],[\"$\",\"meta\",\"8\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"9\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"10\",{\"name\":\"category\",\"content\":\"technology\"}],[\"$\",\"link\",\"11\",{\"rel\":\"canonical\",\"href\":\"https://open-slide.dev/docs\"}],[\"$\",\"meta\",\"12\",{\"name\":\"format-detection\",\"content\":\"telephone=no, address=no, email=no\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:title\",\"content\":\"Introduction\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:description\",\"content\":\"A slide framework built for agents.\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:url\",\"content\":\"https://open-slide.dev/docs\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image\",\"content\":\"https://open-slide.dev/og/docs/image.png\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:title\",\"content\":\"Introduction\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:description\",\"content\":\"A slide framework built for agents.\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image\",\"content\":\"https://open-slide.dev/og/docs/image.png\"}],[\"$\",\"link\",\"22\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"23\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0y2p5re7vt0jm.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"$L46\",\"25\",{}]]\n"])</script>
47</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.