SlideKit

An embeddable slide editor for the web.

Create in the browser. Save portable JSON. Export editable PowerPoint.

English · 简体中文

Get started · Integration guide · Compatibility · Download

Editor preview

SlideKit v0.1.1 captured in desktop Chrome using the included sample deck. Click the screenshot to view it at full size. The screenshot uses Simplified Chinese. The current UI also supports Traditional Chinese, English, Korean and Japanese; documentation is available in English and Chinese.

Build presentations inside your product

SlideKit mounts into a DOM container and owns its toolbar, thumbnails, canvas and inspector. It uses JavaScript and DOM/SVG, with no framework requirement. ESM, a standalone script bundle, CSS and JSDoc-generated TypeScript declarations are included in every build.

Create	Arrange	Bring your files
Rich text with local formatting	Drag, resize, rotate, snap	Portable JSON with embedded images
Images, shapes and arrows	Multi-select, align, distribute	Local PPTX import with fidelity warnings
Gradients, shadows, transparency	Layers, locks, undo/redo	PDF pages imported as images
Multiple slides and hidden pages	Zoom, read-only mode, slideshow	Native editable PPTX export

Files are processed locally. The library has no upload service, account system or persistence backend. The demo saves to IndexedDB; your host controls storage through events.

Get started

Node.js 22.13+ or 24+:

git clone https://github.com/SamuelSupe/slidekit.git
cd slidekit
npm ci
npm run dev

Open http://localhost:5182. Use npm run build:demo and npm run preview to check the static release at port 5183.

Embed the library

Download local-slidekit-0.2.0.tgz from Releases, then install it:

npm install ./local-slidekit-0.2.0.tgz

The package name is @local/slidekit; it is not published to the npm registry.

import { createEditor, paragraph } from '@local/slidekit';
import '@local/slidekit/style.css';

const editor = createEditor(document.querySelector('#editor'), { locale: 'en' });
editor.addElement('text', {
  content: paragraph('Make room for your next idea.'),
  x: 96, y: 96, width: 900, height: 140, fontSize: 44,
});

const off = editor.on('change', () => {
  const snapshot = editor.getDocument();
  // Debounce and persist snapshot in your host application.
});

// Before unmounting: off(); editor.destroy();

Give the container a size, for example <div id="editor" style="height:720px"></div>.

Using a plain HTML page? Include dist/slidekit.css and dist/slidekit.iife.js, then call SlideKit.createEditor(container). ESM, plain script, React and Vue examples are included.

PDF in a bundled host: copy dist/pdf-assets/ to a public directory and set pdfAssetsUrl. Direct script/ESM deployments should keep the complete dist/ tree together. Details →

Interface languages

Configure locale as zh-CN (default), zh-TW, en, ko or ja. Call editor.setLocale('ja') to switch an existing instance and editor.getLocale() to read its language. The demo has a language selector; ESM and IIFE examples demonstrate two independent languages. Changing the UI language preserves slide content and undo history. See language configuration.

Know the boundaries

• JSON is the lossless working format. PPTX import supports a defined subset of Office objects; warnings identify unsupported or simplified content.
• PDF imports as page images. Original PDF text is not individually editable; new text and shapes remain editable.
• Desktop browsers are the target. The UI folds its sidebars in narrow containers; dedicated mobile editing is outside this release.
• Font availability and Office layout engines can change wrapping and spacing. The latest release has browser and OOXML validation; a fresh native WPS/PowerPoint open-and-edit check is still outstanding.
• Table/chart editors, animations, collaboration, accounts and cloud storage are outside the current scope.

Documentation and development

Topic	English	简体中文
Setup, API, document model, imports and limits	Guide	接入指南
Actual validation and remaining gaps	Validation	验证记录
Release changes	Changelog	变更记录
Contribution and security	Contributing · Security	参与贡献 · 安全说明

npm test           # Document, history, geometry, import/export boundaries
npm run build      # ESM + IIFE + CSS + declarations + dependency notices
npm run build:demo # Static site and integration examples
npm pack           # Installable tarball; builds first

Built with Tiptap, Moveable, Selecto, PptxGenJS, PDF.js and Lucide.

MIT license. Bundled dependency license texts are generated in dist/THIRD_PARTY_NOTICES.txt and included in release archives.