The CodeSandbox Block allows you to showcase and store your UI patterns within your Brand Guidelines.
Note: For this block, we're using open-source live coding capabilities from CodeSandbox.io. This block will replace the current UI pattern block by July 31, 2024.
You can opt-in for the CodeSandbox block through this form.
Here's why CodeSandbox is a game-changer:
Diverse Coding Languages: Choose from a rich selection, including Vanilla, React, Angular, Svelte, and Vue. Your coding playground just got a whole lot bigger!
Enhanced Code Control: Show/hide editable code snippets effortlessly, giving you more control over your patterns.
Dynamic Interaction: The reset button lets you rerun interactive patterns, ensuring your designs stay dynamic and responsive.
Tailored Styling: Enjoy extensive layout and styling options to align with your Brand Guidelines seamlessly.
Code Clarity: Multiple color schemes enhance code legibility, making collaboration and understanding a breeze.
Self-contained: No global dependencies anymore, but you can change them directly for each block.
Access your Marketplace and install the CodeSandbox block to your Guidelines.
Go to your Brand Guidelines and add the CodeSandbox block where you want to showcase your UI patterns.
In the settings you can choose from various coding languages including:
Vanilla
React
Angular
Svelte
Vue
Now you can change the layout of your block with various settings in the Basics and Layout options:
You can add a reset button with the toggle
You can make your code editable, collapsable by default, and also can showcase the CodeSandbox link directly connected to the UI pattern.
You can set additional customization to your block in the Layout section
Furthermore your setting, you can also apply color schemes that fit your coding language and personal preferences and the new Style options also enable you to add a border around your UI pattern or define a corner radius to your block to fit perfectly into your brand’s identity.
We hope you have found this article helpful. In case you have any further questions, please don’t hesitate to contact our support team.