Skip to main content
Styles are plain objects. set_style assigns a default style per role, and a block level style merges on top of its role style for that one block.

​
Roles

set_style takes a partial map from role to style. The roles are: 
type StyleRole =
  | "heading" | "paragraph" | "code" | "formula" | "list"
  | "link" | "group" | "divider" | "note" | "table" | "chart";

type RoleStyles = Partial<Record<StyleRole, StyleProperties>>;

doc.set_style({
  heading: { font_family: "inter", color: "#111827" },
  paragraph: { font_family: "source-serif-4", font_size: 11.5, line_height: 1.6 },
  link: { color: "#2563eb" },
});
A block then overrides its role with style: 
{ type: "paragraph", text: "Centered note.", style: { text_align: "center", color: "#6b7280" } }

​
Style properties

StyleProperties is a CSS like bag. The fields that matter most for documents:
​
color
ColorLike
Text color. Accepts a hex string or a Color. See Color.
​
background_color
ColorLike
Background fill. Accepts a hex string or a Color. See Color.
​
font_family
string
One of the bundled font names or a custom registered name. See Fonts and weights.
​
font_size
number
Font size in points.
​
font_weight
"normal" | "bold" | number
Selects a real weight by instancing the variable font. Accepts a weight name or a number. See Fonts and weights.
​
font
string
The math font name for formulas. See Formulas.
​
line_height
number
Line height multiplier.
​
text_align
"left" | "center" | "right" | "justify"
Horizontal text alignment.
​
text_markdown
boolean
Opt string parts into markdown parsing. See Inline content.
​
margin
number | string
Outer spacing. Also margin_top, margin_right, margin_bottom, and margin_left.
​
padding
number | string
Inner spacing. Also padding_top, padding_right, padding_bottom, and padding_left.
​
width
number | string
Box width.
​
height
number | string
Box height.
interface StyleProperties {
  color?: ColorLike;
  background_color?: ColorLike;
  font_family?: string;
  font_size?: number;
  font_weight?: "normal" | "bold" | number;
  font?: string;
  line_height?: number;
  text_align?: "left" | "center" | "right" | "justify";
  text_markdown?: boolean;
  margin?: number | string;
  padding?: number | string;
  width?: number | string;
  height?: number | string;
}
color and background_color accept a hex string or a Color, so ColorLike = string | Color. See Color.