Built for Squarespace custom code

Edit Squarespace custom code and CSS without touching the rest of the page

Paste a Squarespace custom code block or a plain CSS snippet — the editor works out which one it is, then shows you the result rendered instead of making you guess. For HTML you change text, image URLs, button labels and links. For CSS you change colour, spacing, radius and every other declaration. Then copy the finished code straight back into the same block. CardKit is an independent tool and is not affiliated with Squarespace.

1. Paste your code and press RENDER. A custom code block, one HTML section, or bare CSS rules. The editor tells you which format it detected.
2. If it is CSS — the preview is built from your own class names, and the panel on the right lists every rule and every declaration, ready to change.
3. If it is HTML — click anything in the preview and the panel fills with that element's own fields.
4. Take it back — COPY TO CLIPBOARD puts the finished code on your clipboard, EXPORT saves it as a .css or .html file, then paste it over the original block.

Use it when you need to restyle one card on a Squarespace page, tweak the colours in Design → Custom CSS, reword a hero without rebuilding it, or point a button at a new link. Check the result on DESKTOP, TABLET and MOBILE before you copy it back. Everything stays in this tab: no account, no upload, no server. Refreshing clears the editor, so export before you close the page. Details on data and advertising are in the Privacy Policy.