Is it possible to use symbols with references and approve/reject changes?

General
1

Hi everyone,

I’m exploring the use of symbols in Builder.io and was wondering if there’s a way to use them with references in a more flexible way.

Specifically, I’d like to insert the same symbol on multiple pages, but when I update the symbol on one page, I want the ability to either accept or reject those changes on other pages where the symbol is used.

Right now, from what I understand, symbols update globally when modified, but I’m looking for a way to make changes more controlled—so that I can decide whether to apply updates on each instance of the symbol separately.

Is there a built-in way to achieve this in Builder.io? Or would this require a custom implementation?

Thanks in advance for any guidance!

3

Hello Mateusz,

Thank you for your question in our Builder.io forum.

We are checking this question about symbols, and we will update you.

Thank you,

4

Hi @mateuszad Thanks for reaching out and for this question!

Currently this is not explicitly supported with Symbols, but there are ways you could achieve something similar.

The flow I would recommend is anytime you want to implement a version change of a symbol is instead create a duplicate of the symbol

So MySymbol → My Symbol v2

From there you can search your content for instances where MySymbol exists… luckily this is possible to do by querying the meta object on a content JSON meta.symbolsUsed, so you could fetch page models using a specific symbol with id of 12345 by querying

https://cdn.builder.io/api/v3/content/page?apiKey=MY_API_KEY&query.meta.symbolsUsed.12345=true

then go into those entries that get returned, update the symbol to MySymbol v2 and then go from there.

It is a bit manual currently, but should achieve what you want! If you think there could be a better workflow, I would recommend raising a feature request at https://ideas.builder.io/ to share with our product team!

2 Likes
5

:cross_mark: What You Asked For (Approve/Reject per Instance)

Builder.io does not natively support per-instance symbol updates where you can accept or reject changes like in design systems (e.g., Figma components with overrides and instance detachment).

:white_check_mark: Workarounds You Can Try:

  1. Duplicate the Symbol for Version Control
  • Create a copy of the symbol (Symbol v1, Symbol v2, etc.)
  • Use the version you want per page.
  • Downside: You have to manage versions manually.
  1. Convert Symbol to Regular Content
  • On a specific page, you can detach the symbol (by converting it to a regular group/component).
  • Then edit that instance without affecting others.
  • Downside: Loses reusability.
  1. Use Custom Code with Inputs/References
  • If you need controlled updates, create a symbol that uses bindings or custom inputs, and pass different props to control versions.
  • This requires more planning and likely dev help.

:light_bulb: Builder.io Team’s Suggestion (from their own reply):

Duplicate the symbol anytime you want to make a version change, rather than edit the original symbol directly.

:white_check_mark: Summary

  • Builder does not support approve/reject changes per symbol instance.
  • You can:
    • Duplicate the symbol for different versions.
    • Detach it if you want local-only changes.
    • Use inputs/references for advanced control (custom setup).