Import from Onlook

Introduction

Alloy makes it easy to import interfaces from Onlook and transform them into editable prototypes that match your existing product's design system.

Whether you're testing new React components, exploring visual edits, or validating changes with stakeholders, Alloy helps you convert Onlook projects into prototypes that align with your product.

Capture screen from Onlook (recommended)

The Capture Screen method is the most reliable way to import your Onlook interface into Alloy. It uses the Alloy Browser Extension to replicate your React app accurately.

Steps:

1. Download and install the Alloy Browser Extension
2. Open your Onlook project in a supported browser (Chrome, Arc, Edge, Brave)
3. Click Capture Screen in the Alloy extension
4. Wait while Alloy recreates your Onlook interface in the editor
5. Start prototyping using:
   • Chat interface – describe modifications in plain language
   • Visual editing – select React components and edit them directly

Best for:

• Preserving the visual styling from your Onlook edits
• Capturing the current state of your React application
• Maintaining the component tree structure

Upload your Onlook link

If your Onlook project has a shareable preview URL, you can import it directly into Alloy using the Upload Link feature.

Steps:

1. Get the preview URL from your Onlook project
2. Paste it into Alloy's Upload Link field
3. Alloy will recreate your Onlook interface
4. Edit the prototype using natural language or visual tools

Best for:

• Importing Onlook projects without browser extensions
• Quick prototype creation from Onlook previews

Tips for Onlook imports

• Make sure your Onlook project is fully loaded before capturing
• React component edits from Onlook translate well to Alloy
• Review imported interactions as they may need adjustment
• Capture different application states separately for comprehensive prototypes
• Apply Alloy's design tokens to match your product's design system