Windframe Reusable Components

Creating reusable components is a powerful way to speed up your design process and maintain consistency across pages in your project. Windframe makes it easy to duplicate and reuse any block or component — either on the same page or across different pages — using its intuitive copy and import workflow.

This guide will walk you through the steps for duplicating components in Windframe using the built-in Copy & Import feature.

Step 1: Select the Component You Want to Reuse

• Navigate to the page where the component you want to reuse is located.

• Click on the component. Once selected, a toolbar will appear directly above the component.

Step 2: Copy the Component’s Code

• On the toolbar above the selected component, click the Copy icon (usually represented by a clipboard symbol).

• This action will copy the HTML code of that specific component to your clipboard.

✅ Tip: You can copy sections, buttons, cards, or any custom block you've created — anything on the canvas is copyable.

Step 3: Import the Component Into Another Page

You can now use the copied code in any other page of your project .

Option A: Import into a Different Page

• Navigate to the page where you want to duplicate the component.

• Click the Import button. You’ll find this in the top right corner of the canvas.

• A dropdown of the different code format you can import will show, you can select the format you wish to paste.

• A modal window will appear where you can paste code.

• Paste the copied component code into the input area of the modal.

• Click the Import button below the modal.

  

• The component will now appear on the current page.

Option B: Duplicate on the Same Page

If you want to reuse the component on the same page:

• After selecting the component you wish to duplicate, on the tool bar above the component you will see the duplicate button.

• Click on the duplicate button, and the component will appear next to each other.