Code Workshop

You do not need to spin up a project for a quick experiment. No npm install, no config maze, no waiting. Code Workshop runs entirely in your browser: you type into three editor tabs - HTML, CSS and JavaScript - and the preview re-renders live on every change. Perfect for the moment when you just want to try an idea.

The editors come with syntax highlighting and a clean monospace layout so your code stays readable even when it grows past a few lines. Layout modes let you decide where you need the room: editor and preview side by side (horizontal), stacked (vertical), or hide one side entirely and use the full window just for writing or just for viewing.

The built-in console captures your console.log output and shows it right next to the preview - including error messages when your JavaScript trips up. That means you can debug without detouring into the browser dev tools and see immediately where something breaks.

The real time-saver is the preset library. More than 20 presets cover typical web building blocks and are deliberately in the Werkzeu.ge spirit: a live VAT calculator, a German address and postcode validator, an IBAN formatter, a business-letterhead generator, a CSS gradient generator, a password generator, an ELSTER XML viewer and more. You load a preset, see working code instantly and build from there.

Because everything runs client-side, not a single character leaves your machine. Your code is not sent to a server, not logged, not stored unless you trigger it yourself. That keeps the workshop fast and data-frugal - and you can prototype even sensitive code without a second thought.

Code Workshop is not a replacement for a full IDE on a large project, and it is not meant to be. It is the digital scratchpad for web code: open fast, typed fast, thrown away or built on fast. For snippets, learning exercises, small demos and quickly checking how a particular CSS or JS thing actually works, this is exactly the right place.