The only visual and headless CMS and page builder for Angular
Builder's headless CMS for Angular comes with a powerful drag-and-drop visual editor that lets you create digital experiences in minutes
Render Builder pages
<!-- The model input can be any model of yours -->
<builder-component
*ngIf="!noBuilderPageForUrl"
model="page"
(load)="noBuilderPageForUrl = $event ? false : true"
(error)="noBuilderPageForUrl = true"
>
<!-- Default content inside the tag shows while the builder content is fetching -->
<div class="spinner"></div>
</builder-component>
<my-404-component *ngIf="noBuilderPageForUrl"> </my-404-component>Empowering teams and powering content for leading brands
Unlock and unblock non-technical talent...
Create pages and content visually, no coding required
Set scheduled releases and publish content without code changes
Setup A/B tests and create targeted content experiences. No coding required.
...while keeping developers happy
Free up developers to write code, not content
Leverage your existing code and components
Completely customize and extend the platform - full control and no limits!
The control you need
Import your custom Angular components, or use our Storybook add-on, to leverage your design system in the visual editor. You can create components in Builder too
Set permissions at the user and content levels to ensure brand guidelines are followed
The experience you deserve
Integrate with our Angular SDK, HTML API, or GraphQL API
Bring your custom data into Builder using fetch APIs or passing data at runtime
The performance you expect
Supports server-rendering with Angular as well as single page apps
Blazing fast content delivery at the edge
Asset optimization comes out of the box
Connect Builder to your Angular site or app in minutes
Simple SDK or API integrations with any tech stack
Angular SDK
Also see our guide for the Angular SDK
<!--
load "page" content matching current url
-->
<builder-component
model="page"
(load)="contentLoaded($event)"
(error)="contentError($event)">
<!-- Default content inside the tag shows
while the builder content is fetching -->
<div class="spinner"></div>
</builder-component>
// use @BuilderBlock decorator to load your
// custom components in the Builder Editor
import { BuilderBlock } from '@builder.io/angular';
import { Component, Input } from '@angular/core';
@BuilderBlock({
tag: 'custom-component',
name: 'My Custom Component',
inputs: [
{
name: 'name',
type: 'string',
},
],
})
@Component({
selector: 'custom-component',
template: 'Hello: {{name}}',
})
export class CustomThing {
@Input()
name = '';
}
Getting Started with Builder
Did we mention this website was made with Builder?
Let’s build something!
Dynamic page building with Angular
View example
Server-side rendered dynamic pages with Angular Universal
View example
What will you create?
BUILDER
© 2020 Builder.io, Inc.