How to preview a fragment?

[zvonimirfras]

From the edit screen

Clicking the eye icon opens up a preview in a new browser window.

This enables you to resize the fragment to your liking and see how it behaves dynamically at different screen sizes.

From dashboard

Click kebab menu on a dashboard item, followed by "Open preview".

It opens a live view of that fragment in a modal. From there you can interact with the fragment or jump into editing.

On CodeSandbox

In the Export modal, select either "Angular" or "React" tab. Then, on the top right click "Edit on CodeSandbox".

This sends the code for the selected fragment to CodeSandbox, and opens it in a new tab. CodeSandbox then renders the code.

Preview a featured fragment

On the dashboard content selector, select "Featured".

This fills your dashboard with featured fragments.

Clicking the thumbnail or selecting "Open preview" from a kebab menu will open a preview modal. From there you can clone the fragment locally and start editing it.

From one of your GitHub repos

1. Log in with github by following instructions from the profile menu on top-right

2. In you profile menu select "All repositories"

From there navigate to the fragment you want to preview, the same way you would in your computer's file explorer.

From any GitHub repo via launch page

When you're viewing files in your repo, on top right you'll find a "Copy sharable link" tool button.

Clicking it gives you a launch link. You can send that to anyone who has access to view your repo. Opening that link shows you a standalone preview of the file/fragment, without Carbon UI Builder's chrome, headings and toolbars.

Which one do you use the most? Which ones did you not know about?