SlideCanvas Docs

npm install slidecanvas

import { PptEditor } from 'slidecanvas';

export default function MyEditor() {
  return (
    <main className="h-screen">
      <PptEditor appName="My Studio" />
    </main>
  );
}

import { PptEditor } from 'slidecanvas';

export default function App() {
  const pptxUrl = "https://example.com/presentations/q1-report.pptx";
  
  // Custom proxy endpoint (defaults to undefined, causing direct fetch)
  // If your app has an API route at /api/proxy, specify it here:
  return <PptEditor url={pptxUrl} proxyUrl="/api/proxy" />;
}

import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const targetUrl = searchParams.get('url');

  const response = await fetch(targetUrl!, { cache: 'no-store' });
  return new NextResponse(response.body, {
    status: 200,
    headers: { 'Content-Type': 'application/vnd.openxmlformats-officedocument.presentationml.presentation' }
  });
}

<PptEditor
  fetchPresentation={async (url) => {
    // Logic to fetch directly from client
    const response = await fetch(url);
    if (!response.ok) throw new Error("Fetch failed");
    return await response.blob();
  }}
/>

<PptEditor 
  onGenerateImage={async (prompt) => {
    const response = await fetch('/api/my-ai', { body: JSON.stringify({ prompt }) });
    const data = await response.json();
    return data.s3ImageUrl; // Return a URL string
  }}
/>

<PptEditor
  onAiEdit={async (text, prompt) => myApi.customEdit(text, prompt)}
  onAiRewrite={async (text) => myApi.rewrite(text)}
  onAiGrammar={async (text) => myApi.fixGrammar(text)}
  onAiShorten={async (text) => myApi.shorten(text)}
  onAiLengthen={async (text) => myApi.lengthen(text)}
  onAiContinue={async (text) => myApi.continueWriting(text)}
/>

<PptEditor 
  isTwoStepInfographicGeneration={true}
  onRefineInfographicPrompt={async (text) => await myAiRefine(text)}
  onGenerateInfographic={async (prompt) => await myImageGen(prompt)}
/>

import { PptEditor } from 'slidecanvas';

export default function MyEditor() {
  const geminiKey = process.env.NEXT_PUBLIC_GEMINI_API_KEY;

  return (
    <PptEditor 
      geminiApiKey={geminiKey}
      appName="AI Design Studio" 
    />
  );
}

<PptEditor 
  onAiRewrite={async (text) => {
    const res = await myAiService.call('rewrite', text);
    return res.output;
  }}
  onAiGrammar={async (text) => {
    return await myAiService.call('fix-grammar', text);
  }}
  onAiShorten={async (text) => {
    return await myAiService.call('summarize', text);
  }}
  // Also supports onAiLengthen and onAiContinue
/>

import { PptEditor, PptxBlobExporter } from 'slidecanvas';
import { useRef } from 'react';

export function S3Editor({ s3Key }) {
  const timerRef = useRef(null);

  const handleAutoSave = (presentation) => {
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(async () => {
      const exporter = new PptxBlobExporter();
      const blob = await exporter.exportToBlob(presentation);
      const formData = new FormData();
      formData.append('file', blob, 'update.pptx');
      formData.append('key', s3Key);
      await fetch('/api/save-to-s3', { method: 'POST', body: formData });
    }, 7000);
  };

  return <PptEditor onChange={handleAutoSave} />;
}

const myDraft: Presentation = {
  slides: [
    {
      id: 'welcome-slide',
      elements: [
        {
          id: 'title-1',
          type: 'text',
          content: 'Hello World!',
          x: 100, y: 100, width: 600, height: 100, fontSize: 48,
          color: '#3b82f6', zIndex: 1
        }
      ]
    }
  ],
  layout: { width: 12192000, height: 6858000 }
};

import { PptxParser } from 'slidecanvas';

async function extractCaptions(fileBuffer: ArrayBuffer) {
  const parser = new PptxParser();
  const presentation = await parser.parse(fileBuffer);
  return presentation.slides.flatMap(s => s.elements.map(e => e.content));
}

import { PptEditor } from 'slidecanvas';

export default function MyEditor() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <PptEditor
        width="100%"
        height="100%"
        appName="SkyDeck"
        appBgColor="#0f172a" // Custom dark theme
        showHomeOnEmpty={true} // Show the splash screen if no PPT loaded
      />
    </div>
  );
}

<PptEditor
  onGenerateImage={async (prompt) => {
    const response = await fetch('/api/generate', {
      method: 'POST',
      body: JSON.stringify({ prompt })
    });
    const { imageUrl } = await response.json();
    return imageUrl;
  }}
/>

import { PptxParser, PptxBlobExporter } from 'slidecanvas';

// Parse a file
const parser = new PptxParser();
const presentation = await parser.parse(arrayBuffer);

// Modify and export
presentation.slides[0].elements[0].content = "Updated Title";
const exporter = new PptxBlobExporter();
const blob = await exporter.exportToBlob(presentation);