Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.superdoc.dev/llms.txt

Use this file to discover all available pages before exploring further.

SuperDoc works in Solid through the core superdoc package. Mount it into a DOM element, clean it up on unmount, and drive it with Solid’s fine-grained reactivity.
SuperDoc does not ship a first-party Solid wrapper. Use the core superdoc package directly, or build a community wrapper on top of it.

​
Install

npm install superdoc

​
Quick start

import { onCleanup, onMount } from 'solid-js';
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

export default function App() {
  let superdoc: SuperDoc | undefined;
  const editorId = 'superdoc-editor';

  onMount(() => {
    superdoc = new SuperDoc({
      selector: `#${editorId}`,
    });
  });

  onCleanup(() => {
    superdoc?.destroy();
  });

  return <div id={editorId} style={{ height: '700px' }} />;
}

​
Core concepts

​
Document modes

ModeDescription
editingFull editing capabilities
viewingRead-only presentation
suggestingTrack changes mode
new SuperDoc({
  selector: `#${editorId}`,
  document: file(),
  documentMode: 'editing',
});

​
User roles

RoleCan EditCan SuggestCan View
editorYesYesYes
suggesterNoYesYes
viewerNoNoYes
new SuperDoc({
  selector: `#${editorId}`,
  document: file(),
  role: 'editor',
});

​
Handle file uploads

import { createEffect, createSignal, onCleanup, Show } from 'solid-js';
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

function FileEditor() {
  const [file, setFile] = createSignal<File | null>(null);
  const editorId = 'superdoc-editor';
  let superdoc: SuperDoc | undefined;

  createEffect(() => {
    const selected = file();
    if (!selected) return;

    superdoc = new SuperDoc({
      selector: `#${editorId}`,
      document: selected,
      user: { name: 'User', email: 'user@company.com' },
    });

    onCleanup(() => {
      superdoc?.destroy();
    });
  });

  return (
    <div>
      <input
        type='file'
        accept='.docx'
        onChange={(event) => {
          const selected = event.currentTarget.files?.[0];
          if (selected) setFile(selected);
        }}
      />
      <Show when={file()}>
        <div id={editorId} style={{ height: '700px' }} />
      </Show>
    </div>
  );
}

​
Next steps