Preview components on any web page
Show a preview card on top of any page (production, staging or localhost). Drag it anywhere, or anchor it to an element on the page.
Free-Floating Draggable HUD
The preview card docks automatically in the viewport corner. Grab the header bar to drag the component freely anywhere on your screen, or use the 1-tap snap toggle to cycle corner positions.
Pull numbers off the page (Drag to Select)
Press 🎯 Target, then drag a box over a widget on the page. The extension reads the labels and numbers inside it, including inside Shadow DOM, and puts them in a card next to the box, with the DataCard code to copy. A box over one number gives one card; over several gives a StatGrid of cards.
Interactive Live Workflow Demo
Watch the Chrome Side Panel inject and anchor a component onto an active website
Active Cloud Console
Live host page DOM (e.g. internal dashboard, cloud admin, or local server)
Pick a component in the Side Panel on the right to place a preview card right here.
Install Chrome Extension
Install from the Chrome Web Store or load the unpacked sola-extension.zip in Developer Mode.
Open on Any Web App
Navigate to your target app (e.g. localhost:3000 or your cloud dashboard) and click the Sola icon in your browser toolbar.
Drag, or Select a Region
Drag the card with your mouse, or press Target and drag a box over the numbers you want to pull into a card.