Add Design Hyperlink for embedding Meshery designs

[Vincamine]

Notes for Reviewers

Related issues with
https://github.com/layer5labs/meshery-extensions-packages/issues/297 and https://github.com/layer5io/academy-theme/issues/12

Use simple glass effect

Screen.Recording.2025-07-23.at.7.22.34.PM.mov

Signed commits

• Yes, I signed my commits.

[netlify]

✅ Deploy Preview for bejewelled-pegasus-b0ce81 ready!

Name	Link
🔨 Latest commit	e54a005
🔍 Latest deploy log	https://app.netlify.com/projects/bejewelled-pegasus-b0ce81/deploys/68834d9f03e9d50009babf1c
😎 Deploy Preview	https://deploy-preview-713--bejewelled-pegasus-b0ce81.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[ShashaankS]

Screencast.from.2025-07-24.17-26-12.webm

@Vincamine is it possible, not to allow user to manipulate meshery designs like zoom and pan.

[leecalcote]

Screencast.from.2025-07-24.17-26-12.webm

@Vincamine is it possible, not to allow user to manipulate meshery designs like zoom and pan.

If they wanted just a static image, then they don’t need to embed a design. Making the design non-interactive is the opposite of what we’re trying to do. @ShashaankS @vr-varad @Namanv0509

[vr-varad]

@Vincamine as all designs url have the format
https://playground.meshery.io/extension/meshmap?mode=design&design=<design_id>
rather than using design_url we can use the desing_id
and also the $Id has the design_id as a part so we can reuse that as well.
Thoughts @ShashaankS @Namanv0509

ref

{{< meshery-design-embed
  id="embedded-design-9d7c887a-b3c2-4b62-bc24-0889918fbfff"
  src="embedded-design-exoscale-hist-1.js"
>}}

[ShashaankS]

Thats a great idea @vr-varad

It would be better to just place an id, src and size params
And as seen, every id starts with embedded-design-<some-alphanumeric-text>
So, its better to put the <alpha-numeric part> in id param which in turn, help to directly link meshery design in short code.

@Vincamine @Namanv0509

[Namanv0509]

yes that's a good one to get on . will surely get things better to manage .

@Vincamine as all designs url have the format https://playground.meshery.io/extension/meshmap?mode=design&design=<design_id> rather than using design_url we can use the desing_id and also the $Id has the design_id as a part so we can reuse that as well. Thoughts @ShashaankS @Namanv0509

ref

{{< meshery-design-embed
  id="embedded-design-9d7c887a-b3c2-4b62-bc24-0889918fbfff"
  src="embedded-design-exoscale-hist-1.js"
>}}

[Vincamine]

@Vincamine as all designs url have the format https://playground.meshery.io/extension/meshmap?mode=design&design=<design_id> rather than using design_url we can use the desing_id and also the $Id has the design_id as a part so we can reuse that as well. Thoughts @ShashaankS @Namanv0509

ref

{{< meshery-design-embed
  id="embedded-design-9d7c887a-b3c2-4b62-bc24-0889918fbfff"
  src="embedded-design-exoscale-hist-1.js"
>}}

right!! That's a great suggestion! I'm changing it. Thank you Varad!!

[Vincamine]

Thats a great idea @vr-varad It would be better to just place an id, src and size params And as seen, every id starts with embedded-design-<some-alphanumeric-text> So, its better to put the <alpha-numeric part> in id param which in turn, help to directly link meshery design in short code.

@Vincamine @Namanv0509

emm.. it's a good idea. But if we need to simplify the ID format, we should modify it in layer5labs/... instead of here.

[Namanv0509]

typo , $Link -> $link

[Vincamine]

gosh.. thank you Naman!!

[Vincamine]

e.g.: https://deploy-preview-713--bejewelled-pegasus-b0ce81.netlify.app/kanvas/designer/embedding-designs/

[vr-varad]

Doesn't work
Couldn't see the link tag

[vr-varad]

here should be $finallink @Vincamine

[vr-varad]

And logic seems to be off as well,
up there if there will be no link, we are using autolink, but down here if the link is not there we are not applying the link.

[vr-varad]

url is wrong

[Vincamine]

url is wrong

fixed

[Namanv0509]

idt , we want every component to redirect to the link , it makes the design restricted to how we interact .
Having just the button can do

[Vincamine]

idt , we want every component to redirect to the link , it makes the design restricted to how we interact . Having just the button can do

Modified. Redirect only when user click the button~

[zihanKuang]

@Vincamine Excellent work on this PR! This is a much-needed feature, and I appreciate you implementing the community's feedback.👍 I have a few suggestions to further improve it.

1. (High Priority) Adjust Frame Height to Improve Page Scrolling

There is a usability issue with the current height of the embedded design container. On pages with full-width designs, the frame is so large that it occupies most of the screen.

When a user scrolls down the page, their mouse pointer inevitably enters the design area. At this point, the scroll wheel action is "hijacked" by the design to control its zoom level, which stops the page from scrolling. This traps the user, forcing them to carefully move their mouse to the narrow margins of the page to continue reading. This can be a very frustrating experience.

Suggestion: Could you please reduce the width of the container? For example, you'll notice that the "design" container is wider than the text above and below it.

2. Minor Suggestions

Here are a couple of smaller points for consideration:

• Button Text: Since the designs are created and managed in Meshery's "Kanvas" designer, would it be more accurate to change the button text from 🔗 Open in Meshery to 🔗 Open in Kanvas?

• Sizing of half-width Designs: For our use cases for our embedded designs, we typically use them in two ways: for displaying a small, focused part of a design, or for showing a large, complete diagram. So we have full and half sizes for designs. For now, I think the half size is adequate, but I wanted to bring it to your attention in case you had other thoughts.

The following two places are used in addition to the embedded design document:

https://deploy-preview-713--bejewelled-pegasus-b0ce81.netlify.app/cloud/academy/creating-your-learning-path/

https://deploy-preview-713--bejewelled-pegasus-b0ce81.netlify.app/kanvas/designer/understanding-edges/

3. Post-Merge Task: Update Documentation

Once this PR is merged, please remember to update the relevant documentation. It would be very helpful to clarify the behavior and limitations of embedded designs for our users and content creators.

Specifically, the documentation should answer questions like:

• Is the embedded view read-only? If a user pans or zooms the design, does it affect the original source file?.
• What happens to the embedded view if the original design is deleted or change the visibility to private, or the design is then published? Does the link break? Does the embed show an error?

This will help set the correct expectations for anyone using this feature. You can create a separate issue for this later.

Great job again, and let me know what you think of these suggestions!