Skip to content

Docs: Introduce 'render=full' URL parameter for detailed design rendering #564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 16, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions content/en/kanvas/advanced/url-parameters/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
title: Design Render Quality
description: >
Control the level of detail in Kanvas design rendering using advanced URL query parameters.
weight: 2
categories: [Designer, Operator]
tags: [performance]
---

By default, Kanvas optimizes the rendering of your designs to ensure good performance and responsiveness. This means that some computationally intensive visual elements, such as advanced relationships like **TagSets** (groups of components visually demarcated), might not be displayed initially to reduce system load.

> To learn more about defining relationships between components, including the detailed use and creation of **TagSets**, please see the [Creating Relationships | Layer5 Documentation](https://docs.layer5.io/kanvas/getting-started/creating-relationships/).

## Enable Full Render Mode

To activate this full render mode, you will need to add the `render=full` parameter to your Kanvas design URL. This mode ensures all elements, including **TagSets**, are displayed, which might otherwise be hidden for performance optimization.

The images below illustrate the difference this parameter makes:

<figure>
<img src="/kanvas/advanced/url-parameters/no-tagsets.png" alt="Design rendering in Kanvas with default settings" />
<figcaption>A design with default rendering; TagSets may not be visible</figcaption>
</figure>

<figure>
<img src="/kanvas/advanced/url-parameters/with-tagsets.png" alt="The design in Kanvas showing full details" />
<figcaption>The same design with `render=full` applied; TagSets and all other details are now visible</figcaption>
</figure>

For example, to apply this to a Kanvas design URL, you would modify it as follows: `https://kanvas.new/extension/meshmap?render=full&mode=design&design=xxxx`

{{< alert title="Advanced Usage Note" type="info">}}
This is an advanced feature primarily intended for power users, debugging scenarios, or system-level integrations. You will not need to manually adjust this parameter for everyday design work.
{{< /alert >}}

## Why Use Full Render Mode?

This capability is particularly valuable for:

* **Detailed Inspection & Debugging:** When you need to meticulously review, debug, or verify all components, relationships, and intricate details within a design.
* **Comprehensive Documentation:** For creating thorough screenshots or technical documentation that requires all visual elements to be accurately represented.
* **System & Integration Testing:** During testing phases to ensure all parts of a design are processed and displayed by the rendering engine exactly as expected.

## Best Practices

To use full render mode effectively:

1. **Use Selectively for Performance**
Activate `render=full` mainly when you need to inspect specific designs in detail. Since it can impact performance on large or complex designs, stick to the default optimized mode for general browsing to maintain responsiveness.

2. **Promote Consistent Shared Views**
When sharing a design link with `render=full` for review, advise collaborators to also enable the relevant toggles in their **Layers panel**. This helps prevent discrepancies caused by individual layer settings, ensuring everyone sees the same details.

3. **Check the Layers Panel if Details Are Missing**
If `render=full` is active in your URL but expected elements (like **TagSets**) are not visible, verify that their visibility is enabled in your **Layers panel**. Your Layers settings can hide elements even when full render is requested.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.