Взгляд внутрь
Этот безопасный просмотр показывает, для чего нужен инструмент, не выполняя действий, требующих аккаунта.
Что умеет Мастерская кода
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.
Функции
Three editors, live preview
HTML, CSS and JavaScript in separate tabs. The preview re-renders instantly on every change.
Built-in console
console.log output and JavaScript errors land right next to the preview - no detour through the dev tools.
Four layout modes
Side by side, stacked, editor-only or preview-only. You decide where you need the room.
Больше 20 шаблонов
VAT calculator, IBAN formatter, address validator, gradient generator, ELSTER viewer and more - ready to build on.
Подсветка синтаксиса
Clearly highlighted monospace code so even longer snippets stay readable.
Работает в браузере, без аккаунта
No setup, no build tool, no signup. Your code stays on your device.
Как это работает
- 1
Load a preset or start blank
Pick one of the 20+ presets as a starting point or type straight into the empty editors.
- 2
Edit HTML, CSS and JS
Switch between the three tabs and write your code. The preview updates automatically.
- 3
Посмотреть результат
Watch the live preview and keep an eye on the console to follow output and errors.
- 4
Adjust the layout
Set editor and preview side by side or stacked, or hide one side to focus.
Кому это нужно
Частые вопросы
Can I include external libraries?
You work with plain HTML, CSS and JavaScript in the preview. External scripts can be added via the usual HTML tags as long as they are reachable, but the core of the workshop is deliberately lightweight and package-manager-free.
Is my code saved or uploaded?
No. Code Workshop runs entirely in your browser. Your code is not sent to a server and not stored without your action.
Do I see JavaScript errors?
Yes. The built-in console shows both your console.log output and runtime errors, right next to the preview, so you immediately know where things break.
What are the presets for?
The 20+ presets are working examples - from a VAT calculator to IBAN formatting to a CSS gradient generator. You load them as a starting point, understand the structure and build from there instead of starting from scratch.
Does Code Workshop replace a real IDE?
No, and that is not its goal. It is the fast scratchpad for web code - for snippets, learning exercises and small demos. For a large project with a build process you stick with your IDE.
Does the workshop work offline?
Since everything runs client-side, editing and preview work without server contact. Only externally referenced resources need a connection.
Похожие инструменты
Форматировщик JSON
Formatiere, validiere und minimiere JSON mit Syntaxhervorhebung und Fehlererkennung. Kostenlo…
Тестер regex
Teste reguläre Ausdrücke mit Live-Highlighting und deutschen Muster-Vorlagen.
Проверка контраста CSS
Prüfe Farbkontraste nach WCAG 2.1 AA/AAA und APCA. Farbenblindheits-Simulation, Vorschläge, P…
Сравнение кода
Vergleiche zwei Texte zeilenweise mit farbiger Hervorhebung der Unterschiede.
Просмотр Markdown
Schreibe Markdown mit Live-Vorschau, Split-Ansicht, Toolbar, Syntax-Highlighting, Vorlagen, T…
Инструмент для цветов
Konvertiere zwischen HEX, RGB, HSL und CMYK. Generiere harmonische Farbpaletten.
Начнём с Мастерская кода?
Без установки. Входит в Plus. Открывай прямо в браузере.
Открыть сейчас