WebLab Help Documentation

A complete guide to WebLab, from the first line of code to a minified website.

Last Updated: November 11, 2026

1. Getting Started

WebLab has four parts in the bar at the top: Live editor, Minify, Format and Many files. The live editor opens with a starter page, a card with a button that counts its clicks, so you can change something and watch the page follow. Minify and Format share one box for your code; Many files works on a whole folder or zip at once.

2. The Code Boxes

The HTML, CSS and JS boxes colour the code, close brackets, quotes and tags for you, suggest names while you type and underline problems: an unclosed tag, an id used twice, a CSS property the browser does not know, or JavaScript that cannot be read. The line under the box shows the cursor's line and column, the size and the first problem; click it to go there.

Shorthand on Tab: type ul>li*3 or .card>h2+p in HTML, or m10 or df in CSS, and press Tab to expand it. The Find button (or F3) opens find and replace; Format tidies the open box, and the menu beside it can move inline <style> and <script> blocks into the CSS and JS boxes, run the JavaScript as a module or empty the box (Ctrl+Z brings it back). With the code above the page on a wide screen, the three boxes sit side by side.

3. The Live Page

The three boxes are joined into one page that runs beside the code (or above it, with the layout buttons; on a phone the Page tab shows it). With Auto on, the page runs again after you stop typing; a change to the CSS alone is applied at once without a reload, and the page keeps its scroll position. Run, or Ctrl+Enter, runs it straight away; the reload button above the page does the same.

The page runs in a closed-off frame that does not share this site's address. It cannot read this site's storage or cookies, or anything other tools keep, and it cannot move the main page elsewhere. localStorage in your page is a separate one kept with the project (up to 100,000 characters, after which setItem fails with a quota error, as in a browser), and cookies set by the page last until it runs again. A link in your page opens in a new tab when it leads to another website; a form shows in the console what it would have sent.

4. Screen Sizes

The list above the page has Fit the space, Phone 360 by 740, Phone 412 by 915, Tablet 768 by 1024 and 1024 by 768, Laptop 1366 by 768, Desktop 1920 by 1080 and Your own size (from 100 to 4,000 pixels wide and high). A size larger than the space is scaled down and the percentage is shown. The turn button swaps width and height, the page-only button hides the code, and Open in a new tab shows the page on its own in a new tab.

5. The Console

Under the page, the console shows what the page writes with console.log, info, warn, error, debug, table, group, count, time and assert, and every error with the line it came from in your HTML, CSS or JS box; click the file and line to jump there. Objects, arrays, maps, sets and page elements open to show what is inside. Repeated messages are counted instead of repeated, and the filter shows all, errors, warnings or logs. Type JavaScript into the line at the bottom and press Enter to run it in the page; Shift+Enter starts a new line, and the up and down arrows bring back earlier lines. The console keeps its last 1,500 lines and is cleared each time the page runs, unless you tick Keep console messages in Editor settings.

6. Endless Loops

Before your page runs, every for, while and do loop in the JS box and in <script> blocks gets a small check at the start of its body, without changing the line numbers. A loop that keeps running for more than two seconds is stopped as if it had reached break, and the console names its line. If the page stops answering for another reason, such as a recursive function, a Stop it button appears over the preview after a few seconds; Wait gives it more time. The check can be turned off in Editor settings, for code that really needs a long loop.

7. Templates and Opening Files

New offers a blank page, a starter page, a page layout with a side menu, a photo grid, a form that checks its fields, a canvas animation, a to-do list that remembers its items and a JavaScript module with top-level await. Each opens as a new project.

Open, or dropping files on the tool, takes HTML, CSS and JavaScript files, a folder or a zip. The main HTML page (index.html when there is one) opens in the HTML box; stylesheets and scripts it links to move into the CSS and JS boxes; pictures and fonts of up to 3 MB each (10 MB together) are shown from the opened files. CSS or JavaScript files on their own go into the open project. Up to 30 MB of code opens at once; files left out are counted in the message.

8. Projects

The project's name at the top left opens Projects: rename the open project (up to 80 characters), open another, copy or delete one, start a new project, back them all up to a JSON file or bring a backup back (up to 20 MB; projects already there are skipped). Projects are kept in this browser once you change something, up to 100 of them and 1,000,000 characters together, because every tool on the site shares the same storage. A project too large for that still opens and runs, and a message says it is not kept: save it as a file.

9. Saving and Sharing

Save as gives one HTML file with the CSS and JavaScript placed inside the page, or a zip with index.html, style.css and script.js linked to each other; Copy as one HTML file puts that page on the clipboard. The same menu can minify the page in the Minify tab or format all three boxes.

Share packs the project into a link, in the part after #, which browsers do not send to a server. Whoever opens it gets a copy in their own browser, kept in their Projects once they change it or press Ctrl+S. The window shows how long the link is; some chat apps cut very long links, and a project over 1,000,000 characters cannot be shared this way.

10. Editor Settings

The gear button sets the text size (12 to 20 pixels), the indent (2 spaces, 4 spaces or tabs), wrapping long lines, line numbers and folding, suggestions while typing, closing brackets, quotes and tags, shorthand on Tab, showing problems under the code, how long Auto waits after typing (0.3, 0.7 or 1.5 seconds), the endless-loop check and keeping console messages when the page runs again.

11. Minify

Paste code, open a file (up to 30 MB), drop one on the box or press Example. Auto tells the language from the file name or the code; you can also choose HTML, CSS, JavaScript, JSON or SVG. With Live on, the result follows as you type. The levels:

