What’s new in Playcode

New

• Colorful Redesign - The entire interface has been refreshed with a vibrant, colorful design. Every screen, button, and panel now feels more polished and visually engaging.
• Smarter AI Agent - The AI no longer tries to build everything at once. It now starts by suggesting a wireframe, explains its approach, and builds your project step by step. The result is working websites and interfaces with functional buttons, real navigation, and detailed layouts - not just a pretty picture.
• AI Modes: Economy, Smart & Pro - Choose how AI works for you. Economy uses Gemini for the lowest cost. Smart (recommended) automatically picks the best model for each task - fast and cheap for reading code, premium for writing it. Pro uses Claude for everything - fastest responses and best quality.
• Empty React Template - Start a React project from scratch with just the bare minimum: React, ReactDOM, and a blank component. No Tailwind, no example app - just a clean slate for your own code.

Improvements

• Mobile Experience - Completely reworked for phones. Every screen is clean, readable, and easy to use on small displays. No wasted space, no clipped elements - everything is crisp and well-organized.
• Unified Menu - The project menu and user menu are now combined into one. Everything you need - project actions, sharing, preferences, profile, billing - is in a single, clear menu. Simpler names, better organization.

New

• Visual Editing Mode - Click the "Visual edits" button in the preview toolbar to enter visual editing mode. Hover over any element to see it highlighted, then click to select it. Make changes directly in the properties panel or edit text inline by clicking on it.
• Inline Text Editing - Double-click any text element in the preview to edit it directly. Your changes are tracked and can be applied to your code with a single click.
• Properties Panel - Adjust colors, typography, spacing, borders, and effects for any selected element. Changes preview instantly in real-time.
• Batch Changes - Make multiple visual edits across different elements, then apply them all at once. The AI knows exactly which file and line each change belongs to.
• Ask AI from Preview - Select any element and type a request in the popup to ask AI to modify it. Perfect for quick tweaks like "make this button bigger" or "change the color scheme".

New

• Voice Input - Click the microphone button to describe your ideas by voice. Your speech is transcribed and inserted into the chat input, so you can review and edit before sending. Perfect for quickly explaining complex features or when typing feels slow.
• Crash-Safe Recording - If your browser crashes or refreshes during transcription, your recording is automatically saved locally. Just click the microphone again to retry - no lost voice messages.

New

• Attach Files in Chat - Upload images and files directly from the chat toolbar. Click the paperclip button to add photos for your website or upload documents. Files are saved to your project's /assets/ folder and the AI can reference them in your code.
• TinyPNG-like Compression - Images are now automatically compressed before upload. JPEGs use MozJPEG (same as TinyPNG) for ~65% smaller files. PNGs use color quantization to reduce file sizes by 60-75% while maintaining visual quality.
• Smart Image Resizing - Large images (over 2048px) are automatically resized. A 12MP phone photo becomes web-optimized in seconds. No more uploading multi-megabyte images that slow down your site.

New

• New Credit System - We've redesigned how AI credits work. Choose from flexible credit tiers: 100, 200, 400, 800, 1,200, or 2,000 credits per month. Pick the plan that fits your usage.
• Credits Roll Over - Unused credits now roll over to the next month. No more "use it or lose it" pressure. Monthly plans roll over for 1 month, annual plans keep rolling until your subscription renews.
• Upgrade or Downgrade Anytime - Change your credit tier whenever you want. Upgrading? You get extra credits immediately. Downgrading? Keep all your existing credits.
• Top-Up Credits - Need more credits mid-month? Buy additional credits starting at $15. Top-up credits are valid for 12 months.

Improvements

• Clearer Credit Display - See exactly how many credits you have and where they come from: subscription credits, rollover credits, and purchased credits.
• Better Billing Portal - Switch between credit tiers directly from your billing settings. No need to cancel and resubscribe.

For Existing Subscribers

If you're already a Pro subscriber, nothing changes for you. Your subscription continues at the same price with the same benefits. You can switch to a new credit tier anytime if you'd like.

