Classes, data attributes and custom properties

Use these names in a stylesheet. Start your selectors at .tiptap.

Classes

Class	Element
`tiptap-chart`	The root of a chart in the editor, with `role="figure"` and an `aria-label` from the description or the title
`tiptap-chart-viewport`	Around the canvas. You scroll inside it while the chart is zoomed in
`tiptap-chart-zoom-box`	Between the viewport and the canvas. Takes the room of the zoomed chart
`tiptap-chart-canvas`	The area the chart takes in the text
`tiptap-chart-stage`	The element the Renderer draws into. Scaled down when `minRenderWidth` applies
`tiptap-chart-caption`	Below the chart: the description, while the spec has `caption: true`
`tiptap-chart-text-input`	The field that a double click opens over a text of the chart, to rename it (Editing text in a chart)
`tiptap-chart-attribution`	Below the chart: the link that the Renderer's rules ask for. `hidden` while there is none (Rules of your Renderer)
`tiptap-chart-error`	The message shown when drawing failed
`tiptap-chart-unavailable`	What `unavailable` returns, shown when no Renderer here draws the chart
`tiptap-diagram-input`	The Quick Input, where you type the Chart syntax
`tiptap-diagram-input-placeholder`	In the Quick Input, below a first line that names the type: the example rows of the `placeholder` option, until you type a row
`tiptap-chart-resize-handle`	A handle that resizes the chart, with `resizable`. Shown while the chart is selected

Data attributes

On a chart

On .tiptap-chart:

Attribute	Values
`data-tt-chart-type`	The chart's `spec.type`: `line`, `bar`, `radar`, `sankey` … or a type you registered
`data-tt-chart-renderer`	The id of the Renderer that draws it
`data-tt-chart-state`	`idle`, `empty`, `loading`, `ready`, `unavailable`, `error`
`data-tt-chart-source`	`none`, `linked`, `detached`
`data-tt-chart-readonly`	Present while the data is read-only
`data-tt-chart-legend`	`top`, `right`, `bottom`, `left`, `none`
`data-tt-chart-selected`	Present while the chart is selected
`data-tt-chart-zoom`	`fit`, or the zoom factor, such as `1.5` (`setZoom`)
`data-tt-chart-maximized`	Present while the chart is laid over the window (`setMaximized`)
`data-tt-chart-border`	Present while the spec has `border: true`
`data-tt-chart-hidden`	Present while only the table the chart follows is shown. The chart is not displayed
`data-tt-chart-panning`	Present while you drag the zoomed chart (`setPan`)
`data-tt-chart-sized`	Present while the spec has a `size`
`data-tt-chart-align`	`left` or `right` for a chart with a size that is not centered (`setDiagramAlign`)
`data-tt-chart-resizing`	Present while you drag a handle

On a resize handle

Element	Attribute	Values
`.tiptap-chart-resize-handle`	`data-tt-chart-resize`	`left`, `right`, `bottom`, `bottom-left`, `bottom-right`

On the Quick Input

On .tiptap-diagram-input:

Attribute	Values
`data-tt-diagram-input-type`	The chart type the Quick Input becomes
`data-tt-chart-delimiter`	`comma`, `semicolon`, `pipe`, `tab`, `none`: the delimiter that splits what you typed, set with `setDiagramInputDelimiter` or detected
`data-tt-chart-placeholder`	While the Quick Input is empty: the text of the `placeholder` option, shown by `::before`

In the HTML output and on other nodes