• Gentle removes comments and spaces, nothing else.
• Balanced also shortens colours, numbers and quotes and joins CSS rules that sit together.
• Smallest also drops optional closing tags and goes over JavaScript more times. The page stays the same, but the code may no longer pass a validator.

Under the result you see the size before and after, how much smaller it is, the gzip size before and after, a bar comparing them, what was changed (comments removed, colours shortened, rules joined, optional tags removed) and how long it took. Copy and Download take the result; the menu beside them can use the result as your code, download a JavaScript source map, open the result in the live editor or format it instead.

12. Minify Options

• JavaScript: shorten variable names, also the top-level ones, keep function or class names, remove console calls or debugger statements, keep licence comments (/*! ... */ and @license), the newest JavaScript the result may use (ES5, ES2015, ES2017 or ES2020), make a source map, write non-English characters as escapes.
• CSS: keep licence comments, use the colour forms of current browsers (#rrggbbaa, always on for Smallest), one rule per line.
• HTML: minify the CSS and JavaScript inside the page, remove quotes around attribute values where they are not needed, keep old Internet Explorer conditional comments, drop optional closing tags (always on for Smallest).
• JSON: allow comments and trailing commas (they are removed from the result). Numbers are kept exactly as written.
• SVG: decimal places in numbers (keep every digit, or 5 down to 1), remove editor data and metadata, remove the title and description (kept unless you choose this, as they help screen readers), remove the XML line.

Back to the usual settings puts the options of that language back.

13. Format

Format makes code easy to read again, also code that was minified: HTML, CSS, SCSS, Less, JavaScript, JSX, TypeScript, JSON and Vue. Choose the indent (2 spaces, 4 spaces or tabs) and the line length (80, 100, 120 or 160). More options sets double or single quotes, semicolons, commas after the last item, spaces inside braces, brackets around a single arrow function parameter, how spaces between HTML tags are treated (keep where they show, keep all, or ignore), one attribute per line, where the > of a long tag goes, and LF or CRLF line endings. The first format of a visit takes a moment while the formatter loads.

14. Many Files

Drop a website folder, a zip or a few files on the drop zone, or choose files or a folder. The table lists every file with its kind and size. Choose Minify or Format, optionally Add .min to the names and whether to put the other files in the zip too, and press Minify all or Format all; Stop ends the run. The table then shows each file's size after and how much smaller it is, or why it could not be read. Download everything as a zip gives the whole site back with its folders; Join the CSS files into one and Join the JS files into one appear when there are several. Names inside a zip are made safe, so the zip you download cannot place files outside its own folder.

15. Limits

• Projects kept in this browser: 100, and 1,000,000 characters together; a project name: 80 characters; a page's own localStorage: 100,000 characters.
• The Minify and Format box is kept between visits up to 100,000 characters; one file opened there: 30 MB.
• Opening files into the live editor: 30 MB of code, pictures and fonts up to 3 MB each and 10 MB together.
• Many files: 5,000 files or 500 MB at once; a file over 25 MB is copied as it is.
• A share link: projects up to 1,000,000 characters.
• Problems are shown under code of up to 500,000 characters; CSS nested more than 1,000 levels deep is not minified.

16. Keyboard and Accessibility

Every button and box can be reached with Tab and pressed with Enter or Space; inside a code box Tab indents and expands shorthand, so press Escape and then Tab to move on. While you use the tool (when it has focus, or nothing has focus and the tool is on screen): Ctrl+Enter runs the page, or minifies or formats now; Shift+Alt+F formats the open box; Ctrl+S (Cmd+S on a Mac) keeps the project, or downloads the result in Minify and Format; F3 opens find and replace; Ctrl+/ turns lines into comments and back; Ctrl+Space shows suggestions; ? opens the help. The browser's own shortcuts, such as Ctrl+F, Ctrl+L or Ctrl+D, are left to the browser. Messages are announced to screen readers.

17. Privacy and Your Data

Everything happens in this browser on your device: your code and files are never uploaded. Your settings are kept in this browser's storage under html-css-js-editor-settings and your projects under html-css-js-editor-projects, once you change something; nothing is written on a first visit. Settings and projects saved by the earlier WebLab app are moved over once. The code editor, the JavaScript minifier and the formatter are free, open-source software kept with the tool (licences). The page's ads and analytics work as described in the privacy policy.

18. How It Was Checked

Before this page was published, the engine behind the tool was checked: 80,533 cases in 14 groups. CSS from six well-known stylesheets and thousands of generated ones was minified at every level and read back by the browser, which had to see the same rules, properties and values; HTML pages, including this site's own, were minified and compared with the original as the browser builds and shows them; the JavaScript minifier and the formatter were compared with their published versions on the same code, and minified programs had to give the same results; JSON, SVG, zip files, share links, file names, the endless-loop check and the page built from the three boxes were checked against separate references; saved data made to break the tool was checked value by value; and very large and broken code (deep nesting, thousands of stray brackets, 5 MB files) had to finish within a time limit. Then the page was tried at four screen widths in both themes, with every part and very long and broken code.

19. Troubleshooting and Support

• The page beside the code is blank. Look in the console for an error, press Run, or check that Fit the space or a size is chosen above the page.
• A loop was stopped that should run. Turn off Stop endless loops in Editor settings and press Run.
• Could not minify or format. The message names the line and column; press Show in your code to go there.
• My project was not kept. It may be larger than this browser keeps for the tool; keep it with Save as, or delete old projects. A private window or cleared browser data also starts afresh.
• Paste does nothing. The browser did not allow reading the clipboard; click in the box and press Ctrl+V.
• Files from my zip are missing. Files protected with a password, packed in an unusual way or damaged are left out, and the message says how many.

For questions the FAQ does not answer, use the contact form.