JSFiddle
JSFiddle has the notion of panels (or tabs if you switch into the tabbed layout), there are 4 panels, 3 where you can enter code, and 1 to see the result: HTML - structure code, no need to add body doctype head, that's added automatically, CSS - styles. You can switch pre-pocessor to SCSS, JavaScript - behavior. There are many frameworks and code pre-processors you can use. Once you enter code, just hit "Run" in the top actions bar, and the fourth panel with results will appear. SFiddle allows you to switch the layout of the editor from the classic 2x2 grid to something that suits your needs. In addition to the grids mode it also has a tabbed mode. Grids are fully resizable. As an addition resizing the Results panel will tell you its width (handy for working on media queries).
Learn more
Devin Desktop
Devin Desktop (formerly Windsurf) is an AI-powered development environment that combines a full-featured IDE with advanced coding agents in a unified workspace. Formerly known as Windsurf, the platform enables developers to manage local and cloud-based AI agents, delegate tasks, review code, and ship software without leaving their editor. Developers can use multiple coding agents simultaneously to research, write, test, debug, and improve code while maintaining full visibility into every change. Devin Desktop includes features such as agent orchestration, shared workspaces, intelligent code completion, contextual code search, and integrated review tools. The platform supports a wide range of models, extensions, language servers, and MCP integrations, allowing teams to work with their preferred tools and workflows. Devin Desktop helps engineering teams accelerate software development, improve productivity, and manage AI-assisted coding at scale.
Learn more
CodePen
CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration. Find inspiration from 1.8 million+ front-end designers and developers. Browse and share work from world-class designers and developers in the front-end community. The CodePen Editor is highly customizable. There is autocomplete and Emmet for speed and accuracy. Plus you can set up smart defaults for starting new work. Completely customize the look of code demos on your own site. Change the look of your site? Just change the theme and all your Embedded Pens change too. Need to use an image in a Pen? No more awkwardly finding alternate hosting for it, you can drag-and-drop it right onto CodePen and we'll host it for you. And not just images! CSS, JSON files, SVGs, media files, whatever! Projects is the most powerful feature of CodePen.
Learn more
PhpStorm
The Lightning-Smart PHP IDE. PhpStorm deeply understands your code. PhpStorm is perfect for working with Symfony, Laravel, Drupal, WordPress, Zend Framework, Magento, Joomla!, CakePHP, Yii, and other frameworks. The editor actually 'gets' your code and deeply understands its structure, supporting all the PHP language features for modern and legacy projects. It provides the best code completion, refactorings, on-the-fly error prevention, and more. Make the most of the cutting edge front-end technologies, such as HTML 5, CSS, Sass, Less, Stylus, CoffeeScript, TypeScript, Emmet, and JavaScript, with refactorings, debugging, and unit testing available. See the changes instantly in the browser thanks to Live Edit. Perform many routine tasks right from the IDE, thanks to the Version Control Systems integration, support for remote deployment, databases/SQL, command-line tools, Docker, Composer, REST Client, and many other tools.
Learn more