BUILDER

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Get StartedLogin

Products

Resources

Login

Get Started

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

Get Started

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.

See All Features

...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!

See All Features

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?

Get Started

BUILDER

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Symbols let you reuse dynamic elements across your content. Please choose a model and entry for this symbol.