Symbols

Symbols

Symbols are a powerful tool in Builder.io that allow you to create reusable components that can be used across your site. They are especially useful for creating consistent branding across your site, as well as for easily integrating with third-party services.

Creating a Symbol

A. Using Section Models Entry

1. Navigate to Section Models in Builder.io.
2. Select the Symbol model.
3. Click on the New Entry button & select Symbol.
4. Select the targeting icon at the top of the editor.
5. Set the targeting url to /symbol/your-symbol-path.
6. Click Save & refresh to see the editor loading the entry.
7. Drag & Drop the component you want to use as your symbol.
8. Added the data you want to display in the symbol (e.g., text, image, etc.).
9. Click Save.

B. Using the existing builder page

1. Navigate to any page model in Builder.io.
2. Open any page in the builder.
3. Select the component you want to use as your symbol.
4. Right-click on the component and select Convert to Symbol.

The symbol will now be available in the Symbol tab of the Section Models.

Using a Symbol

You can use a symbol in your site by adding it to a page or section. Here's how:

1. Navigate to any existing page or section in Builder.io.
2. Click on the My Symbols tab.
3. Drag & Drop the symbol you want to use.
4. Click Save.

Even though symbols are meant to be use across the builder pages, you can also use them in the Frontend. Here's how:

1. Select the page you want to use the symbol in.
2. Use the <TsContent model="symbol" path="/symbol/your-symbol-path" /> component to render the symbol.
3. Save the code & refresh the page to see the changes.

Customizing a Symbol

You can customize the appearance of a symbol by editing its properties in the Symbols tab. Here's how:

1. Navigate to Section Models in Builder.io.
2. Select the Symbol model.
3. Click the symbol you want to edit.
4. Make your changes.
5. Click Save.

Deleting a Symbol

To delete a symbol, follow these steps:

1. Navigate to Section Models in Builder.io.
2. Select the Symbol model.
3. Click the symbol you want to delete.
4. Click the three dots in the top right corner of the entry.
5. Select Delete.
6. Confirm the deletion.

References

• Symbols in Builder.io Video | Docs
• Making a Symbol
• Editing a Symbol