How to use CodeFronts

Copy the code

The code panel holds everything the demo needs: HTML, CSS and, when a demo uses it, JavaScript.

1. Open any demo and scroll to The code.
2. Pick a file tab: HTML, CSS or JS (1).
3. Press Copy (3) and paste it into your project. Each demo’s classes are scoped (for example .cb-01), so it won’t clash with your own CSS.

Copy for AI

The For AI tab (2 in the picture above) prepares one block for ChatGPT, Claude, Cursor or Copilot: all the code in fenced blocks, the source link and a note about the scoped class names, so the assistant can drop the demo into your project on its first answer.

1. Open the For AI tab in the code panel.
2. Press Copy and paste it into your assistant, followed by what you want (“make it match my brand colours”, “turn it into a React component”).

Open in CodePen, download, share, try it

The bar above the live demo has one-click actions.

1. CodePen (1) opens a new pen with the code filled in.
2. Download (2) saves a ready-to-open index.html.
3. Copy link (3) copies the address of this demo.
4. Report (4) tells us about a problem (see Report a problem).
5. Try it (5) opens the demo in the playground to edit it live.

Save and love demos

Keep the demos you want to come back to, and tell us which ones you like.

1. Love (1), next to the demo’s name, adds a heart. Totals are public; who loved what is never shown. Loving needs an account.
2. Save (2), the bookmark in the action bar on the right, keeps the page in Your library. It works without an account (kept in this browser); signed in, your saves follow you to every device.

Edit with a live preview

Change the code and the preview updates as you type.

1. Switch files with the tabs (1): index.html, styles.css and script.js.
2. Watch the result in the preview (2). Check other screen sizes with the device buttons (3): fluid, phone, tablet and desktop. Drag the preview’s edges for any width.
3. console.log output and errors appear in the drawer under the preview; click an error to jump to its line.
4. The Save (4) and Export (5) menus are explained below. Press ? for every keyboard shortcut.

Editor helpers: Format (or Shift+Alt+F) tidies the file, Emmet abbreviations expand with Tab in HTML, colours in CSS show a swatch you can click to pick a new one, and the gear sets font size, tab width and line wrapping.

Add a library

Need GSAP, Alpine.js, Animate.css or Font Awesome? Add it from cdnjs without leaving the editor.

1. Press the box icon next to Format.
2. Search for the library, or pick one of the quick buttons.
3. It’s added as a tag at the top of your HTML. Remove it from In this demo any time.

Export your code

Take your edited version anywhere.

1. Download .zip: separate HTML, CSS and JS files.
2. Copy as one HTML file: everything inline, ready to paste.
3. Open in CodePen or Open in StackBlitz: a new tab with your code filled in.

Save versions

Signed in, your versions are kept in your account and open on any device. Without an account they’re kept in this browser.

1. Press ⌘+S (Ctrl+S on Windows), or Save as new version… (1) in the Save menu, and give it a name.
2. While a version is open, the bar shows Editing “name” with ✓ Saved, or a Save button when you have changes. ⌘+S saves into that version.
3. Your saved versions are listed at the bottom of the Save menu and in Your library → My edits.

Compare and go back in time

Compare & history… (3 in the Save menu) shows your code side by side with the last save, the original demo, or any of the last 20 saves of the version.

1. Pick what to compare with on the left, and the file at the top.
2. Changed lines are highlighted.
3. Restore selected puts that code back in the editor; press ⌘+S to keep it.

Never lose unsaved changes

Close the tab by accident? Your unsaved edits are kept. Next time you open that demo, a bar offers to restore them. Signed in, they’re kept in your account too, so you can carry on on another device.

Share links

Share links work for versions saved to your account.

1. Open the version, then Save ▾ → Share link… (2 in the Save menu).
2. Switch it on and press Copy link. Use this link, not the address bar: the address bar’s link only works for you.
3. The link always shows your latest save. Switch it off and the link stops working; switching it on again makes a new link.

Anyone with the link can view, edit and copy that version; it isn’t listed anywhere on the site. Your name and email are never shown. Shared code runs in a preview that’s isolated from the site.

Saved, Loved, Recently viewed and My edits

Open it from the account menu or go to /saved/.

1. Saved: pages you bookmarked. A green +3 new badge means demos were added since you last opened that collection.
2. Loved: demos and collections you gave a heart.
3. Recently viewed: the last 50 pages you opened while signed in. You can clear it.
4. My edits: your playground versions, grouped by demo. Open one to keep editing.

Report a problem

Anyone can report, no account needed.

1. Press Report in the demo’s toolbar, or Report a problem in the side panel.
2. Say what’s wrong. Add your email if you’d like a reply.
3. Your browser and screen size are included so we can reproduce it.

Suggest a fix

Fixed it in the playground? Send us your version. Needs an account.

1. Make your fix in the playground.
2. Choose Save ▾ → Suggest as a fix… (4 in the Save menu).
3. Check What you’re sending: each file’s changes against the original. Review changes shows them side by side.
4. Add a short note and send. Leave Credit me ticked and, if we use your fix, the demo shows “Improved by” with your name.

Sign in with GitHub or Google

There’s no password to create. Press Sign in and pick GitHub or Google. We receive your name, email and picture, nothing else, and never post anything for you.

Account menu and settings

Click your avatar for your library and settings. In Account settings:

1. Weekly email is off unless you switch it on. Every email has an unsubscribe link.
2. Delete my account removes your account and everything attached to it: saves, loves, history and versions.