New

• Free Unlimited Coding - We've completely removed the 8-line code limit! Code as much as you want, experiment freely, build anything. No restrictions, no timers, no paywalls blocking your creativity.

Why the change?

We believe in encouraging you to use the editor, not restricting it. We're removing friction from the coding experience. Write unlimited code for free, and upgrade when you need AI assistance, private projects, or more than 3 saved projects.

New

• Gemini 3 Flash is Now the Default AI Model - Google's latest Gemini 3 Flash delivers great results at a fraction of the cost. Build entire pages for just $0.05-$0.10 per task. Fast, cheap, and with a massive 1M token context window for complex projects.
• New Recommended Model - Gemini 3 Flash now appears in the recommended models section, right after Claude Opus 4.5. Perfect balance of speed, quality, and cost.

Improvements

• Simpler AI Model Selection - No more confusion with 10+ models. We now show 5 recommended models at the top with plain-English descriptions like "Balanced quality and price" or "Best UI/UX design quality".
• New Default: Claude Sonnet 4.5 - The best balance of quality and cost. Creates beautiful designs without burning through credits too fast.
• Power Users: Other Models - Need something specific? Click "Other models" to access Grok, Gemini, and GPT variants. Collapsed by default to reduce clutter.

New

• Import from AI - New button in the header to easily import code from ChatGPT, Claude, Gemini, or any AI assistant. Just copy the AI's response and paste it directly. Playcode automatically detects whether it's HTML, JavaScript, or CSS and puts it in the right file. No more manually creating files or figuring out where code should go.

Improvements

• Smart Content Detection - When you paste code, Playcode now intelligently detects the content type. HTML goes to index.html, JavaScript to your main script file, and CSS to your stylesheet. Works perfectly with code copied from ChatGPT Canvas.
• One-Click Undo - Made a mistake? The Import panel includes Undo/Redo buttons so you can quickly revert any changes without leaving the workflow.

New

• Multi-Language Playground - Playcode now supports Python, SQL, C++, C, and Go alongside JavaScript/TypeScript. All languages run 100% in your browser via WebAssembly. No server, complete privacy.
• Python with Pyodide - Full Python 3.12 with pip package manager. Install NumPy, Pandas, Matplotlib, scikit-learn, and 300+ packages. Visualizations render inline.
• SQL with PostgreSQL - Real PostgreSQL via PGlite with persistent IndexedDB storage. 18+ extensions including pgvector for AI, pg_trgm for fuzzy search. Database Explorer with pagination.
• C++ and C Compilers - Modern C++20 and C17 support via Clang/LLVM compiled to WebAssembly. Write, compile, and run instantly.
• Go Compiler - Run Go code in browser using Yaegi interpreter. Standard library support included.

Improvements

• Language-Aware UI - Header buttons adapt based on project language. Preview for JavaScript, Output for Python/C++/Go, Database Explorer for SQL.
• Python Package Manager - See popular packages (NumPy, Pandas, Matplotlib) immediately. Install any PyPI package by typing its name.
• New Templates - Quick-start templates for Python, SQL (PostgreSQL and SQLite), C++, C, and Go. Create a new project and start coding in seconds.

New

• AI Access Control - Project owners can now disable AI chat for collaborators. Perfect for coding interviews where you want to test candidates without AI assistance. Find the toggle in Share settings (Pro feature).

Improvements

• Redesigned Navigation - Console, Preview, and AI buttons now have text labels for better discoverability. Core features should be visible, not hidden behind icons.

New

• Claude Opus 4.5 is Now Default - As the creator of Playcode, I believe in giving you the best experience from the start. The AI now uses Claude Opus 4.5 by default, the most capable model available. It costs more per message, but the quality difference is immediately visible. Magic should feel like magic.
• Cleaner Chat Interface - Removed the model selector from the chat toolbar for a simpler experience. Power users can still change models via Menu → Preferences → AI Model.

