@beast2025/presentation-editor
Advanced tools
Vanilla JS in-browser editor for static HTML presentations. Slide builder, theme/font picker, image upload (HEIC), IndexedDB persistence.
Vanilla JS 라이브러리 — 정적 HTML 발표자료의 in-browser 편집. 한 줄 인라인으로 모든 기능 활성: 텍스트 편집 · 이미지 업로드 (HEIC) · 테마/폰트 전환 · IndexedDB 영구 저장.
🌐 Languages: 한국어 · English · 日本語 · 中文
이미 빌드된 HTML 발표자료에 <script> 한 줄 인라인으로 박으면 편집기·테마 스위처·폰트 picker·이미지 업로드·PDF 내보내기 가 활성화됨. React/Vue/build pipeline 없음 — 어떤 정적 HTML 에도 즉시 작동.
<body data-pt-theme="ios26">
<link rel="stylesheet" href="./themes/ios26.css">
<div class="slide">...</div>
<div class="slide">...</div>
<!-- 선택: QR · mermaid -->
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<!-- 메인 -->
<script src="./src/presentation-editor.js"></script>
</body>
.slide-content h1/h2/p, .note-bar, .cover h1 등 클릭만 하면 즉시 편집capture="environment")location.pathname 기반)compositionstart/end + e.isComposing + keyCode 229)| 모드 | 엔진 | 파일 크기 | 시각 충실도 |
|---|---|---|---|
| 📄 인쇄 | window.print() | 5-10MB | 그라데이션 fallback |
| 📄 고품질 | jsPDF + html2canvas (200KB 동적 로드) | 15-25MB | 100% (raster) |
| 📱 모바일 | 동일 엔진 + blob URL | 동일 | 같음 (탭에서 열림) |
mermaid, qrcode-generatorheic2any@0.0.4, html2canvas@1.4.1, jspdf@2.5.1~/presentation-editor/
├── src/presentation-editor.js # 메인 라이브러리 (~110KB)
├── themes/
│ ├── ios26.css # Apple iOS 26 시스템 토큰
│ └── classic.css # Electric blue (#2d2dff)
├── docs/demo.gif # 데모 (이 README 상단)
├── examples/ # 사용 예시
├── README.md # 한국어 (this file)
├── README.en.md # English
├── README.ja.md # 日本語
├── README.zh.md # 中文
├── LICENSE # MIT
└── package.json # @seunghan/presentation-editor
window.PresentationEditor)PresentationEditor.version // '1.2.0'
PresentationEditor.theme // 'ios26' | 'sunset' | 'classic'
PresentationEditor.fontPair // current font pair key
PresentationEditor.isComposing // CJK IME 활성 여부
PresentationEditor.isMobile()
PresentationEditor.applyTheme(name)
PresentationEditor.applyFontPair(key)
PresentationEditor.minimizeToolbar(state)
PresentationEditor.tryFullscreen(el)
PresentationEditor.openInNewTab()
PresentationEditor.toast(msg)
PresentationEditor.compressImage(file, maxDim, quality)
PresentationEditor.convertHeic(file)
PresentationEditor.loadImageInto(ph, file)
PresentationEditor.exportPdfHighQuality(opts)
PresentationEditor.viewPdfMobile()
PresentationEditor.captureFirstSlide() // 1200×630 PNG blob
PresentationEditor.downloadOgImage()
PresentationEditor.uploadOgToAxAdmin() // axhub.space owner only
PresentationEditor.db.{
putImage, getImage, deleteImage,
putEdit, getEdit,
listImages, estimate,
migrateFromLocalStorage, restoreImages
}
window.__ptEditorLoaded 가 truthy 면 두 번째 로드 시 즉시 return.
src/presentation-editor.js 의 THEMES 객체에 새 항목 추가:
mytheme: {
name: 'My Theme',
dot: '#ff00ff',
css: [
'.pt-theme-mytheme {',
' --color-blue: #ff00ff;',
' --pt-gradient-em: linear-gradient(135deg, #ff00ff, #00ffff);',
'}',
// ... 더
].join('\n')
}
MIT — LICENSE 파일 참조.
김승한 (Seunghan) · @seunghan91
CHANGELOG.md 참조.
이슈 / PR 환영. CONTRIBUTING.md 참조 (예정).
FAQs
Vanilla JS in-browser editor for static HTML presentations. Slide builder, theme/font picker, image upload (HEIC), IndexedDB persistence.
We found that @beast2025/presentation-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
The campaign amassed more than 75,000 installs by targeting Russian-speaking users seeking access to blocked services.
Company News
Open source maintainers are under more pressure than ever. We're raising our open source program from the Team plan to the Business plan, free.
Security News
The supply chain control that delays freshly published gems now covers lockfile generation and gem vendoring in Ruby projects.