Linked components [added in 2.1]

This is a very cool feature that I think will help a lot when creating multi page designs. The idea is to have components on your page like headers, footers and other common areas which are synchronized and updated across pages in the same design. Here is how it is going to work:

1. You Copy an element (for example, your header)
2. You go to a different page (or you can stay on the same one)
3. Choose the Paste Linked option from the context menu. We could add a keyboard shortcut for this (Ctrl/Cmd+Shift+V maybe?)

The original component and the new copy will now be linked. When you change the text of one, change an option or add/remove a child element, this will automatically be synced to all other components regardless of where they are located.

I think this will make designing multiple pages much more pleasant. Still some questions remain, like for example how we will show which component is linked to which.

Hi Martin,

For the shortcut, I’m vote for Ctrl/Cmd + Shift + V!

Thanks!

This would be a real time saver!
If you ever use Sketch for Mac, they have a linked object mode.
Worth checking out.

Very enthusiastic about the ‘Linked Components’ idea as that would allow building sites in the manner they’ll eventually end up (as a hierarchy of templates).

An extension to this idea would be to incorporate basic template engine functionality, with selectable syntax types for the output (Django, Jinja2, Template Toolkit, etc.). At a minimum, inheritance, but could go even further and add looping and rendering provided data. Sample data could be provided by the developers in JSON format and rendered using loops and inclusions. This would mean the output could be very close to what lands in an eventual application.

Great tool, btw!

@alexhawdon Happy to hear you like the idea! I think that adding support for template engines would be quite hard and would complicate the program. Maybe it would be best to use the Custom Code components in these cases.

@martinagelov, I like this feature, this will solve my earlier suggestion of having a master page.

Well, for multi-page project it is a must. Good to hear you plan to add this!

Happy to report that this is now available with release 2.1

Can’t wait to see what you guys do with the feature.

Where is the context menu?

in the “overview” window on the left.

right-click e.g. an DIV an click “copy”

then go to another location in the “overview”

right-click again an there you have “paste linked”

Important… use another hierarchy (not in the copied one)

This is very useful. However, with menu items manually applying Activate/Deactivate applies to all linked components. Which means the About page (for example) would show as Active across all pages. I assume the fix would be to have JavaScript that would detect the current page and activate the menu item. Can Bootstrap Studio help in this regard, perhaps with a JavaSript snip or otherwise?

You do know you can write your own js in BSS right?

If it's that much if an issue I'm sure someone out there on google has already written such a snippet which would work for you.

Hello, I'm using a pasted linked menu but I don't know if there is a problem with the active items on different pages. I can't figure it out tonight.

5 minutes after I wrote the post I found it :-). Deactivate all items! and turn it on in the Smart Active State menu. Thank you BSS :-)