Customize

Everything is configured with <DocondaEditor> props and works the same in Word, PowerPoint and Excel.

Colours and typography

<DocondaEditor src={url} theme="dark" />
<DocondaEditor src={url} theme={{ accent: "#e11d48", font: "Inter, sans-serif", radius: "6px" }} />

theme accepts "light" (default), "dark" or your own values, which are merged with the light theme. You can also use CSS: the colours are variables on .fm-root.

.my-editor { --fm-accent: #e11d48; --fm-surface: #fffdf8; --fm-radius: 4px; }

Key	CSS variable	What it paints
`font`	`--fm-font`	Toolbar typeface
`text` / `muted`	`--fm-text` / `--fm-muted`	Text and secondary text
`surface` / `subtle` / `canvas`	`--fm-surface` / `--fm-subtle` / `--fm-canvas`	Toolbars, second toolbar, background around the document
`border`	`--fm-border`	Borders
`hover` / `active`	`--fm-hover` / `--fm-active`	Button on hover and when pressed
`accent` / `accentText`	`--fm-accent` / `--fm-accent-text`	Brand colour and the text on it
`danger`	`--fm-danger`	Warnings and delete
`radius`	`--fm-radius`	Corners

The page, the slides and the cells keep the file’s own colours.

Your brand’s colours and fonts

<DocondaEditor src={url} colors={["#1a73e8", "#e11d48", "#111827"]} fonts={["Inter", "Georgia"]} />

colors: the colours shown in the colour pickers (text, fill, borders…). With or without #.
fonts: the typefaces in the font list. By default it shows the file’s own; the one the text already uses always appears.

Spell checker

The browser’s spell checker is on. spellCheck={false} turns it off (for example, for documents with a lot of code or proper names).

Language and labels

<DocondaEditor src={url} locale="en" />
<DocondaEditor src={url} labels={{ bold: "Fett", insert: "Einfügen" }} />

locale is "es" (default) or "en". With labels you change any toolbar text, on top of the chosen language. By default the full toolbar is shown. With toolbar you choose which buttons show and in what order: a list of ids, and | separates the groups.

<DocondaEditor src={url} toolbar="undo redo | bold italic underline | bullets numbering | link" />

Also as lists, different per format, or starting from the default one:

<DocondaEditor src={url} toolbar={[["undo", "redo"], ["bold", "italic"]]} />

<DocondaEditor
  src={url}
  toolbar={{
    docx: "undo redo | style | bold italic | bullets numbering",
    pptx: (groups) => groups.filter((g) => !g.includes("present")),
  }}
/>

The default toolbars are exported as WORD_TOOLBAR, SLIDES_TOOLBAR and SHEET_TOOLBAR. An id that does not exist is ignored.

Format	Ids
Word	`undo` `redo` `style` `font` `size` `bold` `italic` `underline` `underlineStyle` `strike` `script` `color` `highlight` `clear` `align` `bullets` `numbering` `outdent` `indent` `spacing` `borders` `link` `insert` `columns` `find` `print`
PowerPoint	`undo` `redo` `newSlide` `font` `size` `bold` `italic` `underline` `strike` `color` `align` `bullets` `numbering` `outdent` `indent` `insert` `present` `print`
Excel	`undo` `redo` `font` `size` `bold` `italic` `underline` `strike` `color` `fill` `alignLeft` `alignCenter` `alignRight` `wrap` `merge` `borders` `numberFormat` `lessDecimals` `moreDecimals` `rowsColumns`

When you select something (a table, an image, a shape, the header…) a second toolbar appears with its options. The main toolbar does not change.

Your own buttons

Give your button an id and put it in the toolbar:

<DocondaEditor
  src={url}
  items={[
    {
      id: "sign",
      label: "Send for signature",
      text: "Send",
      run: async (api) => sendForSignature(api.save()),
    },
  ]}
  toolbar={(groups) => [...groups, ["sign"]]}
/>

Field	What it is
`id`	The one you put in `toolbar`
`label`	Text on hover and for screen readers
`icon`	A 24×24 SVG stroke (the `d` of a `<path>`) or any React element
`text`	Button text, if it has no icon
`run(api)`	What it does when clicked
`active(api)` / `disabled(api)`	Button highlighted or disabled

api has format ("docx", "pptx" or "xlsx"), save() (the file’s bytes as they are now), focus() and raw (the editor’s internal state).

Remove parts

<DocondaEditor src={url} features={{ comments: false, print: false, contextBar: false }} />

Everything is on except what you set to false.

Key	Removes	In
`find`	Find and replace	Word
`print`	Print or save as PDF	Word, PowerPoint
`links`	Links	Word
`columns`	Columns	Word
`headerFooter`	Header and footer	Word
`images`, `tables`, `shapes`, `textboxes`	Those “Insert” options	Word (tables), Word and PowerPoint (the rest)
`footnotes`, `comments`, `toc`	Footnotes, comments, table of contents	Word
`present`	Present	PowerPoint
`notes`	Speaker notes	PowerPoint
`transitions`, `animations`	Transitions and animations	PowerPoint
`contextBar`	The second toolbar	All
`statusBar`	The bottom bar (pages, words, zoom)	Word, PowerPoint

If you only remove a button from toolbar, its keyboard shortcut still works. features removes the option from the toolbars, the menus and its shortcut (for example, Ctrl+F with find: false). Whatever the file already has is still shown: if the Word file has comments, they are displayed even when comments is off.

Your classes

classNames puts your class on each part, so you can adjust whatever you want with your CSS:

<DocondaEditor src={url} classNames={{ root: "my-editor", toolbar: "my-toolbar", contextBar: "my-toolbar-2", statusBar: "my-footer" }} />

Read-only

<DocondaEditor src={url} readOnly />

The document is shown, but nothing can be changed: not by typing, pasting, dragging, keyboard shortcuts, or resizing images or shapes. The toolbars and action buttons (duplicate or delete slides, delete comments) disappear; users can still read, select and copy text, move between slides and sheets, and present. It can be switched at any time, without reopening the file:

const [viewOnly, setViewOnly] = useState(true)

<button onClick={() => setViewOnly(!viewOnly)}>{viewOnly ? "Edit" : "Done"}</button>
<DocondaEditor src={url} readOnly={viewOnly} />

Get started

Guides

Colours and typography

Your brand’s colours and fonts

Spell checker

Language and labels

Your own buttons

Remove parts

Your classes

Read-only

​Colours and typography

​Your brand’s colours and fonts

​Spell checker

​Language and labels

​Toolbar

​Your own buttons

​Remove parts

​Your classes

​Read-only

Colours and typography

Your brand’s colours and fonts

Spell checker

Language and labels

Toolbar

Your own buttons

Remove parts

Your classes

Read-only