sweet-viewer

English | 简体中文

Say goodbye to software downloads! Our powerful online viewer gives you instant access to all your files. Effortlessly open and preview DOCX, XLSX, PPTX, TXT, CODE and many other formats with just one click.

From complex Excel spreadsheets to important Word documents and critical PowerPoint presentations, we've got you covered. Experience the freedom of an all-in-one platform designed for ultimate convenience.

Live Demo: https://viewer.sweetui.com

Features

• Multi-format support — DOCX, PPTX, XLSX, TXT / code files
• Framework-agnostic — Vanilla JS core with React / Vue adapters
• Pure front-end parsing — Files never leave the browser, privacy-safe
• Smart encoding detection — TXT auto-detects UTF-8 / UTF-16 / GBK / GB18030
• Line-number sync — TXT preview with line numbers, highlight, scroll sync
• TXT dark mode — Built-in dark theme for TXT / code preview
• Modal / inline — Full-screen overlay or embedded container modes
• Event system — loadstart / loaded / error / close

Install

npm install sweet-viewer
# or
pnpm add sweet-viewer
# or
yarn add sweet-viewer

Usage

Vanilla JS

import { createViewer } from "sweet-viewer";
import "sweet-viewer/style.css"; // optional, if the build does not inject styles

const viewer = createViewer("#container", { overlay: true });

viewer.loadFile(file);
viewer.on("loaded", () => console.log("rendered"));
viewer.on("error", (e) => console.error(e));

React

import { SweetViewerReact } from "sweet-viewer/react";
import "sweet-viewer/style.css";

function App() {
  const [file, setFile] = useState<File | null>(null);
  return (
    <>
      <input type="file" onChange={(e) => setFile(e.target.files?.[0] || null)} />
      <SweetViewerReact source={file} overlay onLoaded={() => console.log("done")} />
    </>
  );
}

The component renders a wrapper <div class="sv-container"> (plus your custom class). You can customize it via optional className and style props:

<SweetViewerReact
  source={file}
  className="my-viewer"
  style={{ height: "80vh", borderRadius: 12 }}
/>

Vue 3

<script setup lang="ts">
import { SweetViewerVue } from "sweet-viewer/vue";
import "sweet-viewer/style.css";
import { ref } from "vue";

const file = ref<File | null>(null);
</script>

<template>
  <input type="file" @change="(e) => file = (e.target as HTMLInputElement).files?.[0] || null" />
  <SweetViewerVue :source="file" overlay @loaded="() => console.log('done')" />
</template>

The Vue component also supports optional class and style props:

<SweetViewerVue
  :source="file"
  class="my-viewer"
  :style="{ height: '80vh', borderRadius: '12px' }"
/>

API

Component Props (React / Vue)

Prop	Type	Default	Description
source	File | Blob | ArrayBuffer | string | null	null	Document source to preview (auto-reloads on change)
fileName	string	—	File name for type inference (optional, auto-detected from File)
className (React) / class (Vue)	string	—	Custom class appended to the wrapper div (after sv-container)
style	React.CSSProperties / Record<string, any>	—	Custom inline styles for the wrapper div
theme	"light" | "dark"	"light"	Theme
overlay	boolean	false	Full-screen overlay mode
showHeader	boolean	true	Show file name header bar
showClose	boolean	true	Show close button
txtMaxSize	number	5242880	Max bytes for TXT preview. Set to 0 or Infinity to disable
txtMaxLines	number	20000	Max lines rendered for TXT (truncated beyond)
maxSize	number	52428800	Max bytes for DOCX/PPTX/XLSX (50MB). Set to 0 or Infinity to disable

React events: onLoadStart / onLoaded / onError / onClose
Vue events: @loadstart / @loaded / @error / @close

SweetViewer Options (Native JS)

Option	Type	Default	Description
theme	"light" | "dark"	"light"	Theme (dark mode currently only affects TXT / code preview)
overlay	boolean	false	Full-screen overlay mode
showHeader	boolean	true	Show file name header bar
showClose	boolean	true	Show close button
width	string | number	"100%"	Container width
height	string | number	"100%"	Container height
txtMaxSize	number	5242880	Max bytes for TXT preview. Set to 0 or Infinity to disable
txtMaxLines	number	20000	Max lines rendered for TXT (truncated beyond)
maxSize	number	52428800	Max bytes for DOCX/PPTX/XLSX (50MB). Set to 0 or Infinity to disable

Methods

• load(source, name?) — Load and render a document
• loadFile(file) — Shortcut, pass a File directly
• clear() — Clear current content
• setTheme(theme) — Switch theme
• setWidth(width) / setHeight(height) — Update container size at runtime
• setShowClose(bool) / setShowHeader(bool) — Toggle UI elements at runtime
• show() — Re-display after overlay close
• on(event, cb) / off(event, cb) — Event listeners
• destroy() — Destroy the instance

Events

• loadstart — Loading started
• loaded — Loading completed
• error — An error occurred
• close — Viewer closed

Supported Formats

Type	Extensions	Underlying Library
DOCX	.docx	docx-preview
PPTX	.pptx	pptx-preview
XLSX	.xlsx	xlsx-preview
TXT / Code	.txt .md .json .js .ts .csv .log .xml .yml ...	Built-in

Online Demo

Try it live: https://viewer.sweetui.com

Local Development

git clone https://github.com/leuvi/sweet-viewer.git
cd sweet-viewer
npm install
npm run dev

Open http://localhost:5173 and drop a file to preview.

License

MIT © @苹果熊