Attribute	Element
`data-tt-chart-spec`	The Chart Spec as JSON, on `figure[data-type="chart"]`
`data-tt-chart-link`	The Data Source as JSON, on `figure[data-type="chart"]`
`data-tt-chart-synced-at`	When the data was last read from its Data Source, as an ISO time, on `figure[data-type="chart"]`
`data-tt-chart-renderer`	The chosen Renderer, on `figure[data-type="chart"]`
`data-tt-chart-delimiter`	The delimiter the data was typed with, on `figure[data-type="chart"]`
`data-tt-diagram-input`	On a table used as a chart's input
`data-tt-chart-table-id`	On a table that a chart follows
`data-tt-chart-image-source`	On an image made from a chart with `keepData`
`data-tt-attribution`	On the `<a>` in an exported SVG of a chart or a diagram, when its Renderer asks for an attribution link

Custom properties

Chart

Property	Default
`--tt-chart-padding`	`12px`
`--tt-chart-border`	`1px solid transparent`
`--tt-chart-radius`	`8px`
`--tt-chart-background`	`transparent`. A spec's `background` sets it on that chart
`--tt-chart-border-color`	`#d4d4d8`, the frame of a chart with `border: true`
`--tt-chart-border-width`	`1px`
`--tt-chart-caption-color`	`#71717a`
`--tt-chart-caption-size`	`0.875em`
`--tt-chart-caption-align`	`center`
`--tt-chart-text-input-border`	`1px solid #6a00f5`, around the field for a chart's text
`--tt-chart-text-input-background`	`Canvas`
`--tt-chart-attribution-color`	`#71717a`
`--tt-chart-attribution-size`	`0.75em`
`--tt-chart-aspect-ratio`	`16 / 9`. A chart with a `size` sets it to its `ratio`
`--tt-chart-max-height`	`480px`. Not applied to a chart with a `size`
`--tt-chart-width`	Set on a chart with a `size`: its share of the width of the editor's text, such as `50%`
`--tt-chart-handle-color`	`#6a00f5`, the fill of a resize handle
`--tt-chart-handle-border`	`#ffffff`
`--tt-chart-handle-radius`	`4px`
`--tt-chart-selected-outline`	`2px solid #6a00f5`
`--tt-chart-loading-opacity`	`0.5`
`--tt-chart-error-color`	`#e5484d`
`--tt-chart-unavailable-color`	`#71717a`
`--tt-chart-maximized-inset`	`0`: the distance of a maximized chart from the edges of the window, as for `inset`
`--tt-chart-maximized-z-index`	`50`
`--tt-chart-maximized-background`	`--tt-chart-background`, or `Canvas` when that is unset

A maximized chart is position: fixed.
If an ancestor of the editor sets transform, filter or contain, a maximized chart is placed relative to that ancestor instead of the window.

Drawing

Every Renderer reads these properties when it draws a chart.

Property	Default
`--tt-chart-series-1` … `--tt-chart-series-8`	`#6a00f5`, `#00a3a3`, `#f59e0b`, `#e5484d`, `#3b82f6`, `#16a34a`, `#d946ef`, `#64748b`
`--tt-chart-axis-color`	`#9ca3af`
`--tt-chart-grid-color`	`#e5e7eb`
`--tt-chart-label-color`	`#4b5563`
`--tt-chart-title-color`	`#111827`
`--tt-chart-font-family`	`Arial, Helvetica, "Liberation Sans", sans-serif`
`--tt-chart-font-size`	`12px`
`--tt-chart-title-size`	`16px`
`--tt-chart-title-weight`	`600`
`--tt-chart-legend-gap`	`16px`
`--tt-chart-legend-marker-size`	`10px`

Sizes are pixels, written with or without px. Other units are not converted.
A palette in the Chart Spec overrides the series colors for that chart. The series colors are the colors of the data series, such as the bars or lines.

Fonts in exports and Word

An exported image can only use fonts installed on the machine that exports it.
A web font that the page loaded is not available to an exported image.
A native Word chart names a single typeface. It is the first family of --tt-chart-font-family that Word ships with (WORD_FONTS), a generic family as its Word counterpart, or fallbackFont ('Arial').
wordFontFor(fontFamily) tells you whether Word will draw a different typeface than the page.

Quick Input

