No. The preview iframe is sandboxed and only renders the HTML and CSS you type directly into the code editors. External URLs cannot be loaded for security reasons. However, you can paste any external CSS or HTML into the editors to inspect it locally.

When your preview renders, a lightweight inspector script is injected into the iframe. Clicking any element sends its computed styles, tag name, classes, ID, and box dimensions back to the parent page via a secure postMessage channel. The information then populates the right inspector panel instantly.

Click any property value in the Computed Styles panel to copy it to your clipboard. You can then paste and edit it in the CSS editor. A future update will allow inline value editing that patches the CSS editor in real time. For now, editing the CSS textarea and pressing Ctrl+Enter re-renders the preview immediately.

When you click an element that has display: flex or display: grid, the Layout Info panel at the bottom-right lights up with relevant properties — flex-direction, justify-content, align-items for flex items; or grid-template-columns/rows for grid layouts. Toggle the Overlay checkbox in the preview header to show visual guide lines.

Type a name in the snippet name field at the top-left, then click Save. Your HTML + CSS pair is stored in your browser's localStorage. Saved snippets appear in the dropdown below the name input. Click any snippet name to reload it into the editors. All data stays in your browser — nothing is uploaded anywhere.

Yes. Drag the width slider above the preview to any value between 320px and 1440px. You can also click the preset buttons — Mobile (375px), Tablet (768px), Desktop (1024px), and Wide (1440px). The iframe container resizes accordingly so your responsive CSS breakpoints take effect immediately.