New

• ChatGPT/Gemini Import/Export Buttons - Copy your project files with one click, paste into your AI, then paste the response back and apply changes instantly. Includes Undo/Redo to rollback if something breaks.
• Inspiring Placeholder - The AI input now shows animated examples of what you can build: customer portals, admin dashboards, landing pages, and more.

Improvements

• Consistent Design - All primary action buttons now use the signature orange gradient for a unified look across popups and notifications.
• Pro Badge Styling - Updated Pro badges to match the marketing design with the correct gradient colors.

New

• GPT-5.2 Model - OpenAI's most capable model is now available. Advanced reasoning and planning capabilities for complex coding tasks.

Major Update: Unlimited Free Coding!

We've removed all code limits. Playcode is now completely free to use with unlimited coding in the playground.

New

• Unlimited Free Coding - We've completely removed the 8-line code limit! Code as much as you want, experiment freely, build anything - no restrictions, no timers, no paywalls.
• Simplified Pricing - One simple plan: Playcode Pro at $9.99/month or $99/year (save $20 annually). No confusing tiers, no feature gates.
• Embedded Stripe Checkout - Upgrade without leaving Playcode. Supports all payment methods: cards, Apple Pay, Google Pay, bank accounts. 3D Secure handled automatically.
• Instant Cancellation Option - New "Cancel immediately" option for those who need to downgrade right away (standard cancellation still available).
• Plan Switching in Billing Portal - Switch between monthly and yearly billing anytime. Get prorated credits when upgrading to annual.
• Collaboration Limits - Free accounts support 1 collaborator (perfect for pair programming and 1-on-1 interviews). Pro gets unlimited collaborators for team sessions.
• Project Export (Pro) - Download your projects as ZIP files with source code and production build. Pro-only feature.

Improvements

• Grandfathering Policy - Already have 100 projects? Keep them all! The 3-project limit only applies to NEW saves. We don't punish early adopters.
• Smarter Upgrade Prompts - Hit a limit? See exactly what you have (your 3 projects listed) and what you'd get with Pro. No more confusion.
• Stripe Billing Portal Integration - Full control over your subscription: download invoices, update cards, add tax IDs, switch plans - all without contacting support.
• Real-time Webhook Sync - Cancel in Stripe? Reactivates in Playcode instantly. Switch plans? Updates immediately. Everything stays in perfect sync.
• Project Counter in Dashboard - Free users see "2/3 projects" right in the header. Always know where you stand.
• Reactivation Support - Changed your mind? "Don't Cancel" button brings back your subscription instantly, or use the billing portal.

Fair Downgrade Policy

If you cancel, here's what happens:

• Keep all existing projects - Even if you have 100, they're safe (grandfathered)
• Private → Public - Your private projects become public
• Custom domains removed - Sites get random number subdomains
• Storage: 1GB → 4MB - Large assets over 4MB will be deleted
• Keep using Playcode - Continue coding, just can't save new projects over limit

