Skip to content

Advanced Editor Guide

caleb amsden edited this page Jan 24, 2020 · 3 revisions

Advanced Builder Editor Guide

Getting started

If you're looking at how to setup or use the Builder Editor, please head over to our official documentation site: https://builder.io/c/docs/intro

The purpose of this guide to gather and document advance use cases and features of the editor.

Binding Data

Using Symbols

Templates

Custom Components

Reusable CSS

In some situations, you may want to add reusable or global styles to your site that you can edit in Builder. There are a couple of ways you can do this:

First, you could use the "Symbol" pattern to create a reusable component with a custom code component that you can add to every page or component you're working on:

For more information on creating and using Symbols, check out this guide: https://builder.io/c/docs/guides/symbols

The other option is to use a model and our Content API to edit the CSS as a string in the Builder CMS and then bind that text to your rendered site. Here's a guide on using the Content API: https://builder.io/c/docs/query-api

The model you create might look something like this (see the top of the page on an example of using one of our SDKs to fetch the data):