Property	Default
`--tt-diagram-input-radius`	`8px`
`--tt-diagram-input-background`	`#f4f4f5`
`--tt-diagram-input-color`	`inherit`
`--tt-diagram-input-font-family`	`ui-monospace, monospace`
`--tt-diagram-input-delimiter-color`	`#6a00f5`
`--tt-diagram-input-placeholder-color`	`#a1a1aa`
`--tt-diagram-input-placeholder-lines`	Set on an empty Quick Input to the number of lines of its placeholder
`--tt-diagram-input-cell-background`	`#f4f4f5`

Highlighted source

Source text is colored in the Quick Input, in a Mermaid diagram's code view, and in any element with the class tiptap-diagram-source, such as a source editor of your own. The option sourceHighlighting turns the colors off in the Quick Input and the code view only, not in your own element.

Class	Part	Color property	Light default
`tiptap-diagram-source-keyword`	The diagram or chart type, statement words	`--tt-diagram-source-keyword`	`#1e40af`
`tiptap-diagram-source-label`	Labels in shapes, quotes and the first column	`--tt-diagram-source-label`	`#3f6212`
`tiptap-diagram-source-number`	Numbers	`--tt-diagram-source-number`	`#7c2d12`
`tiptap-diagram-source-operator`	Arrows, delimiters, brackets, colons	`--tt-diagram-source-operator`	`#52525b`
`tiptap-diagram-source-comment`	Comments (`%%`)	`--tt-diagram-source-comment`	`#4b4b53`

The dark value of each color is derived as for every default color. Each has a contrast of 4.5:1 or more against the input background in both schemes.
To make one part colorless, set its property to inherit.

Diagrams

A diagram (the flowDiagram node, see Diagrams) follows the same pattern with its own names.

Diagram classes

Class	Element
`tiptap-flow-diagram`	The root of a diagram in the editor, with `role="figure"` and an `aria-label` from the description or the title
`tiptap-flow-diagram-viewport`	Around the canvas. You scroll inside it while the diagram is zoomed in
`tiptap-flow-diagram-zoom-box`	Between the viewport and the canvas. Takes the room of the zoomed diagram
`tiptap-flow-diagram-canvas`	Holds the drawn diagram as an `<img>`
`tiptap-flow-diagram-code`	The source text, shown instead of the drawn diagram while the view is `code`
`tiptap-flow-diagram-caption`	Below the diagram: the title
`tiptap-flow-diagram-attribution`	Below the diagram: the link that the Diagram Renderer's rules ask for. `hidden` while there is none
`tiptap-flow-diagram-error`	The message shown when drawing failed
`tiptap-flow-diagram-unavailable`	What `unavailable` returns, shown when no Renderer here draws the diagram
`tiptap-flow-diagram-resize-handle`	A handle that resizes the diagram, with `resizable`. Shown while the diagram is selected
`tiptap-flow-diagram-label-input`	The field that a double click opens over a text in a Mermaid diagram of any kind, to edit it. Not in draw.io or BPMN (Editing in the diagram)

Diagram data attributes

On .tiptap-flow-diagram:

Attribute	Values
`data-tt-flow-diagram-format`	`mermaid`, `drawio`, `bpmn`, or the id of a format that a Diagram Renderer of your own draws
`data-tt-flow-diagram-kind`	A Mermaid kind such as `flowchart`, or `unknown`, for example for draw.io and BPMN
`data-tt-flow-diagram-view`	`diagram` or `code`
`data-tt-flow-diagram-state`	`idle` (the code view), `empty`, `loading`, `ready`, `unavailable`, `error`
`data-tt-flow-diagram-renderer`	The id of the Diagram Renderer that draws it
`data-tt-flow-diagram-selected`	Present while the diagram is selected
`data-tt-flow-diagram-zoom`	`fit`, or the zoom factor, such as `1.5` (`setZoom`)
`data-tt-flow-diagram-maximized`	Present while the diagram is laid over the window (`setMaximized`)
`data-tt-flow-diagram-panning`	Present while you drag the zoomed diagram (`setPan`)
`data-tt-flow-diagram-sized`	Present while the diagram has a `size`
`data-tt-flow-diagram-align`	`left` or `right` for a diagram with a size that is not centered (`setDiagramAlign`)
`data-tt-flow-diagram-resizing`	Present while you drag a handle

