@8btc/wujie-ppt

A React component for editing PowerPoint-like slides, extracted from PPTist.
This repository is structured as a standard npm package, with a Vite-powered demo under demo/ for local development and preview.

Installation

npm install @8btc/wujie-ppt

Usage

import React, { useState } from "react";
import { PPTCanvas, SlideJsonData } from "@8btc/wujie-ppt";
import "@8btc/wujie-ppt/dist/style.css"; // Import styles

const App = () => {
  const [slidesData, setSlidesData] = useState<SlideJsonData>({
    slides: [],
    themeColors: [
      "#000000",
      "#FFFFFF",
      "#EE3333",
      "#00AA00",
      "#3333EE",
      "#FFFF00",
    ],
    size: { width: 960, height: 540 },
  });

  const handleUpdate = (newData: SlideJsonData) => {
    console.log("Updated data:", newData);
    // You might want to save this to state or backend
  };

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <PPTCanvas initialSlidesData={slidesData} onDataUpdate={handleUpdate} />
    </div>
  );
};

export default App;

Demo (Hot Reload)

# Install dependencies
npm install

# Start demo dev server (HMR enabled)
npm run dev
# Demo served from demo/, visit http://127.0.0.1:5173/

# Optional: build static demo for preview
npm run build:demo
npm run preview

Props

| Prop | Type | Description | | ------------------- | --------------------- | ------------------------------------------------------------------------------------- | | initialSlidesData | SlideJsonData | Initial data for the editor. | | onDataUpdate | (data: any) => void | Callback when data changes. Note: Returns internal state format, not SlideJsonData. |

Development

# Install dependencies
npm install

# Build library (ESM/UMD + d.ts)
npm run build
npm run build:lib

# Run tests
npm test