Questions? Check our billing help articles or [chat with us](#).

New

• SQL Playground: Full PostgreSQL and SQLite running 100% in your browser. Write, run, and test SQL queries instantly with no server required.
• PostgreSQL with Persistence: Your data is saved to IndexedDB. Close the tab, come back later, your tables are still there.
• 18+ PostgreSQL Extensions: pgvector for AI embeddings, pg_trgm for fuzzy search, hstore, uuid-ossp, ltree, cube, and more. All pre-loaded and ready to use.
• Database Explorer: Browse your tables, preview data with pagination, view row counts, and manage tables with a context menu.
• Export & Import: Export your database with pg_dump, import SQL dumps. Backup and restore your data easily.
• Sample Databases: Chinook (music store) and Northwind (e-commerce) databases preloaded for learning and testing.

Improvements

• Template System: Quickly switch between different configurations. Open PostgreSQL, then switch to SQLite, Python, or C++ with one click. Each template comes with its own files and features.
• Reset Files: New Reset button in Python and C++ playgrounds. Restore files to template defaults when you want a fresh start.
• Better Panel Management: Closeable panels with proper close buttons. Smart positioning when reopening panels.
• Updated Landing Pages: SQL Playground pages now highlight all the new PostgreSQL features, persistence, and extensions.

New Developer Tools

A complete suite of free, ad-free developer tools, all running in your browser with no data sent to servers.

• JSON Formatter : Beautify, validate, and explore JSON with Monaco editor. Tree view, JSON path display, sort keys, share via URL, and auto-save.
• JSON to TypeScript : Generate TypeScript interfaces from JSON. Customize naming, optional fields, and export format.
• JSON Diff : Compare and merge JSON files. Three-way merge, array comparison strategies, apply individual changes, and JSON Patch export.
• Regex Tester : Test regular expressions with real-time highlighting. Match groups, replacement preview, flag toggles, and common patterns library.
• Python Compiler : Run Python code in your browser via WebAssembly. Multi-file support, console output, and instant execution. No server required.
• C++ Compiler : Compile and run C++ code in your browser. WebAssembly-powered with standard library support and instant feedback.

Improvements

• Products Mega Menu: New dropdown menu in the header showcasing all Playcode products: AI Website Builder, language playgrounds, and developer tools.

New

• Three Agent Modes - Choose how the AI works: Ask (answers questions without changing code), Plan (creates a plan before coding), and Agent (full autonomous coding). Switch modes anytime from the chat toolbar.
• Plan Mode - AI asks clarifying questions with a step-by-step wizard, then creates a detailed implementation plan in plan.md. Review and edit the plan before executing.
• Execute Plan Button - After reviewing the plan, click Execute to start implementation. The AI reads your (potentially edited) plan and follows the steps exactly.
• Multi-Select Questions - When AI asks questions, some allow multiple selections (like choosing features). Single-select questions auto-advance to the next question.

Improvements

• Smarter Task Tracking - AI now merges task updates by default instead of replacing the entire list. No more accidentally losing your task progress.

New

• Real-time Preview Updates - Watch your website update live as the AI writes code. No more waiting for the entire file. See changes appear progressively in the preview as they're being written.

Improvements

• Tasks Shown Inline - AI task lists now appear inline with other tool messages. Click to expand and see progress like "Tasks: 2/3 done, 1 in progress".
• Visual Task Status - Tasks now show clear status icons: checkmark for completed, spinner for in-progress, and circle for pending.

Improvements

• New Default Model - Grok Code Fast 1 is now the default AI model. It's fast, affordable, and produces quality code, best value for most users.
• Cost Tier Indicators - Each model now shows a cost badge ($, $$, $$$, $$$$) so you can easily see relative pricing without complex math.
• Better Model Descriptions - Every model now has a clear, user-friendly description explaining what it's good at and why you'd choose it.
• Reorganized Model List - Models are now sorted by cost tier (cheapest first), making it easier to find budget-friendly options.

New

• Memory Records - AI assistant can now remember your preferences, coding patterns, and instructions across all projects. Tell it once, it remembers forever. Supports preferences (TypeScript, frameworks), instructions (never/always do X), patterns (your code style), context (project background), and decisions (architecture choices).
• Rich Text Support - Memory content supports markdown formatting with code blocks, making technical instructions clear and easy to reference.
• Memory Management UI - Browse, search, edit, and organize your memory records. Filter by type, confirm AI suggestions, or manually add memories. Access from Account menu or user profile.

Note: Memory Records are shared across all your projects and will be used by upcoming AI features to provide personalized assistance based on your preferences and past decisions.

New

• AI Credits Balance System - Pro subscribers can now manage their AI credits balance. Top up manually, enable auto-recharge, and get bonus credits with your subscription. Infrastructure ready for upcoming AI features (chat assistant, code generation, and more coming soon).
• Auto-Recharge - Set a threshold and never run out of credits. Your balance automatically tops up when it falls below your chosen amount. Monthly limits protect you from unexpected charges.

Note: AI features are currently in development. The balance system is live and ready to use. You can add credits now, and they'll be available when we launch AI features in the coming weeks.

Learn more about AI credits →

Improvements

• Edit Project Details Anytime - You can now edit the project name and move projects to folders even before saving them. When you open a template or create a new project, click the project title to rename it or organize it into a folder immediately
• Automatic Saving - When editing unsaved projects, changes are automatically saved to your account, so you don't need to manually save before organizing your work

New

• Public Folder - Create a /public folder in your project to store static files (images, PDFs, text files) that need to be accessible in both preview and published sites
• Production Build Support - Files in the public folder are automatically included when publishing your project, ensuring they work the same way in production as they do in preview

Learn more in our help article →

New

• Missing Projects Alert - Dashboard now shows a helpful alert if you can't see your projects after an update, with quick logout button
• Help Article - Comprehensive troubleshooting guide for missing projects with browser cache clearing instructions

New

• Delete Account - Permanently delete your account and all projects from settings
• Change Email - Update your email with two-step verification
• Playcode Pages Section - Dedicated explanation in pricing with help links

Improvements

• Redesigned Settings & Dashboard - Modern card-based UI with better visual hierarchy
• User Profile Header - Avatar, name, and email in sidebar
• Better Navigation - Icons, green hover states, improved folder tree

New

• Project Folders - Organize your projects with nested folders. Create hierarchical folder structures to keep your workspace tidy
• Folder Tree in Dashboard - Navigate your projects using a collapsible folder tree in the sidebar. Click folders to filter projects
• Drag & Drop - Drag projects from the table directly into folders. Visual feedback shows where your project will land
• Multiple Ways to Move Projects - Click folder column in table, use right-click context menu, or drag-and-drop to organize projects
• Edit from Project Page - Click project title in editor header to change both name and folder in one action
• Special Views - "All" shows all projects, "Archive" shows archived projects

New

• Changelog page - Track all Playcode updates, share links to specific versions, discuss on Discord
• Help Center - Self-hosted documentation with 18 articles covering everything from publishing to editor settings
• Preview size indicator - See exact dimensions when resizing preview panel
• Auto-copy asset path on upload - Upload an image and its path is instantly copied to clipboard
• Copy Path options - Right-click any file to copy path, relative path, or asset URL

After a year of building, Playcode 2026.1 is live.

I completely rewrote it from scratch. Here's what changed:

Architecture & Performance

• Offline-first architecture - Inspired by Linear's approach, we built our own offline-first ORM implementation
• Brand new design - New dashboard, project pages, and marketing site. We drew this design 2 years ago and finally had the chance to ship it
• Significantly faster - Even large projects render instantly now
• More NPM modules work - Better stability, better flexibility
• Moved to Bare Metal (Hetzner) - Why pay for Vercel when you can have one big, fast server?

New Features

• Address bar in WebView - Build multi-page websites with multiple HTML files and switch between them right in the preview
• SPA mode - React Router and client-side routing now work correctly. Navigate your single-page app and see the URL update in the address bar
• Quick run from file tree - Click any file icon to run it instantly. Works with HTML and JavaScript files. No need to change code - just click the triangle that appears on hover
• Command Palette - Quick access to all commands. Open/close preview, switch network schemes, and toggle features without touching menus
• Playcode Pages - Deploy static sites to our CDN (like Cloudflare Pages or GitHub Pages). Custom domains supported. Real-time sync keeps all your devices up to date

This was hard. Really hard. I even built a separate product getpartner.ai along the way to help me cope emotionally and physically.

Worth it: Absolutely.

But this is only the beginning. Thanks to rewriting everything in NestJS and our new offline-first ORM framework, we can now quickly add new features.

Please send suggestions and feedback through the chat button on the changelog page.

New

• Project downloading
• Uploading source files as a File not an Asset (link)

Improvements

• Move Home button to left