On .tiptap-flow-diagram-resize-handle:

Attribute	Values
`data-tt-flow-diagram-resize`	`left`, `right`, `bottom`, `bottom-left`, `bottom-right`

In HTML, on figure[data-type="flow-diagram"]:

Attribute	Value
`data-tt-flow-diagram-format`	The format
`data-tt-flow-diagram-description`	The description
`data-tt-flow-diagram-view`	`code`, while the source is shown
`data-tt-flow-diagram-options`	The `options` as JSON

Diagram custom properties

Property	Default
`--tt-flow-diagram-padding`	`12px`
`--tt-flow-diagram-border`	`1px solid transparent`
`--tt-flow-diagram-radius`	`8px`
`--tt-flow-diagram-max-height`	`640px`, the tallest a diagram is drawn at its width. Not applied to a diagram with a `size`
`--tt-flow-diagram-width`	Set on a diagram with a `size`: its share of the width of the editor's text
`--tt-flow-diagram-aspect-ratio`	Set on a diagram with a `size`: its `ratio`. The drawn diagram fits into an area of that aspect ratio
`--tt-flow-diagram-handle-color`	`#6a00f5`, the fill of a resize handle
`--tt-flow-diagram-handle-border`	`#ffffff`
`--tt-flow-diagram-handle-radius`	`4px`
`--tt-flow-diagram-code-radius`	`8px`
`--tt-flow-diagram-code-background`	`#f4f4f5`
`--tt-flow-diagram-code-color`	`inherit`
`--tt-flow-diagram-code-font-family`	`ui-monospace, monospace`
`--tt-flow-diagram-empty-text`	`"Empty diagram"`, a CSS string shown while the source is empty
`--tt-flow-diagram-caption-color`	`#71717a`
`--tt-flow-diagram-caption-size`	`0.875em`
`--tt-flow-diagram-caption-align`	`center`
`--tt-flow-diagram-attribution-color`	`#71717a`
`--tt-flow-diagram-attribution-size`	`0.75em`
`--tt-flow-diagram-loading-opacity`	`0.5`
`--tt-flow-diagram-error-color`	`#e5484d`
`--tt-flow-diagram-unavailable-color`	`#71717a`
`--tt-flow-diagram-selected-outline`	`2px solid #6a00f5`
`--tt-flow-diagram-label-input-border`	`1px solid #6a00f5`, around the field for a diagram's text
`--tt-flow-diagram-label-input-background`	`Canvas`

A maximized diagram uses --tt-chart-maximized-inset, --tt-chart-maximized-z-index and --tt-chart-maximized-background. So charts and diagrams leave the same room around them.

Diagram drawing

The Diagram Renderer reads these properties when it draws a diagram. An export reads them too.

Property	Default
`--tt-flow-diagram-background`	`transparent`
`--tt-flow-diagram-node-color`	`#f4eeff`, the fill of a node
`--tt-flow-diagram-node-border-color`	`#6a00f5`
`--tt-flow-diagram-text-color`	`#18181b`
`--tt-flow-diagram-line-color`	`#52525b`, edges and arrows
`--tt-flow-diagram-group-color`	`#fafafa`, the fill of a subgraph or lane
`--tt-flow-diagram-note-color`	`#fff8db`
`--tt-flow-diagram-font-family`	`Arial, Helvetica, "Liberation Sans", sans-serif`
`--tt-flow-diagram-font-size`	`14px`. Pixels only

PreviouslyStorage