Developers Playground

YourTechGuys

Contains ads

About this app

Developers Playground is a code editor, live preview and debugger for web code, made for your phone and tablet. Write HTML, CSS, JavaScript and TypeScript, tap ▶ to see the result, and fix problems with a real debugger. Everything works offline, and your projects stay on your device unless you choose to share them.

WRITE CODE COMFORTABLY
• A proper code editor with syntax colours, line numbers, find and replace, and go to line
• Completion for HTML tags, CSS properties and JavaScript and TypeScript names, with their types
• Emmet abbreviations, snippets (add your own) and a symbol bar with the keys you need
• Mistakes are underlined as you type, with one-tap fixes for common ones
• Format with Prettier, rename symbols and jump to definitions
• Colour swatches with a colour picker in CSS

RUN AND PREVIEW
• Tap ▶ to run a page, a script, a stylesheet or your tests
• Preview at phone, tablet or desktop sizes, or fullscreen
• On tablets and in landscape, the preview sits beside your code
• Reloads when you save; CSS changes appear without a reload
• TypeScript, JSX and Tailwind work with no build step
• Add React, Vue, Preact, Lit, Alpine.js, Chart.js, three.js, D3 and more. They are downloaded once into your project, then work offline

DEBUG LIKE ON A DESKTOP
• Breakpoints, conditional breakpoints and logpoints
• Step over, into and out, with variables, watches and the call stack
• A console that shows objects, arrays and tables, with a JavaScript prompt
• Inspect elements, the box model and styles, and edit styles live
• See every network request, and view or edit localStorage and sessionStorage

TEST AS YOU GO
• A built-in test runner with describe, it, expect and the usual matchers
• Clear pass and fail results, with a tap to jump to a failing line

LEARN
• Three JavaScript courses, from your first function to working with the page
• A daily challenge to build a streak
• Each lesson checks your answer with tests and offers hints

START FAST
• 16 templates: web page, canvas game, React, TypeScript and JSX, Tailwind, PWA starter, landing page, form validation, tests and more
• New files start with a small working example for their type
• Import a .zip, open a folder on your device, or clone a Git repository

SHARE YOUR WORK
• Export a project as a .zip
• Show a live preview to phones and computers on the same Wi-Fi
• Commit, pull and push with Git, sync with GitHub, and publish to Netlify or GitHub Pages
• Upload a site to your own server over SFTP or FTP

OPTIONAL AI ASSISTANT
Use Claude with your own Anthropic API key to explain an error, fix a file, write tests or generate a component. You see exactly what will be sent first, and suggested changes are shown as a diff before anything is saved.

PRIVATE BY DESIGN
No account, no analytics. Your code stays on your device unless you share or publish it. Your code can only reach the internet if you allow it, per project. Tokens and keys are stored encrypted on your device.

The editor, preview and debugger are free.

What’s new

Welcome to Developers Playground, a code editor, live preview and debugger for web code on your phone.

• Write HTML, CSS, JavaScript and TypeScript with completion, Emmet and error checks
• Tap ▶ to preview at phone, tablet or desktop sizes, even offline
• Debug with breakpoints, variables and a full console
• Run tests, follow JavaScript lessons and take the daily challenge
• Start from 16 templates, then share, publish or sync with Git