Improved past-linked

The main concept is to introduce a feature that allows the creation of linkable components that can exist independently from pages. These linkable components can be later selected and included in various pages. Importantly, once included in pages, these components cannot be directly edited within those pages; instead, any editing is done independently.

The primary advantage of implementing this idea is to minimize the risk of losing connections between components and pages while also streamlining the design process to a user-friendly ‘drag & drop’ level. By restricting direct editing from active pages, it is anticipated that the application’s processing will improve, and issues related to past linkages will be resolved.


1 Like

Thank you for sharing your idea! One thing that is not very clear is how these components will be edited. Will they open in a blank design where editing will take place?

If I understand the OP’s idea, basically, they would be similar to the saved User components. Let’s call them “User Linked” components.

The “User Linked” components would be just like the User components, except whenever a website is opened that contains a component from the “User Linked” library, the program would be aware that the website contains a component from the “User Linked” library.

If a person edits a “User Linked” component on the open website, BSS would present a dialogue box asking, “Do you wish to update this Linked component in your User Linked library?” If you click yes, then the component would be saved, and anytime you open another website that contains this “User Linked” component, it would either automatically be updated to the latest version, or a dialogue box could appear asking something like, “The (XYZ) User Linked component in this website was updated on (date). Do you wish to update all instances of this User Linked component to the latest version?”

I kind of like this idea a lot.

I personally think it’s more complicated to try implementing this on a “new user” end. Right now it’s a perfect fit the way it is. You copy something from one open page/open design and “Paste Linked” to the location you want it. How much easier do you need it to be would be my question.

The current way there is no “parent” linked item which means you can edit any of the linked item and their linked components will all update, no matter what page you’re on. Simply brilliant in my opinion.

Just my opinion of course, but I like it the way it is. :slight_smile:

They’ll be edited like any other page. unlike normal pages, the linked component page won’t have the html structure tags … it starts with the component like

I liked the term ‘library’. you got the core idea… this suggestion assume any changes done to the linked component its done deal, no dialog to confirm for update. if linked component is updated then the update is applied where ever it is used.

There should always be a confirmation dialogue when something is being overwritten. You can always have an option to allow the confirmation to be disabled (ie. “Check here to not see this confirmation again.”)

I love the way the current linked component system works, and I wouldn’t want to change it. But one thing I do find is that I’ll create something useful that I use over and over again on many websites. I’ll add it to my User components. Let’s say it’s a navigation menu with social media icons in it.

So one day I’m working on a website with this navigation menu and I remember that YouTube has updated its icon to a newer version. So I change it in my navigation menu (which is linked on all the pages of my website) and, “boom” the new icon is now on all my pages.

But the navigation menu saved in my User library still has the old YouTube icon. So I go in and delete that old component and save the now updated navigation menu, giving it the same name.

Now, suppose I have ten other websites in which I also use that same navigation menu. Wouldn’t it be great if the next time I open one of those websites, a dialogue box pops up saying, “The linked navigation menu in this website has been updated since the last time you opened this file. Would you like to update it to the newest version?”

All I’d have to do is open each of my websites that uses that navigation menu and click “yes” on the dialogue box.

The way it is now, I would have to open every website and change the YouTube icon on each one.

1 Like

I like the term parent. the current method is working and its simplicity is king… i admit.
the ‘user linked library’ makes it easier to find commonly linked parts, no need to open a page copy then switch to other page and past linked. the more important part the linkage can’t brake without removing the component. i believe this method remove the risk of editing linked part on one page then it does not reflect on the others.

what would be complicated by awesome (inspired by your term… parent) a parent structure with area that can be edited. this will be crazy! the html code below is an example of parent with editable areas:

<h1>site name</h1>
<div class=container>
the inner html of this can be edited on page
<p>all right reserved!</p>

I guess you took it few step further… i like it :heart_eyes:

the current suggestion assumes the component is an asset to the active project so changing it wouldn’t affect other projects.

