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

Visual Editor 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