--- title: "Classes, data attributes and custom properties" description: "Use these names in a stylesheet." canonical_url: "https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/selectors" --- # Classes, data attributes and custom properties Use these names in a stylesheet. ## 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](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/editing.md)) | | `tiptap-chart-attribution` | Below the chart: the link that the Renderer's rules ask for. `hidden` while there is none ([Rules of your Renderer](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/custom.md#rules-of-your-renderer)) | | `tiptap-chart-error` | The message shown when drawing failed | | `tiptap-chart-unavailable` | What [`unavailable`](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/options.md#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 `` 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`](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/options.md#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](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/overview.md)) 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 `` | | `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`](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/options.md#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](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/editing.md)) | ### 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](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/overview.md#mermaid-kinds) 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 |