Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
Builder content link
Builder public api key
90e8ecb1c9d24f9b9afa649ce548bcb7
What are you trying to accomplish
i want to add my design tokens and custom component to my page, space. But this is not working. The created page is render correctly in my application. But in the Visual Editor there are no components or design tokens.
Screenshots or video link
Code stack you are integrating Builder with
I’m using angular 18 @builder.io/sdk-angular:0.22.1
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { type BuilderContent, fetchOneEntry, isPreviewing, RegisteredComponent } from '@builder.io/sdk-angular';
import { ButtonComponent } from 'custom-components/components/button/button.component';
@Component({
selector: 'custom-builder-io-page',
templateUrl: './builder-io-page.component.html',
changeDetection: ChangeDetectionStrategy.Default,
})
export class BuilderIoPageComponent implements OnInit {
model = 'page';
apiKey = '90e8ecb1c9d24f9b9afa649ce548bcb7';
content: BuilderContent | null = null;
isPreviewing = isPreviewing();
designTokens: {
colors: [
{ name: "Brand Red", value: "var(--red, #ff0000)" },
{ name: "Brand Blue", value: "rgba(93, 150, 255, 1)" },
],
spacing: [
{ name: "Large", value: "var(--space-large, 20px)" },
{ name: "Small", value: "var(--space-small, 10px)" },
{ name: "Tiny", value: "5px" },
],
fontFamily: [
{ name: 'Serif Font', value: 'var(--serif-font, Times, serif)' },
{ name: 'Primary Font', value: 'Roboto, sans-serif' },
]
};
// Define the list of custom components to pass to the <content> component.
customComponents: RegisteredComponent[] = [
{
component: ButtonComponent,
name: 'Button',
inputs: [
{ name: 'buttonText', type: 'text', defaultValue: 'Click Me' },
],
}
];
async ngOnInit() {
const urlPath = window.location.pathname || "/";
const builderContent = await fetchOneEntry({
model: this.model,
apiKey: this.apiKey,
userAttributes: {
urlPath,
},
includeUnpublished: true,
});
if (!builderContent) {
return;
}
builderContent.data.blocks = builderContent.data.blocks.filter(value => !value.id.includes('pixel'));
this.content = builderContent;
}
}
<ng-container *ngIf="content || isPreviewing; else notFound">
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey"
[designTokens]="designTokens"
[customComponents]="customComponents"
></builder-content>
</ng-container>
<ng-template #notFound>
<div class="mt-5">404 - Content not found</div>
</ng-template>