to reword the suggestion, it function 90% like the current past linked. the different is ‘control’. the linked component cant be edited within a page, it must be edited independently. and it is referenced in a library list where user can drag and drop to pages.

when rethink the idea, the linked components should be more like assets. it is stored within the Design tab. they open to edit like any page (but only contain the component codes, not a full page structure). any changes reflect immediately to all pages where it is linked.


Thank you for the feedback! I can see how this could be useful. We do have something similar even now - User components. Maybe all that’s needed is for the app to scan designs you open for instances of User components, and to offer you the option of updating them?


That would be the idea.

Maybe a user component could have some kind of visual indicator in the Overview panel (a different color, or symbol, etc), to show that it’s not just a regular BSS component. And, if you change some aspect of a User component in a website, the visual indicator should show it’s been modified.

Then maybe you could add an option in the Overview panel so when you right click on a modified User component, the pop up would offer an option to “Update modified User component” which would then save the changed version back to the User component library, overwriting the original.

the user component is more like a clone of the component. changing the component in the library won’t change it in the project. printninja thought ‘having a popup to alert that the user component has been updated and ask if the update should reflect in the project’ is the med-point between my thought and what the current user component library does.

the user component is not the idea… the idea treat the linked component like a project asset, any change to that asset will immediately reflect wherever the asset is being used. the linkage between the asset and page cannot be unlinked except by removing the component from the page. the component asset page does not contain full html page structure, just the component code and any assigned JS, CSS files linked to the asset.

Other than the strong binding for commonly used components and pages, my current project highlight the great benefit of having an html assets (again, an html that does not contain html, head, body tags). I have a page that jQuery.load() different modals per user choice.
At this time I make the modal as full page then extract the modal code out and store it in external file so it can be called and append to the proper page. If i needed to update or correct that modal I have to reinsert the code back to the project, change it, then cut it back to its storage file.
I’d love to have an option to just have it within the project and not having to copy-past over and over. for many time when converting the code from HTML to component the CSS classes duplicate and i have to clean up the code over and over.

You can load HTML code from one page and inject it on another page with the DOMparser
You have the same data attribute on both pages data-YourComponentName

On the component.html you add a div with your component code like this

<div data-contact>
	// your contact modal html code here
		// your CSS here if you want scoped css for the component
		// if not no need for the style tag
<div data-othercomponent>
	// your othercomponent html code here
		// your CSS here if you want scoped css for the component
		// if not no need for the style tag

on the page where you want to inject the component you add
<div data-contact></div>
<div data-othercomponent></div>
where you want the components

add this js snipper into a js-file

class ComponentLoader {
  constructor() {
    this.baseUrl = 'component.html';
    this.contentCache = {};

  async fetchContent(shouldClearCache = false) {
    if (shouldClearCache) {
      delete this.contentCache[this.baseUrl];

    if (!this.contentCache[this.baseUrl]) {
      const versionedUrl = this.baseUrl + '?v=' +;
      const response = await fetch(versionedUrl);
      this.contentCache[this.baseUrl] = await response.text();
    return this.contentCache[this.baseUrl];

  loadComponent(selector, clearCacheParam = 'false') {
    const shouldClearCache = clearCacheParam === 'true';

    this.fetchContent(shouldClearCache).then((content) => {
      const data = new window.DOMParser().parseFromString(content, 'text/html');
      const body = data.querySelector(selector);
      const targetNode = document.querySelector(selector);

      if (targetNode && body) {
        const clonedNode = body.cloneNode(true);
        targetNode.parentNode.replaceChild(clonedNode, targetNode);

  static loadComponentWithSelector(selector, clearCacheParam = 'false') {
    const loader = new ComponentLoader();
    loader.loadComponent(selector, clearCacheParam);

// you use it like this
// Load a component and optionally clear cache using the static method
ComponentLoader.loadComponentWithSelector('[data-contact]', 'true');

Here is another example how to inject modals and forms depending on a table headers

1 Like