Console
Preview
✦
AI Chat
CSS Playground
Run
Save
Import from AI
Import
Share
Publish
Sign In
Sign Up
FILES
src
style.css
index.html
Items: 0
NPM PACKAGES
Items: 0
Web View
AI Chat
Agent
Gemini 3 Flash
Chat Options
1
Quick Actions...
⌘+k
Go to Dashboard
Go to Home
Go to Courses
Project
Project versions
Theme
View
Share
Project settings
Preferences
Account
Help
New project...
Clone
Archive
Download
Rename
Save
Publish
New Version
v1 (production)
System Theme
Light Theme
Blue Theme
Gray Theme
Dark Theme
Sidebar
⌘+b
Console
⌘+j
Web View
⌘+⇧+v
AI Chat
⌘+⇧+c
Copy Link
Share to Web
Allow Editing
Favorite
Default Project
Live Reload
SPA Mode
Live View Delay
Loop Protection
Production Build
Minify
Keep Names
Tree Shaking
AI Model
Preview Run on Opening
Preview Zoom
Preview Background (White)
Font Size
Tab Size
Tabs for Indent
Line Wrap
Hard Wrap Column
Formatter Semicolons
Single Quotes
Line Numbers
Minimap
Syntax Validation
Autocompletion
Hover Information
Emmet
Keymap
Clear Cache & Reload
Claude Sonnet 4.5
Claude Opus 4.5
Gemini 3 Flash
Claude Haiku 4.5
Grok 4.1 Fast Reasoning
GPT-5.2 Codex
Grok 4.1 Fast
Grok Code Fast
Gemini 3 Pro
Default
Vim
Sign In...
Sign Up...
Online Chat
Help & Support Guide
Report Abuse
Report a Bug
Roadmap
Changelog
Keyboard Shortcuts
Privacy
Social
PlayCode v2026.4.102
Discord
X / Twitter
Project Name
Folder
No folder (Root)
No Data
Cancel
Save
Using ChatGPT, Gemini, or Grok?
Import code from your favorite AI assistant in 3 simple steps
ChatGPT
Gemini
Grok
Any AI
1
Copy your project
?
Copy
2
Paste AI response
?
Paste
3
Apply changes
?
Apply
Something broke? No worries:
Undo
Redo
5/5
imports remaining today
(Pro = unlimited)
or skip the copy-paste
Use built-in AI
No copy-paste needed. AI sees all your files.
Project Not Saved
Save your project first to share it with others.
Save Project
Deployment
Publish
http://css.playcode.io
Custom Subdomain
PRO
.playcode.io
Custom Domains
PRO
Add custom domain
Need help to setup custom domain?
Click here
.
What are you working on right now?
Testing code from ChatGPT/AI
Learning JavaScript/programming
Building a quick prototype
Debugging/fixing something
Teaching or creating a demo
Something else
Ruslan
Founder of PlayCode
Open
Production
Delete
How to work with AI
Recommended: Plan → Agent → Ask
Learn more
1
Plan
Start here
AI asks questions about your idea, then creates a step-by-step plan
2
Agent
Default
AI writes and modifies code to bring your project to life
3
Ask
Read-only
AI answers questions and explains code, but makes no changes
Recommended
Claude Sonnet 4.5
Balanced quality and price
$$$
Claude Opus 4.5
Best UI/UX design quality
$$$$
Gemini 3 Flash
Default
Fast and cheap, 1M context window
$
Claude Haiku 4.5
Faster and cheaper, more errors
$$
Grok 4.1 Fast Reasoning
Cheapest reliable option
$
GPT-5.2 Codex
Slow but reliable, decent design
$$$
Other models
HTML Pages
index.html
/index.html
Zoom
White Background
History
No history yet
Rename Chat
Delete Chat
hide
Morty Proxy
This is a
proxified and sanitized
view of the page, visit
original site
.