Live browser projectadvanced
Neon Space Defender
A complete neon canvas shooter with waves, bosses, power-ups, keyboard controls, and mobile touch controls.
Run it. Read it. Build from it.
ToolerWork Code Library
Explore CSS generators and complete browser projects. Run the real result, inspect every source line, download the project, or open an editable local copy in Code Studio.
- Projects
- 16
- Languages
- 3
- Price
- Free
Filters
Original ToolerWork projects
Choose a project and start building
Every card opens the real running result and complete source code, including copy-ready CSS generators and browser projects.
Live browser projectadvanced
Realistic JavaScript Sun
A responsive Canvas solar animation with plasma texture, sunspots, flares, corona rays, and orbiting energy.
Live browser projectintermediate
Chibi Girl Walking Animation
A cheerful character scene animated entirely with HTML and CSS, including walking, blinking, clouds, and sparkles.
Live browser projectbeginner
Memory Match Card Game
A complete card-flip memory matching game with move counter, timer, and win detection in one HTML file.
Live browser projectbeginner
CSS Loading Spinners Showcase
Six distinct pure-CSS loading spinners — ring, dual ring, bouncing dots, pulse, sweeping bar, and growing squares — with no JavaScript.
Live browser projectintermediate
Typing Speed Test Game
A working WPM and accuracy calculator with live character-by-character highlighting, built with plain JavaScript.
Live browser projectbeginner
CSS Button Generator
Create a polished button with live color, spacing, radius, shadow, hover, and focus-state CSS.
Live browser projectbeginner
CSS Gradient Generator
Build a two-color linear gradient, adjust its angle, preview it live, and copy the exact CSS declaration.
Live browser projectbeginner
CSS Box Shadow Generator
Tune box-shadow offset, blur, spread, color, and opacity against a realistic product-card preview.
Complete source
Nothing hidden behind a mockup
Each project page runs the supplied entry file and shows the complete source. The same original code is used for copy, download, and Code Studio import.
Safe local editing
Experiment without changing the original
Code Studio creates a separate browser-local copy for your edits. Project previews run in a sandbox that cannot read ToolerWork cookies or saved site data.
A practical learning path
How to use the Code Library
- 01Run a project first and test its controls, responsive behavior, and visible states before reading the source.
- 02Open the entry file and connect each major HTML, CSS, or JavaScript section to something you observed in the preview.
- 03Create a separate browser-local copy in Code Studio and change one value or feature at a time.
- 04Retest the edited result on desktop and mobile, then download the complete files when your version is stable.
Included on every project page
Source you can inspect and run
- A sandboxed live preview runs the supplied browser project without exposing ToolerWork cookies or saved site data.
- The complete original files are available in a readable source viewer with individual-file and all-file copy actions.
- Project-specific explanations identify the rendering, interaction, responsive, and animation decisions worth studying.
- ZIP download and Code Studio import use the same source shown on the page, so the preview is not a separate mockup.
Browser and privacy notes
Run projects with clear boundaries
Live results execute inside a restricted iframe without access to ToolerWork cookies or saved site data. Code Studio copies are stored locally in your browser, and project downloads are assembled from the same published source. Review unfamiliar code before moving it outside the sandbox or granting it broader browser permissions.