How to Change Default Styles for Headings in Builder.io?

Visual Editor Help
1

I’m looking for a way to modify the default styles for headings in Builder.io. Currently, every time I change a paragraph to an h1, h2, or any other heading, the layout changes, and I need to manually adjust the color and font size for each instance. This process is time-consuming and repetitive.

My questions are:

  1. Is there a way to access and modify the default styles for headings in Builder.io?
  2. If so, where can I find these default styles?
  3. How can I change these styles once so that all future headings automatically use my preferred settings?

Any guidance on how to streamline this process would be greatly appreciated. Thank you in advance for your help!

2

Hey @yourator, welcome to the Builder.io forum. You can set your default styles using Builder’s design tokens or Custom CSS.

Here is a general guide you can follow-

Option 1: Use Design Tokens

Design tokens allow you to create consistent styles across your site. In Builder.io, you can use design tokens to define default styles for headings.

  1. Define Design Tokens for Headings:
    Create a design-tokens.ts file if you don’t already have it.

    Example: design-tokens.ts

    export const designTokens = {
  colors: [
    { name: 'PrimaryText', value: '#333333' },
    { name: 'SecondaryText', value: '#666666' },
  ],
  typography: {
    headings: {
      h1: {
        fontSize: '32px',
        color: 'var(--colors-primaryText)',
      },
      h2: {
        fontSize: '28px',
        color: 'var(--colors-secondaryText)',
      },
    },
  },
};

  2. Register Design Tokens with Builder.io:
    Next, register these design tokens with Builder.io in your builder-registry.ts.

    Example: builder-registry.ts

    import { Builder } from '@builder.io/react';
import { designTokens } from './design-tokens';

Builder.register('editor.settings', {
  designTokens: designTokens,
});

Option 2: Use Custom Components

Create custom components for headings where you can apply your default styles. This allows you to encapsulate the styling within the component itself.

  1. Create a Custom Heading Component:

    Example: Heading.tsx

    import React from 'react';
import { Builder } from '@builder.io/react';

const Heading = ({ tag, text }: { tag: string; text: string }) => {
  const Tag = tag as keyof JSX.IntrinsicElements;
  const styles = {
    h1: { fontSize: 'var(--typography-headings-h1-fontSize)', color: 'var(--typography-headings-h1-color)' },
    h2: { fontSize: 'var(--typography-headings-h2-fontSize)', color: 'var(--typography-headings-h2-color)' },
  };

  return <Tag style={styles[Tag]}>{text}</Tag>;
};

Builder.registerComponent(Heading, {
  name: 'Heading',
  inputs: [
    {
      name: 'tag',
      type: 'enum',
      enum: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
      defaultValue: 'h1',
    },
    {
      name: 'text',
      type: 'string',
      defaultValue: 'Heading Text',
    },
  ],
});

export default Heading;

Option 3: Use Custom CSS

You can also define global styles in your CSS to ensure consistency across headings.

  1. Set Global Styles in CSS:

    Example: global.css

    :root {
  --colors-primaryText: #333333;
  --colors-secondaryText: #666666;
  --typography-headings-h1-fontSize: 32px;
  --typography-headings-h1-color: var(--colors-primaryText);
  --typography-headings-h2-fontSize: 28px;
  --typography-headings-h2-color: var(--colors-secondaryText);
}

h1 {
  font-size: var(--typography-headings-h1-fontSize);
  color: var(--typography-headings-h1-color);
}

h2 {
  font-size: var(--typography-headings-h2-fontSize);
  color: var(--typography-headings-h2-color);
}

Summary

You have three distinct approaches to choose from:

  • Design Tokens: Best for maintaining consistency across your site.
  • Custom Components: Encapsulate styles within reusable components.
  • Custom CSS: Simple, global styling solution.

Pick the approach that best suits your project’s needs, and apply it accordingly.

For more details, you can refer to the Custom Components and Design Tokens documentation from Builder.io.

Note: My initial post might have been a bit confusing. I have edited my response to make it clearer.

1 Like